首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS数字抽奖游戏实现方法

Posted in Javascript onMay 04, 2015

本文实例讲述了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程序设计有所帮助。

JS数字抽奖游戏实现方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
vue实现购物车选择功能
Jan 10 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 #Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 #Javascript
js实现每日自动换一张图片的方法
May 04 #Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 #Javascript
JavaScript中操作字符串小结
May 04 #Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 #Javascript
javascript多行字符串的简单实现方式
May 04 #Javascript
德劲1107(1) YH-R296(1) 德劲1102(1) 安健(1) SRF-M100(1) RP2100(1) SHARP(1) A254(1) GF515(1) 上海永华(1)
You might like
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
获取远程文件大小的php函数
2010/01/11 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php 邮件发送问题解决
2014/03/22 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
ES6的新特性概览
2016/03/10 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
医院门卫岗位职责
2013/12/30 职场文书
升国旗演讲稿
2014/09/05 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
opencv检测动态物体的实现
2021/07/21 Python
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android