留念小计时器Javascript
2016-07-12 21:04:03 来源：慕课网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> .whole{ width:450px; height:250px; margin:200px auto auto auto; background:#FF0; border:2px solid red; overflow:hidden; } .first{ margin:20px auto 20px 22px; float:left; background:#F00; width:120px; height:210px; } .second{ margin:20px auto 20px 22px; float:left; background:#F00; width:120px; height:210px; } .third{ margin:20px auto 20px 22px; float:left; background:#F00; width:120px; height:210px; } .button{ width:450px; height:100px; margin:10px auto auto auto; overflow:hidden; } .button1{ margin:20px auto 20px 22px; float:left; background:#FF0; width:120px; height:60px; } .button2{ margin:20px auto 20px 22px; float:left; background:#FF0; width:120px; height:60px; } .button3{ margin:20px auto 20px 22px; float:left; background:#FF0; width:120px; height:60px; } .again{ width:450px; height:100px; margin:10px auto auto auto; overflow:hidden; }</style><script type="text/javascript"> function num1run(){ var num=Math.round(Math.random()*9+1); document.getElementById("num1").innerHTML=num; } var int1=setInterval(num1run,10); function num2run(){ var num=Math.round(Math.random()*9+1); document.getElementById("num2").innerHTML=num; } var int2=setInterval(num2run,10); function num3run(){ var num=Math.round(Math.random()*9+1); document.getElementById("num3").innerHTML=num; } var int3=setInterval(num3run,10);</script></head><body> <div class="whole"> <div class="first"> <h1 id="num1" style="color:#FF0; font-size:115px; margin:30px auto;" align="center" >1</h1> </div> <div class="second"> <h1 id="num2" style="color:#FF0; font-size:115px; margin:30px auto;" align="center" >1</h1> </div> <div class="third"> <h1 id="num3" style="color:#FF0; font-size:115px; margin:30px auto;" align="center" >1</h1> </div> </div> <div class="button"> <div class="button1"> <input type="button" value="按钮1" style="width:80px;height:40px; margin:10px auto 0 20px" onclick="clearInterval(int1)"/> </div> <div class="button2"> <input type="button" value="按钮2" style="width:80px;height:40px; margin:10px auto 0 20px" onclick="clearInterval(int2)"/> </div> <div class="button3"> <input type="button" value="按钮3" style="width:80px;height:40px; margin:10px auto 0 20px" onclick="clearInterval(int3)"/> </div> </div> <div class="again"> <input type="button" value="再来一次" style="width:80px;height:20px; margin:0px auto 0 185px" onclick="myrefresh()" /> </div><script type="text/javascript"> function myrefresh(){ window.location.reload();}</script></body></html>