定时器，setInterval、clearInterval

HTML实时时间显示

weixin_30824277

于 2018-06-18 17:07:00 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wfl9310/p/9195575.html

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个实时更新的时间显示功能。通过设置定时器，每秒更新输入框中的时间值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
<input type="text" id="id1" onclick="begin()"><!--事件 onclick-->
<button onclick="end()">
    停止
</button>
<script>
    function showTime() {
        var current_time=new Date().toLocaleString();//拿到当前时间且以字符串显示
        var ele=document.getElementById("id1");//拿到input的id
        ele.value=current_time;//当前时间显示在input的value中

    }
    var clock1;
    function begin() {
        if (clock1==undefined){//如果clock1==undefined
            showTime();//显示时间
            clock1 = setInterval(showTime,1000);//1秒显示一次
        }
    }

    function end() {
        clearInterval(clock1);//停止clock1
        clock1=undefined;//赋值
    }
</script>
</body>
</html>