以毫秒为增量的 Javascript 秒表-6ren

以毫秒为增量的 Javascript 秒表

转载作者：行者123 更新时间：2023-11-30 14:19:24

25

4

我正在尝试使用 JavaScript 制作一个秒表。我有日期来填充正确的信息，但我的秒表不工作。我单击开始，数字永远不会从 0 移动，我想让它在 MS 中立即递增。我也有 JS 和 HTML 的代码。 HTML 正常运行，但 JS 却没有。我对 JavaScript 世界非常陌生，我看了又看，但无法找到对我有益的解决方案。感谢你的协助。

"use strict";
var $ = function(id) { return document.getElementById(id); };

var stopwatchTimer;

var elapsedMinutes = 0;

var elapsedSeconds = 0;

var elapsedMilliseconds = 0;

var displayCurrentTime = function() {

  var now = new Date();

var hours = now.getHours();

var ampm = "AM";
if (hours > 12) { 

hours = hours - 12;

ampm = "PM";


} else { 

 switch (hours) {

case 12:

 ampm = "PM";

break;

case 0:  

 hours = 12;

ampm = "AM";

 }

 }


$("hours").firstChild.nodeValue = hours;

$("minutes").firstChild.nodeValue = padSingleDigit(now.getMinutes());

$("seconds").firstChild.nodeValue = padSingleDigit(now.getSeconds());

$("ampm").firstChild.nodeValue = ampm;

};

var padSingleDigit = function(num) {

if (num < 10) { return "0" + num; }

else { return num; }

};

var tickStopwatch = function() {    
// I also need to increment in 10 milliseconds increments but unsure if I //have this right


var ms=0;
var sec=0;
var min=0;

var frame= function() {
If(ms==1000)
        ms=0;
        sec++;
}
if(sec==60) {
        sec=0;
        min++;

document.getElementById("s_seconds").innerHTML = valueOf(sec);
document.getElementById("s_minutes").innerHTML = valueOf(min);
document.getElementById("s_ms").innerHTML = valueOf(ms);
}

};

var startStopwatch = function(evt) {

};

var stopStopwatch = function(evt) {

};

var resetStopwatch = function(evt) {

};
window.onload = function() {    

displayCurrentTime();    
setInterval(tickStopwatch, 1000);
};
"use strict"; //evt is in a separate file
var evt = {
    attach: function(node, eventName, func) {

    },
    detach: function(node, eventName, func) {

    },
    preventDefault: function(e) {

    }
};


    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Clock</title> 
    <link rel="stylesheet" href="clock.css"> 

    <script src="library_event.js"></script> 

    <script src="clock.js"></script> 

    </head> 
    <body> 
    <main> 
    <h1>Digital clock with stopwatch</h1> 
    <fieldset> 
    <legend>Clock</legend> 
    <span id="hours">&nbsp;</span>: 
    <span id="minutes">&nbsp;</span>: 
    <span id="seconds">&nbsp;</span>&nbsp; 
    <span id="ampm">&nbsp;</span> 
    </fieldset> 

    <fieldset> 
    <legend>Stop Watch</legend> 
    <a href="#" id="start">Start</a>&nbsp; 

    <a href="#" id="stop">Stop</a>&nbsp; 

    <a href="#" id="reset">Reset</a>&nbsp; 

    <span id="s_minutes">00</span>: 
    <span id="s_seconds">00</span>: 
    <span id="s_ms">000</span> 
    </fieldset> 
    </main> 
    </body> 
    </html>

最佳答案

如果您增量更新值 ms、seconds、minutes，您将永远不会准确。每次更新都会浪费时间。在 JS 中根本没有可以以那种速度和精度运行的区间。

相反，从内部时钟计算它们

let offset = 0,
  paused = true;

render();
  
function startStopwatch(evt) {
  if (paused) {
    paused = false;
    offset -= Date.now();
    render();
  }
}

function stopStopwatch(evt) {
  if (!paused) {
    paused = true;
    offset += Date.now();
  }
}

function resetStopwatch(evt) {
  if (paused) {
    offset = 0;
    render();
  } else {
    offset = -Date.now();
  }
}

function format(value, scale, modulo, padding) {
  value = Math.floor(value / scale) % modulo;
  return value.toString().padStart(padding, 0);
}

function render() {
  var value = paused ? offset : Date.now() + offset;

  document.querySelector('#s_ms').textContent = format(value, 1, 1000, 3);
  document.querySelector('#s_seconds').textContent = format(value, 1000, 60, 2);
  document.querySelector('#s_minutes').textContent = format(value, 60000, 60, 2);
  
  if(!paused) {
    requestAnimationFrame(render);
  }
}

<fieldset>
  <legend>Stop Watch</legend>
  <a href="#" id="start" onclick="startStopwatch()">Start</a>&nbsp;

  <a href="#" id="stop" onclick="stopStopwatch()">Stop</a>&nbsp;

  <a href="#" id="reset" onclick="resetStopwatch()">Reset</a>&nbsp;

  <span id="s_minutes">00</span>:
  <span id="s_seconds">00</span>:
  <span id="s_ms">000</span>
</fieldset>

offset 存储两个值:当 paused 时，它存储您停止时的值，否则它存储您必须添加到 Date.now( ) 计算值。

该值是以毫秒为单位的时间，计算秒和分钟是基本算术。

关于以毫秒为增量的 Javascript 秒表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53000446/

25

4

0

文章推荐： c# - 加入时 Linq 返回太多结果

文章推荐： C#串口驱动包装类代码及概念质量

文章推荐： ios - 固定距离接头无法正常工作

Java 增量 i = i++;
这个问题已经有答案了: What is x after "x = x++"? (18 个回答) 已关闭 6 年前。 public static void main(String[] args)
jQuery循环插件交错/增量
我目前正在使用 jquery 循环插件。我有 3 个不同的幻灯片，它们彼此相邻并同时循环播放。我想做的是先关闭第一张幻灯片，然后是第二张幻灯片，然后是第三张幻灯片。无论如何，我可以通过增量或超时来做到
JavaScript 增量
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: ++someVariable Vs. someVariable++ in Javascript 我知道您可以
svn --增量 : How to use it and what it does?
我一直在查看 SVN 手册，但无法找到“svn log”和“svn st”的“--incremental”选项的简单用法示例或解释。我正在编写一个开源 SVN GUI 前端，因此我需要一些有关此标志
r - 从矩阵的对角线计算平均值 + 增量
我有这种矩阵。非常抱歉，我没有可重现的示例。表 1: [,1][,2][,3][,4][,5][,6][,7][,8][,9][,10] [1,] 3 NA NA NA
dataframe - 使用数据框在Spark中处理数据差异(增量)
我在hdfs中有一个 Parquet 文件作为我的数据的初始加载。接下来的所有拼花地板只是这些数据集每天都会更改为初始负载(按时间顺序)。这是我的三角洲。我想读取全部或部分 Parquet 文件，以
Javascript Ceil 增量
我目前有这样的功能，可以将任何输入数字四舍五入到最接近的模糊整数值: $(function(){ $('#my_value').blur(function() { $(this).va
c - 如何设计循环数列(增量)？
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
java - SQL检查3列+增量
我对 SQL 还很陌生，我想知道我是否可以使用它来自动解决我数据库中的一个复杂问题。也就是说，我每天都在跟踪条目。因此，我们关注的列是: YYYY MM DD XXX YYYY 是年，MM 是月，D
mysql - 数据透视表以外的其他方式 - 增量
我正在开发一个非常简单的数据库，但我不知道数据透视表是否是一个很好的解决方案。如果我使用数据透视表，我需要添加无用的表只是为了增量。让我们从头开始。在用户注册期间，会创建一个新表 GROUP。在G
mysql - 选择查询中的临时变量赋值/增量
在 MySQL 中你可以做这样的事情 SELECT @n := @n + 1 n, first_name, last_name FROM table1, (SELECT
C++增量++运算符重载
如果我正在使用一个类，我知道如何重载运算符 += class temp { public: int i; temp(){ i = 10; } int operator+=(in
Linux Grep 增量
我有两个文件:file1、file2。我想从 file2 中获取 file1 中不存在的行。我读过 post这告诉我使用 grep 的 -v 标志来执行此操作(我阅读了 grep 的手册页，但仍然不
python - 如何使用python日期时间函数/增量？
我看了很多类似的题，功能很简单，用于API的嵌套for循环，每分钟可以调用5次。所以我将一年数据的范围设置为 75。你们能帮我解决这个问题吗？提前致谢! 第一部分正在运行，输入列表中的邮政编码。 fo
python - 计算数据框的每日返回/增量
所以我想计算每日返回/增量的一些时间序列数据，其中每日增量 = value_at_time(T)/value_at_time(T-1) import pandas as pd df=pd.DataFr
c++ - 增量、前增量和后增量
请帮我解决这个问题。该表达式之后的步骤是: //Expression offSpring1[m1++] = temp1; //Steps: 1.- increment m1 2.- assign te
java - 增量/选择性同步远程系统
我正在开发一个解决方案，在该解决方案中，我通过 webapp 不同类型的实体(例如中央数据库上的用户、组、部门信息)和 ldap 进行身份验证。但是最终用户将与来自远程位置(他的办公室、节点)的数据交
python - 获取两个字典列表之间的差异(增量)
我有以下 Python 数据结构: data1 = [{'name': u'String 1'}, {'name': u'String 2'}] data2 = [{'name': u'String
java - AtomicInteger 增量
如果 AtomicInteger 会发生什么？达到 Integer.MAX_VALUE 并递增？值会回到零吗？最佳答案由于integer overflow，它会环绕, 到 Integer.MIN
c - 0.00001 增量
我是 C 的初学者，我正在尝试在 While 循环中进行 0.00001 增量。例如，double t = 0.00001 并且我希望循环每次以 0.00001 的增量运行，第二次是 0.00002

首页

博学

6Ren·AI

商城

以毫秒为增量的 Javascript 秒表