简单计时器【正计时】-升级版

最新推荐文章于 2024-07-21 17:58:14 发布

jiamaa

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量226

点赞数

文章标签： html

本文链接：https://blog.csdn.net/jiamaa/article/details/121503719

版权

这是考虑到上一个版本的后台自动停止运行问题而设计的，代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时间使用</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .container {
            width: 90%;
            height: 100%;
            margin: 0px auto;
            padding: 0px;
            text-align: center;
            clear: both;
        }

        .item {
            position: relative;
            top: 35%;
            text-align: center;

        }

        button {
            position: relative;

        }

        span {
            font-size: 8vw;
        }
    </style>
    <script type="text/javascript">
        function dateconvert(i) {
            if (i < 10) {
                return i = "0" + i;
            } else {
                return i = "" + i;
            }
        }

        function countdown(start, lastlefttime) {
            var end = new Date().getTime();
            var lastlefttime = (end - start) + lastlefttime;
            var minute = parseInt(lastlefttime/1000 / 60);
            var second = parseInt(lastlefttime/1000 % 60);
            document.getElementById("m").innerText = this.dateconvert(minute);
            document.getElementById("s").innerText = this.dateconvert(second);
            return lastlefttime;
        }

        window.onload = function () {
            document.getElementById("m").innerText = this.dateconvert(0);
            document.getElementById("s").innerText = this.dateconvert(0);
            var lastleftTime = 0;
            var s = document.getElementById("start");
            var c;

            s.onclick = function () {
                var start = new Date().getTime();
                var temp = lastleftTime;
                if (s.innerText == "暂停") {
                    clearInterval(c);
                    s.innerText = "开始";
                } else {
                    c = setInterval(function () {
                        lastleftTime = countdown(start, temp);
                    }, 1000);
                    s.innerText = "暂停";
                }
            };
            var r = document.getElementById("reset");
            r.onclick = function () {
                clearInterval(c);
                document.getElementById("m").innerText = window.dateconvert(0);
                document.getElementById("s").innerText = window.dateconvert(0);
                lastleftTime = 0;
                s.innerText = "开始";
            };
        };
    </script>
</head>

<body>
    <div class="container">
        <div class="item">
            <span id="m"></span><span>:</span>
            <span id="s"></span>
        </div>
        <button id="start">开始</button>
        <button id="reset">重置</button>
    </div>

</body>

</html>

jiamaa

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单计时器【正计时】-升级版

这是考虑到上一个版本的后台自动停止运行问题而设计的，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时间使用</title> <style> html, body { margin: 0; padding: 0;
复制链接

扫一扫