抽奖案例

1.页面结构，HTML文件

<!DOCTYPE htnl>
<html>
<head>
      <meat charset="utf-8">
      <title>抽奖</title>
　　<link el="stylesheet" href="./style.css">
</head>
<body>
   <button id="start">开始点名</button>
   <button id="end">结束点名</button>
   <div id="name">张三</div>
   <script src="./index.js"></script>
</body>
</html>

2.css样式文件：      

 

             *{
                 padding: 0;
                 margin: 0;
                 list-style: none;
             }
             body{
                 text-align: center;
                 background-color: skyblue;
             }
             #start,#end{
                 margin-top: 50px;
             }
             #name{
                 width: 400px;
                 height: 400px;
                 border: 4px solid greenyellow;
                 box-shadow: 0 0 10px blue;
                 background-color: #000;
                 margin: 50px auto;
                 color: yellow;
                 font-size: 100px;
                 font-family: "PMingLiU";
                 display: flex;
                 justify-content: center;
                 align-items: center;
             }

 

 

 

3.js文件

             //定义变量接收花名册数组
             var nameArray=["汤浩","","赵吉周","王文照","姚凯凯","刘博","张坤","雷胜洪","马云","张娇","王晓倩","杨朝霞","","任一凡","李烨","马荣华","向秋月","王小龙","程亚浩","李连杰","洋洋","呼延觉罗.修","吴雅丽","齐鹏博","澹台改娜","梁颖","王艳"];
             var timer=null;
             $("name").innerText=nameArray[0];
             //监听鼠标点击事件
             $("start").onclick=function(){
             //清除定时器
             clearInterval(timer);
             //开启定时器
             timer=setInterval(function(){
                 //随机数
                 var s_index=parseInt(Math.random()*(nameArray.length));
                 var s_name=nameArray[s_index];
                 //console.log(s_name);
                 $("name").innerText=s_name;
                 
             },30);
             }
             end.onclick=function(){
                //清除定时器
                clearInterval(timer);
             }
             function $(id){
                 return typeof id==="string"?document.getElementById(id):null;
             }

4.页面效果：