原生js实现抽奖功能

Posted 2020-11-22 Fourteen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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>

效果如下：

以上是关于原生js实现抽奖功能的主要内容，如果未能解决你的问题，请参考以下文章

原生js轮盘抽奖实例分析（幸运大转盘抽奖）

JS实现随机抽奖功能

Js实现轮盘抽奖功能，一招帮你解决选择困难症

JS实现转动随机数抽奖的特效代码