javascript之计时器

作者: 阿木心 | 来源:发表于2018-11-30 16:34 被阅读0次

本文使用javascript时间简单时间累加计时

效果图

<head>  
    <meta charset="UTF-8">  
    <title>js简单计时器</title>  
</head >  
<body>  
    <label>计时:</label> 
    <input type="text" name="" id="timeradd"/> 
    <script type="text/javascript">
        var ele_timer = document.getElementById("timeradd");
        var n_sec = 0; //秒
        var n_min = 0; //分
        var n_hour = 0; //时
        
        //60秒 === 1分
        //60分 === 1小时
        function timer() {
         return setInterval(function () {
        
          var str_sec = n_sec;
          var str_min = n_min;
          var str_hour = n_hour;
          if ( n_sec < 10) {
           str_sec = "0" + n_sec;
          }
          if ( n_min < 10 ) {
           str_min = "0" + n_min;
          }
        
          if ( n_hour < 10 ) {
           str_hour = "0" + n_hour;
          }
        
          var time = str_hour + ":" + str_min + ":" + str_sec;
          ele_timer.value = time;
          n_sec++;
          if (n_sec > 59){
           n_sec = 0;
           n_min++;
          }
          if (n_min > 59) {
           n_sec = 0;
           n_hour++;
          }
        
        
         }, 1000);
        }
        
        var n_timer = timer();
    </script>  
</body>  
</html>