公司新年网页抽奖程序数字抽奖游戏JS特效

稿源：互联网 2022-08-02 13:59:45 点击： 7434 撤稿纠错

非常实用的网页抽奖程序，简单易操作适合大型活动抽奖。

以下讨论的是和公司新年抽奖程序数字抽奖游戏相关的公司新年网页抽奖程序数字抽奖游戏JS特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年网页抽奖程序_demo by js.alixixi.com</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="http://js.alixixi.com/UploadPic/2015-3/20153291274950386.jpg" />
</div>
<div id="showback">100</div>
</body>
</html>

关于公司新年网页抽奖程序数字抽奖游戏JS特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2015032994639.shtml方便下次再访问哦。

·上一篇： 图像不随滚动条移动，始终固定在网页垂直居中央的特效代码
·下一篇： 在线即时显示CSS样式改变DIV颜色宽高度大小实时预览特效

公司新年网页抽奖程序数字抽奖游戏JS特效

文章分类LIST >>返回首页

最新游戏

最新新闻

公司新年网页抽奖程序 数字抽奖游戏JS特效

文章分类LIST >>返回首页

最新游戏

最新新闻

公司新年网页抽奖程序数字抽奖游戏JS特效