Javascript动态显示时间

知识点

Timing事件之 setInterval()方法：

效果

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>

    <div id="time"></div>
	<input type="button" value="开始" id="start"></input>
	<input type="button" value="结束" id="end"></input>
</body>

<script type="text/javascript">
    window.onload = function(){

    
        var start = document.getElementById('start');
        var end = document.getElementById('end');
        var time1 = document.getElementById('time');

        start.onclick = function(){
            
            // clearInterval(timer);

            timer = setInterval(function(){
                
                var d = new Date();
                //  年月日
                var year = d.getFullYear();
                var month = d.getMonth()+1;
                var day = d.getDate();
                //  时分秒
                var h = d.getHours();
                var m = d.getMinutes();
                var s = d.getSeconds();
                if(s<10){
                    s = "0"+s;
                }
                // time1.innerHTML = s;
                time1.innerHTML = "当前时间："+year+"-"+month+"-"+day+" "+h+":"+m+":"+s;

            },100);

            end.onclick = function(){
                clearInterval(timer);
                // alert('stop');
            };
        };
        
    };
</script>
</html>

Tips: Please indicate the source and original author when reprinting or quoting this article.

特色标签

链友