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程序设计有所帮助。

Javascript 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
You might like
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
python进阶教程之循环对象
2014/08/30 Python
python写日志封装类实例
2015/06/28 Python
python实现按任意键继续执行程序
2016/12/30 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python numpy 反转 reverse示例
2019/12/04 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
会计实习期自我鉴定
2013/10/06 职场文书
2014年维稳工作总结
2014/11/18 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers