JS數(shù)字抽獎(jiǎng)游戲?qū)崿F(xiàn)方法
本文實(shí)例講述了JS數(shù)字抽獎(jiǎng)游戲?qū)崿F(xiàn)方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>新年網(wǎng)頁抽獎(jiǎng)程序</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- jquery 年會(huì)抽獎(jiǎng)程序
- jQuery+PHP實(shí)現(xiàn)的擲色子抽獎(jiǎng)游戲?qū)嵗?/a>
- js實(shí)現(xiàn)簡(jiǎn)單隨機(jī)抽獎(jiǎng)的方法
- PHP轉(zhuǎn)盤抽獎(jiǎng)接口實(shí)例
- php隨機(jī)抽獎(jiǎng)實(shí)例分析
- jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
- js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)游戲?qū)嵗?/a>
- js實(shí)現(xiàn)簡(jiǎn)易的單數(shù)字隨機(jī)抽獎(jiǎng)(0-9)
- JS實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)特效代碼
- jQuery實(shí)現(xiàn)類似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果
- jQuery實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)活動(dòng)仿QQ音樂代碼分享
相關(guān)文章
JavaScript實(shí)現(xiàn)圖片滑動(dòng)切換的代碼示例分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片滑動(dòng)切換的代碼示例分享,能夠控制包括滑動(dòng)時(shí)間和切換數(shù)量等,需要的朋友可以參考下2016-03-03基于JavaScript實(shí)現(xiàn)簡(jiǎn)單掃雷游戲
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)簡(jiǎn)單掃雷游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01Javascript 判斷兩個(gè)IP是否在同一網(wǎng)段實(shí)例代碼
javascript功能的強(qiáng)大之處是我們大家有目共睹的,幾天小編向大家介紹Javascript 判斷兩個(gè)IP是否在同一網(wǎng)段,感興趣的朋友可以參考一下2016-11-11layer.close()關(guān)閉進(jìn)度條和Iframe窗的方法
今天小編就為大家分享一篇layer.close()關(guān)閉進(jìn)度條和Iframe窗的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08移動(dòng)端Ionic App 資訊上下循環(huán)滾動(dòng)的實(shí)現(xiàn)代碼(跑馬燈效果)
這篇文章主要介紹了移動(dòng)端Ionic App 資訊上下循環(huán)滾動(dòng)的實(shí)現(xiàn)代碼,實(shí)現(xiàn)方法需要借助jQuery庫的選擇器和動(dòng)畫函數(shù),并且把jquery的操作封裝到指令里,具體指令代碼大家通過本文學(xué)習(xí)吧2017-08-08JS禁止查看網(wǎng)頁源代碼的實(shí)現(xiàn)方法
本文給大家介紹js如何禁止查看網(wǎng)頁源代碼,并給大家分享了三種查看路徑的方法,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-10-10