本文实例讲述了JS数字抽奖游戏实现方法。分享给大家供大家参考。具体实现方法如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>新年网页抽奖程序</title> <style type="text/css"> * {margin:0; padding:0;} ul,li {list-style-type:none;} body {overflow:hidden;} #back {width:100%; height:100%; background:#f5f5f5; position:absolute; z-index:1; } #box {width:360px; height:100px; position:absolute; z-index:3; top:50%; left:50%; margin-top:-50px; margin-left:-180px; text-align:center; } #box1,#box2,#box3 {width:100px; height:100px; line-height:100px; float:left; background:#321c24; border:10px #321c24 solid; border-radius:50%; position:relative; overflow:hidden; } #box1 ul,#box2 ul,#box3 ul {color:#fff; font-size:68px; font-family:"Arial Black"; text-align:center; width:100px; height:100px; line-height:100px; position:absolute; top:0; left:0; } #box1 ul li,#box2 ul li,#box3 ul li { width:100px; height:100px; background:red; border-radius:50%; } </style> <script type="text/javascript"> var AIR = { $: function (id) { return typeof id === "string" "on" + sEvent, fnHandler) }, removeEvent: function (oElement, sEvent, fnHandler) { oElement.removeEventListener "on" + sEvent, fnHandler) }, getElementClient: function (){ var arr = []; if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){ arr.push(document.documentElement.clientWidth); arr.push(document.documentElement.clientHeight); return arr; } }, getStyle: function (obj, attr) { return parseFloat(obj.currentStyle "left"); var iCurT = this.getStyle(obj, "top"); var iSpeedL = (pos.left - iCurL) / 5; var iSpeedT = (pos.top - iCurT) / 5; iSpeedL = iSpeedL > 0 "px"; obj.style.top = iCurT + iSpeedT + "px"; } } } function Draw (obj, num) { this.obj = obj; this.num = num; this.data = []; this.result = []; this.show = 0; this.btn = true; this.timer = true; this.h = 0; this.uh = 0; this.initialize(); } Draw.prototype = { initialize: function () { this.createArr (); this.createElement (); this.closeEvent (); this.startDraw (); }, createElement: function () { for(var j=0; j<this.obj.length; j++){ var ul = document.createElement("ul"); for(var i=0; i<10; i++){ var li = document.createElement("li"); li.innerHTML = i; ul.appendChild(li) } this.obj[j].appendChild(ul); this.obj[j].btn = true; AIR.$$("ul",this.obj[j])[0].innerHTML += AIR.$$("ul",this.obj[j])[0].innerHTML; } var UL = AIR.$$("ul",this.obj[0])[0]; this.h = AIR.getStyle(AIR.$$("li",UL)[0],"height"); this.uh = AIR.$$("li",UL).length * this.h }, randomSort: function (a, b) { return Math.random()>.5 ""); var c = this.obj.length - r.length; if(r.length < this.obj.length){ for(var i=0; i<c; i++){ r.unshift(0) } } this.result = r; //document.title = r+" : "+this.data; var t = 0; for(var i=0; i<this.obj.length; i++){ this.obj[i].btn = false; this.obj[i].index = i; this.obj[i].num = this.result[this.obj[i].index]; this.stopTimer (this.obj[i],t); t += 1500; } } }, stopTimer: function (obj,t) { var _this = this; setTimeout(function(){ _this.showResult (obj); },t) }, showResult: function (obj) { var _this = this; this.timer = true; this.btn = true; obj.btn = false; obj.vh = -obj.num * this.h; obj.timeOut = setInterval(function(){ obj.speed -= 1; if(obj.speed == 1){ clearInterval(obj.timeOut); clearInterval(obj.timer); obj.timer = setInterval(function(){ if(obj.ul.offsetTop >= obj.vh){ clearInterval(obj.timer); AIR.startMove(obj.ul,{left:0,top:obj.vh},function(){ obj.btn = true; var set = true; for(var i=0; i<_this.obj.length; i++){ if(!_this.obj[i].btn){ set = false; } } if(set){ _this.Open(_this.show) } }); } obj.ul.style.top = obj.ul.offsetTop + obj.speed +"px"; },30); } },100); }, Open: function (num) { document.title += " "+ num; }, Move: function (obj) { var _this = this; var obj = obj; obj.btn = false; obj.timer = null; obj.speed = 1; obj.ul = AIR.$$("ul",obj)[0]; obj.ul.style.height = this.uh +"px"; obj.timer = setInterval(function(){ if(obj.ul.offsetTop > 0){ obj.ul.style.top = -(_this.uh/2) +"px"; } obj.ul.style.top = obj.ul.offsetTop + obj.speed +"px"; },30); obj.timeOut = setInterval(function(){ obj.speed += 1; if(obj.speed == 30){ clearInterval(obj.timeOut); obj.btn = true; } },300) } } var initialize = function () { new Draw ([AIR.$("box1"),AIR.$("box2"),AIR.$("box3")],100); reSize (); } var reSize = function () { var v = AIR.getElementClient(); AIR.$$("img",AIR.$("back"))[0].width = v[0]; AIR.$$("img",AIR.$("back"))[0].height = v[1]; } AIR.addEvent(window,"load",initialize); AIR.addEvent(window,"resize",reSize); </script> </head> <body> <div id="box"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div style="clear:both"></div> </div> <div id="back"> <img src="/UploadFiles/2021-04-02/20153291274950386.jpg">希望本文所述对大家的javascript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 不止黑神话!杭州给原创企业真金白银扶持 打造“杭州游戏”品牌
- 很有多样性:《战锤》首次引入非二元性别角色
- 《少女前线2:追放》项目组将裁员 官方:进一步优化组织结构
- 陈慧琳.2002-闪亮每一天新歌+精选2CD【正东】【WAV+CUE】
- 袁培华.1992-有缘【歌林】【WAV+CUE】
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]
- 《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/分轨][1GB]
- 黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司空精魄收集攻略
- 《真三国无双:起源》新情报将于9月26日公开,实机演示亮相!
- 黑神话悟空上品鼠禁卫精魄获取方法一览|上品鼠禁卫精魄收集攻略
- 优美的旋律至真的情怀《品茶轻音乐·极品典藏Vol.1CD1》[WAV+CUE]
- 曾嵘《峥嵘岁月DSD(试音碟)》WAV+CUE
- 小提琴天碟AlfredoCampoli坎波利-贝多芬D大调小提琴协奏曲与普罗米修斯作品选FLAC