原生js实现抽奖功能

 

n久以前代码存档。

<!doctype html>
<html>
    <head>
    <title>抽奖</title>
    <meta charset="utf-8">
    <style>
        *{
            margin:0;
            padding:0;
        }
        .title{
            width:400px;
            height:70px;
            margin:0 auto;
            padding-top:30px;
            text-align:center;
            font-size:24px;
            font-weight:bold;
            color:#F00;
        }
        .btns{
            width:190px;
            height:30px;
            margin:0 auto;
        }
        .btns span{
            display:block;
            float:left;
            width:80px;
            height:27px;
            line-height:27px;
            background:#036;
            border:1px solid #eee;
            border-radius:7px;
            margin-right:10px;
            color:#FFF;
            text-align:center;
            font-size:14px;
            font-family:"微软雅黑";
            cursor:pointer;
        }
    </style>
    <script>
        var data=['iphone11','ipad','iwatch','airpod','kindle','500元图书券','谢谢参与'];
        var timer=null;
        var flag=0;

        window.onload=function(){
            var play=document.getElementById('play');
            var stop=document.getElementById('stop');
            //开始抽奖
            play.onclick=playFun;
            stop.onclick=stopFun;
            //键盘事件
            document.onkeyup=function(event){
                event=event||window.event;
                if(event.keyCode==13){
                    if(flag==0){
                        playFun();
                        flag=1;
                    }else{
                        stopFun();
                        flag=0;
                    }
                }
            }
        }

        function playFun(){
            var title=document.getElementById('title');
            var play=document.getElementById('play');
            clearInterval(timer);
            timer=setInterval(function(){
                var random=Math.floor(Math.random()*data.length);
                title.innerHTML=data[random];
            },50);
            play.style.background='#999';
        }

        function stopFun(){
            clearInterval(timer);
            var play=document.getElementById('play');
            play.style.background='#036';
        }
    </script>
 </head>
 <body>
    <div id="title" class="title">开始抽奖啦！</div>
    <div class="btns">
       <span id="play">开 始</span>
       <span id="stop">停 止</span>
    </div>
 </body>
</html>

 

 

效果如下：

 

 

 

 

 

posted @ 2019-11-19 10:20  Fourteen  阅读(685)  评论(0)  编辑  收藏  举报