原生js实现跑马灯抽奖效果

目前好多的微信活动都有一些抽奖活动，其中就有跑马灯。

<!DOCTYPE html>
<html>
<head>
<title>跑马灯效果</title>
<style>
table .pao{
    border:1px solid #e5e5e5;
    padding:10px 20px;
}
table .on{
    border-color:red;
    color:red;
}
</style>
<script>
window.onload = function(){
    var paomadeng = {
        currentIndex : 1, //当前索引
        indexCount : 12, //个数
        timer : 0, //定时器
        currentCycle : 0, //当前圈数
        cycles : 4, //跑的圈数
        speed : 400, //速度，即定时器的时间间隔
        key : 0, //钥匙,随机数
        btn : 0, //触发按钮
        classPrefix : "pao-", //元素类名class前缀
        
        reset : function(){
            //触发对象
            paomadeng.btn = this;
            paomadeng.btn.style.display = "none";
            
            clearInterval(paomadeng.timer);
            paomadeng.currentCycle = 0;
            paomadeng.speed = 400;
            paomadeng.key = Math.ceil(Math.random() * paomadeng.indexCount);
            console.log("key:" + paomadeng.key);
            
            paomadeng.run();
        },
        run : function(){
            console.log("speed:" + paomadeng.speed);
            
            var before = paomadeng.currentIndex == 1 ? paomadeng.indexCount : paomadeng.currentIndex - 1;
            
            //设置上一索引的类名
            var beforeNode = document.getElementsByClassName(paomadeng.classPrefix + before)[0];
            var beforeClassNewName = beforeNode.className.replace("on","");
            beforeNode.className = beforeClassNewName;
            //设置当前索引的类名
            var currentNode = document.getElementsByClassName(paomadeng.classPrefix + paomadeng.currentIndex)[0];
            currentNode.className += " on"; //注意前面有空格
            
            paomadeng.upSpeed();
            paomadeng.downSpeed();
            
            paomadeng.currentIndex += 1;
            paomadeng.currentIndex = paomadeng.currentIndex > paomadeng.indexCount ? 1: paomadeng.currentIndex;        
        },
        //加速
        upSpeed : function(){
            //前2圈且speed>100时加速
            if(paomadeng.currentCycle < 2 && paomadeng.speed > 100){
                paomadeng.speed -= 5 * paomadeng.currentIndex ;
                paomadeng.stop();
                paomadeng.start();
            }
        },
        //增加圈数 并 减速
        downSpeed : function(){
            //增加圈数
            if(paomadeng.currentIndex == paomadeng.indexCount){
                paomadeng.currentCycle += 1;
            }
            
            //如果当前所跑圈数小于总圈数-1 并且 速度小于400，那么减速
            if(paomadeng.currentCycle > paomadeng.cycles-1 && paomadeng.speed < 400){
                paomadeng.speed += 20;
                paomadeng.stop();
                paomadeng.start();
            }
            
            //如果当前所跑圈数大于总圈数 且 索引值等于key，那么停止奔跑
            if(paomadeng.currentCycle > paomadeng.cycles && paomadeng.currentIndex == paomadeng.key){
                paomadeng.stop();
                paomadeng.showPrize();
            }
        },
        stop : function(){
            clearInterval(paomadeng.timer);
        },
        start : function(){
            paomadeng.timer = setInterval(paomadeng.run , paomadeng.speed);
        },
        showPrize : function(){
            //过一会再显示提示信息
            setTimeout(function(){
                alert("恭喜，你中了" + paomadeng.key + "等奖");
                paomadeng.btn.style.display = "block";
            },700);
        
        }
    };
    document.getElementById("startPao").onclick= paomadeng.reset;
};
</script>
</head>

<body>
<div class="container">
<table>
    <tr>
        <td class="pao pao-1">1</td>
        <td class="pao pao-2">2</td>
        <td class="pao pao-3">3</td>
        <td class="pao pao-4">4</td>
    </tr>
    <tr>
        <td class="pao pao-12">12</td>
        <td class="pao"></td>
        <td class="pao"></td>
        <td class="pao pao-5">5</td>
    </tr>
    <tr>
        <td class="pao pao-11">11</td>
        <td class="pao"></td>
        <td class="pao"></td>
        <td class="pao pao-6">6</td>
    </tr>
    <tr>
        <td class="pao pao-10">10</td>
        <td class="pao pao-9">9</td>
        <td class="pao pao-8">8</td>
        <td class="pao pao-7">7</td>
    </tr>
</table>
<br/>
<input type="button" value="开始跑" id="startPao" />
</div>
</body>
</html>

 

posted @ 2015-09-14 22:10  刘一二  阅读(3129)  评论(0)  编辑  收藏  举报