计时器实现简单方法

开发工具与关键技术，计时器方法可以实现在指定的事件过后，单次或重 复调用的功能，一天24小时也涉及计时的问题。

那么下面来看看计时器如何停止和开始运行吧。

html结构

<h1 id="h1">年月日 时分秒</h1>
    <button id="btn">停止</button>
    <button id="btn1">开始</button>

js样式

顶部

<script>

        var btn=document.getElementById("btn");
        btn.onclick=function(){
    
    
            clearInterval(x);//清楚计时器  结束
        }
        
        var x;
        var btn1=document.getElementById("btn1");
        function move(){
    
    
                x=setInterval(function(){
    
    
                var h1=document.getElementById("h1");
                h1.innerHTML=myTime();
            },1000)
        }

        btn1.onclick=function(){
    
    
            move();
        }
        window.onload=function(){
    
    
            move();
        }

        function myTime(){
    
    
            var time=new Date();
            var year=time.getFullYear();
            var month=(time.getMonth()+1).toString().padStart(2,"0");
            var date=time.getDate().toString().padStart(2,"0");
            var hours=time.getHours().toString().padStart(2,"0");
            var minutes=time.getMinutes().toString().padStart(2,"0");
            var seconds=time.getSeconds().toString().padStart(2,"0");

            return `${
      
      year}年${
      
      month}月${
      
      date}日 ${
      
      hours}: ${
      
      minutes}: ${
      
      seconds}`
        }

    </script>

回到js顶部