2顶

公司新年网页抽奖程序数字抽奖游戏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颜色宽高度大小实时预览特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻

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

文章分类LIST >>返回首页

最新游戏

最新新闻

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