Visualization of
<! DOCTYPE Html>"en"> <meta charset="UTF-8"> <title></title> <style>body{Background-Color:aliceblue; }. box{width:1000px; height:240px; /*Background-color:aqua;*/margin:0Auto; 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>"span"></span> <divclass="Box"Id="Box"></div> <input type="Button"Id="btn"Value="Roll Call"/> <script>//Get ID functionfunction my$ (ID) {returndocument.getElementById (ID)};//Simulating background data vararr = ["Noodles","Spicy Soup","Small bowl dish","Rice Bowls" ];//creating layers Dynamically for(vari =0; i<arr.length;i++){ vardiv = document.createelement ("Div"); Div.innertext=Arr[i]; Div.classname="name"; my$ ("Box"). appendchild (Div); };//Ordermy$ ("btn"). onclick=function () {varpeoples=arr.length;//Monitor the status of a button if( This. value==="Roll Call"){//Timing NeedlesTimeid=setinterval (function () {//clear the colors of all layers for(vari =0; i<arr.length;i++) {my$ ("Box"). children[i].style.background="" };//leave the color of the current layer varRandom = parseint (Math.random () *peoples); my$ ("Box"). children[random].style.background="Red"; },Ten); This. value="Stop"; }Else{//Clear Timerclearinterval (Timeid); This. value="Roll Call"; }; };//function to get timeGetTime (); SetInterval (GetTime, -) function GetTime () {varDay =NewDate (); varYear = Day.getfullyear ();//years varmonth = Day.getmonth () +1;//Month varDAT = Day.getdate ();//Day varhour = Day.gethours ();//hours varMinitue = Day.getminutes ();//minutes varSecond = Day.getseconds ();//secondsmonth=month<Ten?"0"+Month:month; DAT=dat<Ten?"0"+Dat:dat; Hour=hour<Ten?"0"+Hour:hour; Minitue=minitue<Ten?"0"+Minitue:minitue; Second=second<Ten?"0"+Second:second; my$ ("span"). innertext=year+"-"+month+"-"+dat+" "+hour+":"+minitue+":"+Second}</script></body>View CodeMethod Two:
<! DOCTYPE Html>"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:020px 20px0; position:relative; Overflow:hidden; Background-Color:limegreen; border:1px solid #d2a000; Box-shadow:01px 2px #fedd71 inset,0-1px0#a38b39 inset,0-2px 3px #fedd71 inset; } #nu {background-color:red; } #div1 {font:40px'Microsoft Ya-Black'; text-align:center; background-Color:gainsboro; Width: -%; Height: -%; Margin-bottom:20px; }</style>"Center"> <input type="Button"Value="Start Ordering"onclick="students ()" class="KS"/> <input type="Button"Value="Stop Ordering"onclick="Stop ()" class="KS"Id="Nu"/> "Blue"> <br> <div id="Div1"align="Center"> Random à la carte area </div> </div></form><script type="Text/javascript">vari =0; //T to receive the return value of settimeout () varT; varst = ["Spicy Soup","no, eat.","love to eat or not to eat","Rice Bowls","Noodles"]; varu; //Order functionfunction Students () {//order à la carte /*if (i < st.length) {u = st[i]; } else {//points to the last one will come back to re-click i = 0; U = st[i]; } i = i + 1;*/ //Random name generation 0-the number of array lengths as an array subscript varnum = Math.floor (math.random () *st.length); U=St[num]; //change the value of the text box displaydocument.getElementById ("Div1"). InnerHTML =u; T= SetTimeout ("students ()", -); } //Stop ordering functionfunction Stop () {cleartimeout (t); } </script></body>View CodeJS the same tag randomly switching data a la carte-solve the choice of difficult disease