用JS面向对象写的倒计时器

最新推荐文章于 2024-05-22 01:53:01 发布

原创最新推荐文章于 2024-05-22 01:53:01 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #timer #html #null

该博客展示了用JavaScript实现倒计时计数器的代码。定义了Counter函数，包含设置最大时间、间隔等属性，还有start、run、show等方法。在HTML页面中创建Counter实例并调用相关方法，实现从10秒开始的倒计时功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>counter</title>
<script language="javascript" type="text/JavaScript">
function Counter(nMax,nInterval)
{
this.maxTime=nMax;
this.interval=nInterval;
this.objId="timer";
this.obj=null;
this.num=this.maxTime;
this.start=function()
{
this.obj=document.getElementById(this.objId);
if(this.num>0) setTimeout("this.run()",this.interval*1000);
};
this.run=function()
{ i
f(this.num>0)
{
this.num--;
this.obj.innerHTML=this.num;
timer=setTimeout("this.run()",this.interval*1000);
}
else clearTimeout(timer);
};
this.show=function()
{
document.write("<span id="+this.objId+">"+this.num+"</span>");
this.obj=document.getElementById(this.objId); //alert(this.obj.innerHTML);
}
}
</script>
</head>

<body onload="myCounter.start();">
<script language="JavaScript" type="text/JavaScript">
var myCounter=new Counter(10,1);
</script>
<p>现在剩下
<script language="JavaScript" type="text/JavaScript"> myCounter.show(); </script>
秒钟!</p>
</body>
</html>