JS简单键盘按键秒表计时器3

最新推荐文章于 2024-10-13 06:44:27 发布

小松鼠绅士

最新推荐文章于 2024-10-13 06:44:27 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript innerHTML charCode

本文链接：https://blog.youkuaiyun.com/mydreamhope/article/details/54380880

本文介绍了一个简单的秒表计时器实现方案，通过HTML和JavaScript完成页面布局及计时功能，支持开始、暂停和复位操作，并且可以通过键盘快捷键进行控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表计时器</title>
    <script>
        window.onload = function () {
            var timeS = document.getElementsByTagName("p")[0];
            var btnStart = document.getElementsByTagName("input")[0];
            var btnPause = document.getElementsByTagName("input")[1];
            var btnReset = document.getElementsByTagName("input")[2];
            var m = 0;
            var ss = 0;
            var k = 0;
            timeS.innerHTML = ((m < 10 ? "0" + m : m ) + ":" + (ss < 10 ? "0" + ss : ss ) + ":" + (k < 10 ? "0" + k : k ));
            //时间函数
            var timeR;

            function timer() {
                k++;
                if (k == 99) {
                    ss += 1;
                    k = 0;
                }
                if (ss == 59) {
                    m += 1;
                    ss = 0;
                }
                timeS.innerHTML = (m < 10 ? "0" + m : m ) + ":" + (ss < 10 ? "0" + ss : ss ) + ":" + (k < 10 ? "0" + k : k );
            }

            document.onkeypress = function (eve) {
                clearInterval(timeR);
                var e = eve || window.event;
                var s = 115;
                var p = 112;
                var r = 114;
                if (e.charCode == s) {
                    //s开始
                    timeR = setInterval(timer, 10);
                } else if (e.charCode == p) {
                    //p暂停
                    clearInterval(timeR);
                } else if (e.charCode == r) {
                    //r复位
                    clearInterval(timeR);
                    m = 0;
                    ss = 0;
                    k = 0;
                    timeS.innerHTML = ((m < 10 ? "0" + m : m ) + ":" + (ss < 10 ? "0" + ss : ss ) + ":" + (k < 10 ? "0" + k : k ));
                }
            }
        }
    </script>
</head>
<body>
<div><p></p></div>
</body>
</html>