留念小计时器Javascript@慕课网原创_慕课网

Javascript自己想做的小的计时器应用
<!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"  align="center" >1</h1>
        </div>
        <div class="second">
            <h1 id="num2"  align="center" >1</h1>
        </div>

        <div class="third">
            <h1 id="num3"  align="center" >1</h1>
        </div>   
    </div>
    <div class="button">
        <div class="button1">
            <input type="button" value="按钮1"  onclick="clearInterval(int1)"/>
        </div>

        <div class="button2">
            <input type="button" value="按钮2"  onclick="clearInterval(int2)"/>
        </div>

        <div class="button3">
            <input type="button" value="按钮3"  onclick="clearInterval(int3)"/>
        </div>

    </div>
    <div class="again">
            <input type="button" value="再来一次"  onclick="myrefresh()" />
     </div>

<script type="text/javascript">

  function myrefresh()
{
   window.location.reload();
}

</script>
</body>
</html>