jquery实现倒计时效果

Posted 2023-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现倒计时效果相关的知识，希望对你有一定的参考价值。

我想实现这样的效果：在页面里一个div，这个div里会有一个秒表显示，就是这样。0:01，第二秒显示为0:02,这样一直显示，到5:00(5分钟的时候这个时间计数器就停止了。不再继续下一秒了)。请问这个效果怎么做啊。求大侠指点。。。我这只有5分了不然全部给了。谢谢了

参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = Watch;//加载时调用Watch()函数
function Watch()
var span = document.createElement("sapn");
span.innerHTML = "0:01";
var s = 1;//用来记录秒,因为需求是从1开始的。
var m = 0;//用来记录分钟
var w = setInterval(function ()
s++;
if (s == 60) //当秒跑到60时，分钟加1，秒钟从0开始。
m++;
s = 0;

span.innerHTML = m + ":" + (s < 10 ? "0" + s : s); //显示时间(秒小于10时，前补0)
if (m == 5) clearInterval(w); //到过5分钟时停止
, 1000); //每1000毫秒即1秒执行一次此函数
document.getElementById("Show").appendChild(span);//显示到页面上

</script>
</head>
<body>
<div id="Show" style="text-align:center"></div>
</body>
</html>本回答被提问者采纳参考技术B 模拟了一个类似时钟的效果，不知道是不是你想要的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script>
window.onload=function()
var div = document.createElement('div');
var i = 0;
var m = 0;
var s = 0;
var t = setInterval(function()
i++;
div.innerHTML = m+":"+s+i;
if(i>=10)
s++;i=0;
div.innerHTML = m+":"+s+i;

if(s>=6)
m++;s=0;
div.innerHTML = m+":"+s+i;

if(m==5)clearInterval(t);
document.body.appendChild(div);
,1);

</script>
</head>
<body>

</body>
</html>追问

效果是这个效果，可是能不能麻烦给个注释啊。有些地方不明白啊。特别是 if(s>=6)
m++;s=0;
div.innerHTML = m+":"+s+i;

这句。其实s>6是什么意思？不明白

追答

1分钟=60秒，s表示十位，i表示个位，
m表示分钟，
s>6表示大于一分钟了，所以m++，然后把s赋为0，

明白不？

参考技术C 哦