首页手记留念小计时器Javascript

留念小计时器Javascript

标签：

Html/CSS 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" 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>

点击查看更多内容