抽奖案例
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.页面效果：
