<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #box1{ text-align: center; margin-top: 78px ; } #box2{ height: 90px; width: 900px; margin:0 auto; margin-top: 15px; } #btn{ width: 100px; height: 100px; } #box3{ margin:0 auto; width: 100px; height:100px; } h1{ text-align: center; } ul li{ list-style: none; float:left; width: 100px; height: 32px; text-align: center; line-height: 32px; background-color: rgb(251,235,215); margin-left: 10px; } </style> </head> <body> <h1>随机点名系统</h1> <div id="box1"></div> <div id="box2"> <ul> <li>王思聪</li> <li>周杰伦</li> <li>林俊杰</li> <li>陈奕迅</li> <li>薛之谦</li> <li>杨迪</li> <li>毛不易</li> <br> <br> <li>古巨基</li> <li>马化腾</li> <li>马云</li> <li>王健林</li> <li>李刚</li> <li>李嘉诚</li> </ul> </div> <div id="box3"> <button id="btn">点我</button> </div> <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 h = dt.getHours(); var m = dt.getMinutes(); var s = dt.getSeconds(); var week = dt.getDay(); var date = dt.getDate() my$("box1").innerHTML = year+"年"+month+"月"+date+"日"+h+":"+m+":"+s; } clock(); var timeId = setInterval(clock,1000); } var timeId; my$("btn").onclick = function () { if (this.innerHTML == "点我") { timeId = setInterval(function () { var num = Math.floor(Math.random() * 13); for (var i = 0; i < ele$("li").length; i++) { ele$("li")[i].style.backgroundColor = "rgb(251,235,215)" } ele$("li")[num].style.background = "red"; }, 1) this.innerHTML = "停止"; }else{ clearInterval(timeId); this.innerHTML = "点我"; } } </script> </body> </html>
js实现点名系统
猜你喜欢
转载自www.cnblogs.com/Ironman725/p/10934585.html
今日推荐
周排行