javascript - 通过javascript将按钮元素更新为倒数计时器
问题描述
我想创建一个倒数计时器,它看起来像网页的 fps 计数器......经过数小时的时间,我无法找出问题所在......帮助
<script>
var myvar = setInterval(function () { startTimer() }, 1000);
function startTimer() {
var presentTime = 17 + ":" + 00;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if (s == 59) {
m = m - 1
}
//if(m<0){alert('timer completed')}
var button2 = document.createElement("Button2");
var interval = m + s;
button2.innerHTML = Math.round(interval);
button2.style = "top:0; left:0rem; height:10% ;color: black; background-color: #ffffff;position:fixed;padding:20px;font-size:large;font-weight: bold;";
setTimeout(startTimer, 1000);
document.body.appendChild(button2);
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {
sec = "0" + sec
}; // add zero in front of numbers < 10
if (sec < 0) {
sec = "59"
};
return sec;
}
</script>
解决方案
我可以找到三个阻碍您的代码正确执行的错误。
多个定时器
首先,因为您setInterval
在外部范围内调用 a ,然后setTimeout
在每次执行迭代后调用 a ,您最终会得到许多不需要的计时器实例,这些实例将为您做一些疯狂的计数。
我建议您废弃其中任何一种,只使用其中一种。对于我的示例,我碰巧坚持使用,setInterval
因为您一遍又一遍地执行相同的方法。
初始化
由于在-functionpresentTime
内部声明了startTimer
,它将不断被覆盖17 + ":" + 00
(导致"17:0"
顺便说一句)。这可以通过在外部范围内声明它来解决。
记住变化
最后你需要保存presentTime
修改后的当前状态。只需presentTime = [m,s].join(":");
在末尾添加 astartTimer()
即可解决此问题。
var presentTime = "17:00";
function startTimer() {
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if (s == 59) {
m = m - 1
}
var button2 = document.createElement("Button2");
var interval = s;
button2.innerHTML = m + ":" + s;
button2.style = "top:0; left:0rem; height:10% ;color: black; background-color: #ffffff;position:fixed;padding:20px;font-size:large;font-weight: bold;";
document.body.appendChild(button2);
presentTime = [m,s].join(":");
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {
sec = "0" + sec
}; // add zero in front of numbers < 10
if (sec < 0) {
sec = "59"
};
return sec;
}
var interval = setInterval(startTimer, 1000);
推荐阅读
- vba - Visual Basic 代码提前结束
- node.js - 子进程是立即执行,还是在事件循环的未来迭代中执行?
- ios - iOS 11 上的 WKWebView 是否支持 .heic 图像?
- android - Android Socket 每 20 秒卡住一次
- android - 如何从 kotlin 获取用 xml 编写的“PathInterpolator”
- r - 使用 dplyr/tidyverse 进行类似扫描的操作
- c++ - 如何使用 C++ 检查 Lua 中是否存在预加载的模块
- amazon-web-services - 在 AWS CFT 中,如何引用现有 VPC 的 CIDR
- ruby-on-rails - gem pg, 'libpq-fe.h header' 和 Heroku 推送错误
- jdbc - 在 Kafka Connect 中找不到适合 jdbc:mysql 的驱动程序