javascript - 不使用 Date.getTime() 的秒表 javascript-6ren

javascript - 不使用 Date.getTime() 的秒表 javascript

转载作者：行者123 更新时间：2023-11-29 10:15:27

25

4

作为一个 java script 初学者，我想尝试写秒表代码，我写了以下代码:

<!DOCTYPE html>
<html>
<body>
    <p>A script on this page starts a stopwatch:</p>
    <p id="demo"></p>

    <button id="start-stop" onclick="myTimerFunction()">Start time</button>
    <button id="resetter" style="visibility:hidden" onclick="resetTimer()">Reset</button>

    <script>
        var timer = new Object();
        timer.hours = 0;
        timer.minutes = 0;
        timer.seconds = 0;
        timer.milliseconds = 0;
        timer.add = add;
        function add() {
            timer.milliseconds+=10;
            if(timer.milliseconds == 1000) {
                timer.seconds++;
                timer.milliseconds = 0;
            }
            if(timer.seconds == 60) {
                timer.minutes++;
                timer.seconds = 0;
            }
            if(timer.minutes == 60) {
                timer.hours++;
                timer.minutes = 0;
            }
        }
        timer.display = display;
        function display () {
            var str = "";
            if(timer.hours<10) {
                str += "0";
            }
            str += timer.hours;
            str += ":";
            if(timer.minutes<10) {
                str += "0";
            }
            str += timer.minutes;
            str += ":";
            if(timer.seconds<10) {
                str += "0";
            }
            str += timer.seconds;
            str += ":";
            /*var x = timer.milliseconds/10;
            if(x < 10) {
                str += "0";
            }*/
            if(timer.milliseconds<10) {
                str += "0";
            }
            if(timer.milliseconds<100) {
                str += "0";
            }
            str += timer.milliseconds;
            return str;
        }
        timer.reset = reset;
        function reset() {
            timer.hours = 0;
            timer.minutes = 0;
            timer.seconds = 0;
            timer.milliseconds = 0;
        }

        var myVar;
        function start() {
            timer.add();
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("demo").innerHTML = timer.display() + "\t" + t;
        }

        function stop() {
            clearInterval(myVar);
        }

        function resetTimer() {
            stop();
            timer.reset();
            document.getElementById("demo").innerHTML = timer.display();
            document.getElementById("start-stop").innerHTML="Start time";
            document.getElementById("resetter").style.visibility="hidden";
        }

        function myTimerFunction() {
            var x = document.getElementById("start-stop");
            if(x.innerHTML.match("Start time")) {
                document.getElementById("resetter").style.visibility="visible";
                myVar = setInterval(function(){start()},10);
                x.innerHTML="Stop time";
            }
            else if(x.innerHTML.match("Stop time")) {
                stop();
                x.innerHTML="Start time";
            }
        }
    </script>
</body>
</html>

但是，问题是当我将 delay 放入 setInterval(func,delay) 时 < strong>1 并进行相应的更改，它没有给出可靠的秒计时。它比普通时钟慢。它为 delay >= 10 提供“某种”可靠的计时。

我在线检查了秒表 js 脚本，但它们都使用某种或其他形式的 Date() 并将“延迟”设置为“50”，我现在不明白为什么。 SO 中有一个不使用 Date() 的答案，但它也有与我相同的问题。我无法在那里发表评论，因为我没有足够的声誉，所以我要问一个问题。

所以，我的问题是:如果我们不使用 Date() 函数，是否无法实现正常的时钟可靠性？否则如果可能的话，请帮助我改进这段代码或者请提供一些指示。

谢谢。

最佳答案

如果没有 getTime，您可以这样做，您真的不应该...

var ms = 0;
var intervalID;

function start() {
    var freq = 10; // ms
    intervalID = setInterval(function () {
        ms += 10;
        var myDate = new Date(ms);
        document.getElementById('watch').innerHTML = myDate.getUTCHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds() +
            ":" + myDate.getMilliseconds();
    }, freq);
}

function stop() {
    clearInterval(intervalID);
}

function reset() {
    ms = 0;
    myDate = new Date(ms);
    document.getElementById('watch').innerHTML = myDate.getUTCHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds() +
        ":" + myDate.getMilliseconds();
}

Fiddle

关于javascript - 不使用 Date.getTime() 的秒表 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23089543/

25

4

0

文章推荐： javascript - JSON 补丁 rfc6902 : Sequential operation and index

文章推荐： java - 如果数字是立方体，如何在 Java 中检查

文章推荐： java - 每次刷新时重新创建 JSF 2.1 View 作用域受管 bean

date - 如何计算pyspark数据帧中DateType的Max(Date)和Min(Date)？
数据框有一个字符串类型的日期列 '2017-01-01' 它被转换为 DateType() df = df.withColumn('date', col('date_string').cast(Dat
javascript - date && new Date(date) 在做什么？
这个问题在这里已经有了答案: What is "x && foo()"? (5 个答案) 关闭 8 年前。我在 bootstrap-datepicker.js 文件中遇到过这个。作者在_setD
Javascript date(string date) - date() 无法显示正确的差异
我有一个数据库 utc 字符串，我正在传递到 Date(attrs.endDate)，然后通过 new Date() 减去当前的 utc 日期，但我无法得到它来为我提供 2 个 utc 日期的正确差异
javascript - 为什么 (new Date() == new Date()) 为假，而 (Date() == Date()) 为真？
这个问题在这里已经有了答案: how to determine if 2 dates object equals each other? [duplicate] (3 个答案) 关闭 6 年前。我
JavaScript Date 作为对象接收，就像这次旅行。Date : "/Date(1426530600000)/"
这个问题已经有答案了: How can I convert "/Date(1399739515000)/" into date format in JavaScript? (3 个回答) 已关闭 8
javascript - 将 Date 实例传递给 Date 构造函数以克隆 Dates
根据MDN ，我们只能将以下类型的参数传递给 Date 构造函数: new Date(); new Date(value); // Unix timestamp new Date(dateString
php - Eloquent - Where Date >= date(now) and whereNull ('date' )
我从表中获取所有项目: endDate >= 现在 endDate 为 NULL published 等于 1。这是我所拥有的，但它给了我 0 个项目: $items = Items::orderB
mysql - 当我从 >= DATE 切换到 BETWEEN DATE and DATE 时，为什么此查询花费的时间如此之长？
此查询需要很长时间才能完成。当我将 WHERE 子句设置为 new_dl >= '2014-01-01' 时，查询大约需要 6 分钟才能浏览大约 3 个月的数据。现在不知道为什么这个应该从 12 个月
java - date = date + part 与 date.concat(part)
我有一个正在为项目开发的小型 Java 程序，它使用 JavaMail 从指定的 URI 中提取用户的收件箱，然后开始处理消息。在 Outlook 中，属性菜单中有一个功能可以设置邮件的到期日期，它
javascript - 格式化 Date.getHours()、Date.getMinutes()、Date.getSeconds()
我想在获取 Date.getHours()、Date.getMinutes() 和 Date.getSeconds() 的值后格式化输出>. 这是一条漫长的路: var dt = new Date()
java - Date.format(Date) 与 Date.format(Object)
我发现java.text.DateFormat有两种格式化日期的方法。一种是采用 Date 参数，另一种是采用 Object 参数。我检查了DateFormat源代码，似乎他们调用了不同的内部方法。
java - Java Date 构造函数 Date(long date) 有什么问题？
我有两个对象，p4 和 p5，它们都具有 Date 属性。在某些时候，构造函数工作正常: p4.setClickDate(new Date(System.currentTimeMillis() - 8
node.js - Sequelize $gt date 转换为 = date 而不是 > date
我是使用 Sequelize 和 Node.js 的新手，但我的代码中存在日期比较问题。 User.findOne({ where: { resetToken: passwordToken,
javascript - 使用 $format Date = $.PHP Date ("U", date) 转换为时区；
我正在使用一个名为 fullcalendar 的 jquery 日历。当用户单击某一天时，他们将被发送到另一个页面以创建该天的事件。单击的日期作为 date 提供。然后通过下面的函数运行将其转换为 U
python - 试图将日期列表放入 date.year、date.month、date.day 中进行比较？
我有一个列表列表，每个列表中都有整数值，代表 8 年期间的日期。 dates = [[2014, 11, 14], [2014, 11, 13], ....., [2013, 12, 01]
c# - GroupJoin by date where date in second list between two dates from first
我有两个表: 首先是TimeValues(示例) time | value 12/28/18 | 5.6 01/03/19 | 5.6 01/04/19 | 5.6 01/09/19 | 5.
date - 如何将 go 中的 DATE 转换为 salesforce 中的数据类型 DATE
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
javascript Date 为什么 Date new Date ("2011-12-13") 被认为是星期一而不是星期二？
像这样实例化的日期对象: new Date("2011-12-13") 返回一个认为自己是星期一的日期对象: Date {Mon Dec 12 2011 16:00:00 GMT-0800 (PST)
MySQL : How to select record where begin date and end date between two dates of mysql
我需要选择入住日期和退房日期在指定日期范围之间的房价。这些费率根据其条件单独命名。房费取决于所选日期。这是我的代码: rate_eb rate_name rate_starts rat
Swift - Calendar date 1 inSameDayAs date 2 for dates timestamps 返回只有一个日期的数组和重复多少次
我有 [Int64:[String:String]] 其中 Int64 是时间戳。如何检测和删除 [String:String] 中的参数之一是 ["name"] = "test" 并重复多次的同一天

首页

博学

6Ren·AI

商城

javascript - 不使用 Date.getTime() 的秒表 javascript