可视化的
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: aliceblue; } .box{ 1000px; height: 240px; /*background-color: aqua;*/ margin: 0 auto; margin-top: 100px; clear: both; } #btn{ 100px; height: 30px; margin-left: 600px; margin-top: 50px; } .name{ 100px; height: 30px; float: left; background-color: antiquewhite; margin-left: 10px; margin-top: 10px; text-align: center; line-height: 30px; } #span{ float: right; position: relative; top: 55px; right: 185px; } h1{ text-align: center; } </style> </head> <body> <h1>随机点菜小玩意</h1> <span id="span"></span> <div class="box" id="box"></div> <input type="button" id="btn" value="点名"/> <script> // 获取id函数 function my$(id){ return document.getElementById(id) }; // 模拟后台数据 var arr = ["面条", "麻辣烫", "小碗菜", "盖饭" ]; // 动态创建层 for(var i =0;i<arr.length;i++){ var div = document.createElement("div"); div.innerText=arr[i]; div.className="name"; my$("box").appendChild(div); }; // 点菜 my$("btn").onclick=function(){ var peoples= arr.length; // 监视按钮的状态 if(this.value==="点名"){ // 定时针 timeId=setInterval(function () { // 清空所有层的颜色 for(var i =0;i<arr.length;i++){ my$("box").children[i].style.background="" }; // 留下当前层的颜色 var random = parseInt(Math.random()*peoples); my$("box").children[random].style.background="red"; },10); this.value="停止"; }else{ // 清除计时器 clearInterval(timeId); this.value="点名"; }; }; // 获取时间的函数 getTime(); setInterval(getTime,100) function getTime(){ var day = new Date(); var year = day.getFullYear();//年 var month = day.getMonth()+1;//月 var dat = day.getDate();//日 var hour = day.getHours();//小时 var minitue = day.getMinutes();//分钟 var second = day.getSeconds();//秒 month=month<10?"0"+month:month; dat=dat<10?"0"+dat:dat; hour=hour<10?"0"+hour:hour; minitue=minitue<10?"0"+minitue:minitue; second=second<10?"0"+second:second; my$("span").innerText=year+"-"+month+"-"+dat+" "+hour+":"+minitue+":"+second } </script> </body> </html>
方法二：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background: #f5faff; } .ks{ 140px; line-height: 55px; text-align: center; font-weight: bold; color: #fff; text-shadow:2px 2px 2px #333; border-radius: 5px; margin:0 20px 20px 0; position: relative; overflow: hidden; background-color: limegreen; border:1px solid #d2a000; box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset; } #nu{ background-color: red; } #div1 { font:40px '微软雅黑';text-align: center; background-color: gainsboro; 60%; height: 60%; margin-bottom:20px; } </style> </head> <body> <form> <div align="center"> <input type="button" value="开始点菜" onclick="students()" class="ks"/> <input type="button" value="停止点菜" onclick="stop()" class="ks" id="nu"/> <hr color="blue"> <br> <div id="div1" align="center">随机点菜区域</div> </div> </form> <script type="text/javascript"> var i = 0; //t用来接收setTimeOut()的返回值 var t; var st = ["麻辣烫", "不吃了", "爱吃不吃", "盖饭", "面条"]; var u; //点菜函数 function students() { //顺序点菜 /* if (i < st.length) { u = st[i]; } else { //点到最后一个就回来重新点起 i = 0; u = st[i]; } i = i + 1; */ //随机点名 产生0-数组长度之间的数作为数组下标 var num = Math.floor(Math.random()*st.length); u = st[num]; //更改文本框显示的value值 document.getElementById("div1").innerHTML = u ; t = setTimeout("students()", 50); } //停止点菜函数 function stop() { clearTimeout(t); } </script> </body> </html>