码迷,mamicode.com
首页 > Web开发 > 详细

原生js实现抽奖功能

时间:2019-11-19 10:34:06      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:body   click   实现   图书   window   function   fun   family   图片   

 

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实现抽奖功能

标签:body   click   实现   图书   window   function   fun   family   图片   

原文地址:https://www.cnblogs.com/Fourteen-Y/p/11887553.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!