javascript - 设置秒和毫秒的计时器
问题描述
var count = 24000,
running = true,
secondsNode = document.getElementById("seconds"),
millisecondsNode = document.getElementById("milliseconds"),
mOld,
mNew;
function draw() {
if (count > 0 && running) {
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count - mNew + mOld;
count = count >= 0 ? count : 0;
mOld = mNew;
secondsNode.innerHTML = Math.floor(count / 1000);
millisecondsNode.innerHTML = count % 1000;
}
}
mOld = new Date().getTime();
draw();
window.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32: // PLAY
if (running) {
running = false;
} else {
running = true;
mOld = new Date().getTime();
draw();
}
break;
case 82: // RESET
count = 24000;
secondsNode.innerHTML = 24;
millisecondsNode.innerHTML = 0;
running = false;
}
});
<p><span id="seconds">4</span> secs and <span id="milliseconds">000</span> milliseconds</p>
这是定时器的代码。这里发生的是从 24 秒开始到 0 结束的计时器。但我需要的是我需要从 0 到 4 秒开始这个计时器。我们可以这样做吗?如果是这样,请帮忙。谢谢:)
解决方案
为了实现这一点,您需要使用以下方法将时间减量器更改为增量器:
count = count + mNew - mOld;
此外,您需要确保您的条件和检查在您到达时停止,4000
而不是0
.
请参阅下面的工作示例:
var count = 0,
running = false,
secondsNode = document.getElementById("seconds"),
millisecondsNode = document.getElementById("milliseconds"),
mOld,
mNew;
function isElementInViewport(el) { // run function to check if the element is in the viewport
var rect = el.getBoundingClientRect();
return rect.bottom > 0 && rect.right > 0 && rect.left < (window.innerWidth || document.documentElement.clientWidth) && rect.top < (window.innerHeight || document.documentElement.clientHeight);
}
window.addEventListener('scroll', function() { // everytime we scroll
if(isElementInViewport(secondsNode)) { // check if the p element is on the screen - if it is then:
running = true; // start the timer (unpause it)
mOld = new Date().getTime();
draw();
} else { // if the element is off the screen then
running = false; // pause the timer
}
});
function draw() {
if (count < 4000 && running) { // change to check count < 4000 to keep running
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count + mNew - mOld; // change to increment the count
count = count >= 4000 ? 4000 : count; // change stop the clock from incrementing
mOld = mNew;
secondsNode.innerHTML = Math.floor(count / 1000);
millisecondsNode.innerHTML = count % 1000;
}
}
window.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32: // PLAY (space)
if (running) {
running = false;
} else {
running = true;
mOld = new Date().getTime();
draw();
}
break;
case 82: // RESET (r)
count = 0;
secondsNode.innerHTML = 0;
millisecondsNode.innerHTML = 0;
running = true;
}
});
.other {
padding-bottom: 100vh;
}
<div class="other"></div>
<p><span id="seconds">4</span> secs and <span id="milliseconds">000</span> milliseconds</p>
<div class="other"></div>
推荐阅读
- reactjs - 无法从节点模块自动导入反应组件
- react-native - 如何计算缩放图像的偏移量?
- google-cloud-platform - Datalab 会自动配置现有的计算引擎吗?
- java - 是否可以无延迟地按需读取 Kinesis 流
- xamarin.forms - 如何动态更改 NavigationPage 栏背景颜色
- jsp - jasperreport 和 JSP 使用 mysql 查询问题
- react-native - React Native:违反使用 Android 广告 ID 政策和开发者分发协议第 4.8 节
- java - 使用spring boot连接mysql数据库时出错
- python - 子应用程序中“自我”的 ForeignKey 在 Django 项目中的 makemigrations 中引发错误
- regex - Google Apps 脚本 - ReplaceText 垂直标签