用js实现一个随机点名

html代码

<h1>随机点名系统</h1> <div id="time"></div> <div id="box"> <ul> <li>张三</li> <li>李四</li> <li>王五</li> <li>王磊</li> <li>张强</li> <li>张伟</li> <li>王伟</li> <li>李娜</li> <li>王静</li> <li>王丽</li> <li>李强</li> <li>王敏</li> </ul> </div> <input type="button" value="开始" id="inp">

css代码

<style> *{ margin: 0; padding: 0; } h1{ text-align: center; margin-top: 30px; } #time{ position: absolute; top: 150px; right: 100px; } #box{ width: 800px; position: absolute; left: 50%; margin-left: -400px; top: 200px; } li{ width: 60px; height: 20px; float: left; background-color: palevioletred; list-style: none; padding: 20px; margin: 5px; text-align: center; } #inp{ width: 100px; height: 50px; position: absolute; top: 400px; left: 50%; margin-left:-50px; } </style>

这里引用了一个公共js

// 通过id名获取的元素 function my$(id) { return document.getElementById(id); } //通过标签名获取的元素 function ele$(element) { return document.getElementsByTagName(element); }

js代码

<script src="common.js"></script> <script> window.onload=function(){ //获取时间 function clock(){ var dt=new Date(); var year=dt.getFullYear(); var month=dt.getMonth()+1; var day=dt.getDate(); var h=dt.getHours(); var m=dt.getMinutes(); var s=dt.getSeconds(); function bu(i){ return i<10? "0"+i:i; } my$("time").innerText=year+"-"+bu(month)+"-"+bu(day)+" "+bu(h)+":"+bu(m)+":"+bu(s); } clock();//当页面加载完毕时,初始化一次 setInterval(clock,1000); //给按钮绑定点击事件 var lis=document.getElementsByTagName("li");//获取所有的li console.log(lis); var flag=true;//给一个开关 var timeId; my$("inp").onclick=function(){ if (flag){ flag=false; my$("inp").value="停止"; timeId=setInterval(function(){ var num=parseInt(Math.random()*lis.length);//获取li索引随机数 for (var i=0;i<lis.length;i++){//遍历 lis[i].style.backgroundColor="";//排他功能 } lis[num].style.backgroundColor="red";//使每一个随机的li背景色为红色 },200) }else{ flag=true; my$("inp").value="开始"; clearInterval(timeId); } } } </script>