js--简单秒表实现

最新推荐文章于 2022-07-15 11:34:28 发布

泽哈哈

最新推荐文章于 2022-07-15 11:34:28 发布

阅读量210

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42134836/article/details/106730119

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript编写一个简单的秒表程序。通过JavaScript的定时器功能，实现计时、暂停和重置等操作，帮助读者理解JavaScript在时间处理上的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            border: 1px solid;
            margin: auto;
            width: 300px;
            height: 500px;
            text-align: center;
            background: aliceblue;
        }
        #count{
            padding: 80px;
        }
        input{
            width:150px;
            background: yellow;
            margin: 10px 20px 10px 20px;
        }
    </style>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var count = 0;
            var timer = null;
            $("start").onclick = function () {
                timer = setInterval(function () {
                    count++;
                    $("id_S").innerHTML = shownum(count % 60);
                    $("id_M").innerHTML = shownum(arseInt(count / 60) % 60);
                    $("id_H").innerHTML = shownum(parse(count / 3600));
                },100)
            }
            $("pause").onclick = function () {
                clearInterval(timer);
            }
            $("stop").onclick = function () {
                clearInterval(timer);
                count = 0;
                $("id_S").innerHTML = "00";
                $("id_M").innerHTML = "00";
                $("id_H").innerHTML = "00";
            }
        }
        function shownum(num) {
            if (num<10) {
                return "0"+num;
            } else {
                return num;
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <div id="count">
            <span id="id_H">00</span>:
            <span id="id_M">00</span>:
            <span id="id_S">00</span>
        </div>
        <input id="start" type="button" value="开始">
        <input id="pause" type="button" value="暂停">
        <input id="stop" type="button" value="停止">
    </div>
</body>
</html>