我正在尝试制作一个从1小时开始的JavaScript倒计时时钟。在这个过程中,我只使用了一点jQuery。
$(document).ready(function(){
var h,m,s,output;
$("#StartW").click(function(){
function startWork()
{
h = 1;
m = 0;
s = 0;
output = h + ":" + m + ":" + s;
setInterval(function() {count()}, 1000);
}
function count()
{
if(s == 0)
{
if(m == 0)
{
if(h == 0);
{
output = "time's up";
}
h = 0;
m = 59;
s = 59;
}
m = m - 1;
s = 59;
}
s = s - 1;
output = h + ":" + m + ":" + s;
document.getElementById("WTM").innerHTML = output;
}
});
});
1-StartW是调用函数的按钮的id。2-WMT是显示时钟的跨度的id。
当我点击按钮时,我没有得到任何结果。什么也没发生。导航器中的JavaScript控制台根本没有显示任何错误。
实际上,在按下该按钮时,您不会调用任何函数,只是启动它们。从点击事件中获取函数count
和startWork
,并执行类似的操作
$('#StartW').on( 'click', startWork );
在此处检查
在点击事件函数中,您声明了两个函数,但从不调用它们,因此不会发生任何事情。试试这个:
$(document).ready(function(){
var h,m,s,output;
$("#StartW").click(function(){
function startWork()
{
h = 1;
m = 0;
s = 0;
output = h + ":" + m + ":" + s;
setInterval(function() {count()}, 1000);
}
function count()
{
if(s == 0)
{
if(m == 0)
{
if(h == 0)
{
output = "time's up";
}
h = 0;
m = 59;
s = 59;
}
m = m - 1;
s = 59;
}
s = s - 1;
output = h + ":" + m + ":" + s;
document.getElementById("WTM").innerHTML = output;
}
startWork();
});
});
固定压痕使其超级清晰,而且if(h == 0);
线上有一个;
,应该删除
作为你计算一小时的方法的一个注意事项,你需要明白它可能不是很准确。你要求代码等待1000毫秒来自己增加1秒,就像我们计算秒数说"misssipi"来帮助我们等待下一秒一样。虽然JavaScript在1秒内计数1000毫秒更精确,就像我们说的misssipi在1秒内一样,但由于X和Y的原因,它可能会关闭。要知道时间过去了多久,唯一真正准确的方法就是看时钟,一遍又一遍地看,直到它显示我们等了一个小时。因此,在JS中,保存启动时的时间,每隔一秒左右显示当前时间与启动时间之差的剩余时间,并显示计时器。