JS数字抽奖游戏实现方法

时间：2021-05-26

本文实例讲述了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" ? document.getElementById(id) : id; }, $$: function (elem, oParent) { return (oParent || document).getElementsByTagName(elem); }, addEvent: function (oElement, sEvent, fnHandler) { oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler) }, removeEvent: function (oElement, sEvent, fnHandler) { oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("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 ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]) }, startMove: function (obj, pos, onEnd) { clearInterval(obj.timer); var _this = this; obj.timer = setInterval(function () { _this.doMove(obj, pos, onEnd) }, 30) }, doMove: function (obj, pos, onEnd) { var iCurL = this.getStyle(obj, "left"); var iCurT = this.getStyle(obj, "top"); var iSpeedL = (pos.left - iCurL) / 5; var iSpeedT = (pos.top - iCurT) / 5; iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL); iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT); if (pos.left == iCurL && pos.top == iCurT) { clearInterval(obj.timer); onEnd && onEnd() } else { obj.style.left = iCurL + iSpeedL + "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 ? -1 : 1; }, createArr: function () { for(var i=0; i<this.num+1; i++){ this.data.push(i); } this.data.sort(this.randomSort); }, closeEvent: function () { document.onmousedown=document.onmousemove=document.oncontextmenu=function() { return false; } }, startDraw: function () { var _this = this; document.onkeyup = function ( ev ) { var ev = ev || window.event; if(ev.keyCode == 13 || ev.keyCode == 32){ if(_this.btn && _this.timer){ if(_this.obj[_this.obj.length-1].btn){ _this.Play (); _this.btn = !_this.btn; _this.timer = !_this.timer; } }else{ if(_this.obj[_this.obj.length-1].btn){ _this.Stop (); _this.btn = !_this.btn; _this.timer = !_this.timer; } } return false; }else{ return false; } } }, Play: function () { if(this.timer && this.btn){ var t = 0; for(var i=0; i<this.obj.length; i++){ this.obj[i].btn = false; this.playTimer (this.obj[i],t); t += 1500; } }else{ return false; } }, playTimer: function (obj,t) { var _this = this; setTimeout(function(){ _this.Move (obj); },t) }, Del: function (a) { for(var i=0; i<this.data.length; i++){ if(a == this.data[i]){ this.data.splice(i,1); } } }, Stop: function () { if(!this.timer && !this.btn){ var n = this.num + 1; var r = this.data[Math.floor(Math.random() * (0-n) + n)]; this.show = r; this.Del (r); r = r.toString().split(""); 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="images/20153291274950386.jpg" /></div><div id="showback">100</div></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章