script 当前时间计时

XGkerwin

已于 2022-02-20 15:23:18 修改

阅读量218

点赞数

分类专栏：前端文章标签： javascript 前端 css3

于 2022-02-20 15:19:34 首次发布

本文链接：https://blog.csdn.net/XGkerwin1/article/details/123031329

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当前时间计时

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计时器</title>
</head>
<body onload="init();">
<h1 id="h1"></h1>
<button id="stop" onclick="showStop();">暂停</button>
<button id="start" onclick="start();">开始</button>
</body>

<script type="text/javascript">
    var id;
    function init() {
        //获取时间
        var d1 = new Date();
        //转为本地格式
        var date = d1.toLocaleTimeString();
        //获取展示时间的对象h1
        var h1 = document.getElementById("h1");
        //判断 整分改变颜色
        if (0 == d1.getSeconds()) 
            h1.innerHTML = "<font color='red'>" + date + "</font>";
        } else {
            h1.innerHTML = date;
        }
        //由于setTimeout执行一次，
        id = window.setTimeout(init, 1000);
    }

    function showStop() {
        window.clearTimeout(id);
    }

    function start() {
        id = window.setTimeout(init, 1000)
    }
</script>
</html>