如何在JS中使用date.now()创建秒表
How can I create a stopwatch using date.now() in JS?
我想知道如何使用date.now创建一个简单的计数计时器。我想用date.now()来查找开始时间,用date.nnow()来获取当前时间,并用javascript减去两者来获取经过的时间?
这是我刚刚构建的一个,按底部的"运行代码片段"进行测试。如果需要进一步解释,请发表评论。
var prevTime, stopwatchInterval, elapsedTime = 0;
var updateTime = function () {
var tempTime = elapsedTime;
var milliseconds = tempTime % 1000;
tempTime = Math.floor(tempTime / 1000);
var seconds = tempTime % 60;
tempTime = Math.floor(tempTime / 60);
var minutes = tempTime % 60;
tempTime = Math.floor(tempTime / 60);
var hours = tempTime % 60;
var time = hours + " : " + minutes + " : " + seconds + "." + milliseconds;
$("#time").text(time);
};
$("#startButton").click(function () {
if (!stopwatchInterval) {
stopwatchInterval = setInterval(function () {
if (!prevTime) {
prevTime = Date.now();
}
elapsedTime += Date.now() - prevTime;
prevTime = Date.now();
updateTime();
}, 50);
}
});
$("#pauseButton").click(function () {
if (stopwatchInterval) {
clearInterval(stopwatchInterval);
stopwatchInterval = null;
}
prevTime = null;
});
$("#resetButton").click(function () {
$("#pauseButton").click();
elapsedTime = 0;
updateTime();
});
$(document).ready(function () {
updateTime();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Time: <span id="time"></span><br>
<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
<button id="resetButton">Reset</button>
我没有看到Winestone的答案,所以我在jsFiddle中做了一个例子。
总之:
var start=Date.now(),
stop=Date.now(),
diff=stop-start;
您可能需要的所有剩余操作都是以毫秒为单位适当地格式化时间,并在开始和停止之间获得所需的延迟。
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 为effect Composer创建GodRays效果过程
- 从javascript创建一个列表
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何访问声音管理器2创建的声音对象
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 使用Facebook live API创建实时视频对象时的隐私设置
- 在动态创建的元素上获取对特定选择器的引用
- 如何创建带有插槽的vue js组件预加载程序
- 如何在创建键时引用来自同一对象的键
- 如何创建JSON数组
- 从html创建一个指令,该指令按类名应用函数
- 使用Javascript创建测验页面
- 更改使用Chart.js创建的图表中的轴线颜色
- JavaScript名称空间和对象创建
- JQuery对动态创建的对象进行选择
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 如何在JS中使用date.now()创建秒表