- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我用 Javascript 创建了一个倒数计时器;它是成功的,期望未完成。事实上,从数学上讲,它是正确的,但是谷歌浏览器的浏览器设置“暂停”(因为没有更好的术语)SetInterval/Timeout,这意味着如果我的倒计时程序的用户在浏览器的选项卡之间切换,那么执行该功能不会恰好在设定的时间限制内发生。
我需要 W3School 帮助我实现这个基本时间逻辑: http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
此尝试解释浏览器 SetInterval/Timeout 干扰:http://jsfiddle.net/7f6DX/31/
var div = $('div');
var a = 0;
var delay = (1000 / 30);
var now, before = new Date();
setInterval(function() {
now = new Date();
var elapsedTime = (now.getTime() - before.getTime());
if(elapsedTime > delay)
//Recover the motion lost while inactive.
a += Math.floor(elapsedTime/delay);
else
a++;
div.css("right", a);
before = new Date();
}, delay);
感谢您提供的任何帮助。
最佳答案
您应该使用真实世界时间来更新您的计时器,而不是依赖于 setInterval
的准确性。
您提供的 w3schools 示例正是这样做的;每 500 毫秒,它会抓取当前时间,对其进行格式化,并更新显示。当选项卡处于非事件状态时,此更新的发生频率可能低于 500 毫秒(Chrome 可以减慢到每 1-2 秒一次),但是,当更新确实发生时,您将显示正确的信息。
// countdown for 1 minute
countdown(60);
function countdown(seconds) {
// current timestamp.
var now = new Date().getTime();
// target timestamp; we will compute the remaining time
// relative to this date.
var target = new Date(now + seconds * 1000);
// update frequency; note, this is flexible, and when the tab is
// inactive, there are no guarantees that the countdown will update
// at this frequency.
var update = 500;
var int = setInterval(function () {
// current timestamp
var now = new Date();
// remaining time, in seconds
var remaining = (target - now) / 1000;
// if done, alert
if (remaining < 0) {
clearInterval(int);
return;
}
// format
var minutes = ~~(remaining / 60);
var seconds = ~~(remaining % 60);
// display
document.getElementById("countdown").innerHTML
= format(minutes) + ":" + format(seconds);
}, update);
}
function format(num) {
return num < 10 ? "0" + num : num;
}
<div id="countdown"></div>
运行此代码段并切换到不同的选项卡。您的倒计时最多将关闭 500 毫秒(更新频率)。
就其值(value)而言,类似的想法可以应用于动画。
在设计动画时,您应该有一个位置 x 随时间 t 变化的公式。您的渲染时钟(无论是setInterval
、setTimeout
还是requestAnimationFrame
)不一定可靠,但是您的< em>物理时钟(真实世界时间)是。您应该将两者分离。
每次您需要渲染一帧时,引用时间t 的物理时钟,计算位置x,然后渲染该位置。 This是一篇非常棒的博文,其中详细介绍了动画和物理学,我从中借鉴了上述想法。
关于javascript - 创建一个倒数计时器(占 SetInterval/Timeout Google Chrome 选项卡 "error"),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33311935/
如果我有一个变量 8589934592 示例: var a = (8589934592 | 0); //a is 0 var b = (8589934591223 | 0); //b
随着我们提高音阶,音符频率增加; #define A4 440 // These are the frequencies of the notes in herts #define A
我有一个这样组织的列表: [('down', 0.0098000000000000309), ('up', 0.0015000000000000568), ('down', 0.00890000000
如果我有一个多项式 P,有没有办法计算 P^-1 模 Q,即 Q 是另一个多项式?我知道这两个多项式的系数都属于以 z 为模的整数域,即 z 是一个整数。 我不确定 SymPy 是否已经在其 galo
对于给定的文件,我可以向后计算行数吗?即从 EOF 开始,计算行数直到开始? 我可以 fseek 到文件末尾。从那里开始,继续寻找新行字符(新行的指示)并继续增加我的 line_number 计数。但
有什么方法可以编写带除法的 C 代码来命令编译器在代码中需要常规除法精度的几个特定位置不使用快速除法(通过倒数数学),即使在全局允许倒数数学的情况下也是如此? 理想情况下,有一种方法不是特定于编译器的
我正在尝试将照片从我计算机上的本地文件导入到我的 HTML 文件中。我已经设法做到了,但它是按升序排列的。我尝试添加一个变量 JavaScript $(document).ready( functio
我正在尝试使用 commons-math 计算 2 尾学生分布的逆。我正在使用 Excel 来比较值并验证结果是否正确。 所以使用excel计算TINV,自由度为5,我使用95.45% =TINV(0
我有一个 jQuery 相机插件,它使用以下命令来拍摄快照。 这是它运行的代码。 function take_snapshot() { // take snapshot and get i
我刚刚学会了训练 brain.js network 并且只是在玩它。然后我很好奇是否可以采取相反的方式 - 从输出预测输入? 这是我的代码 const brain = require('brain.j
如果精度不重要,有什么方法可以提高速度的倒数(X 的除法 1)? 所以,我需要计算 1/X。是否有一些解决方法让我失去精度但做得更快? 最佳答案 𝗛𝗲𝗿𝗲𝗛𝗲𝗿𝗲𝗛𝗼𝘄𝗧𝗼?
令 N 为整数。如果N = 2536,则反转N为6352。如果N = 1000000,则反转N为1。 给定一个整数 M,其中 1 <= M <= 10^(100000)。 我们需要找到一个整数 N 是
我是一名优秀的程序员,十分优秀!