可视化的
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????body{ ???????????background-color: aliceblue; ???????} ???????.box{ ???????????width: 1000px; ???????????height: 240px; ???????????/*background-color: aqua;*/ ???????????margin: 0 auto; ???????????margin-top: 100px; ???????????clear: both; ???????} ???????#btn{ ???????????width: 100px; ???????????height: 30px; ???????????margin-left: 600px; ???????????margin-top: 50px; ???????} ???????.name{ ???????????width: 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{ ???width: 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; ???width: 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>JS 同一标签随机不停切换数据点菜--解决选择困难症
原文地址：http://www.cnblogs.com/renfanzi/p/7658602.html