使用setTimeout()实现倒计时效果代码实例

使用setTimeout()实现倒计时效果代码实例:
大多数情况下实现倒计时效果是使用setInterval()函数,因为此函数可以每隔指定的实现就执行一次指定函数,而setTimeout()函数只能够执行一次,不过也是可以实现倒计时效果的,下面就通过代码实例介绍一下如何利用setTimeout()函数实现倒计时效果。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
function timer()
{
  var value=Number(document.all[‘timer‘].value);
  if(value>1)
  {
    document.all[‘timer‘].value=value-1;
  }
  else
  {
    document.all[‘timer‘].value="同意";
    return false;
  }
  window.setTimeout("timer()",1000);
}
window.onload=function(){timer()}
</script>
</head>
<body>
<input name="timer" value="10" type="button"/>
</body>
</html>

以上代码实现了我们的要求,可以使用setTimeout()函数实现倒计时效果,尽管setTimeout()只能够执行一次,但是可以使用递归的方式,不断的调用自身,就可以实现倒计时效果,具体实现过程这里就多介绍了,可以参阅相关阅读。
相关阅读:
1.Number()函数可以参阅javascript的Number()方法一章节。 
2.setTimeout()函数可以参阅window对象的setTimeout()方法一章节。 
3.document.all可以参阅javascript的document.all的用法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11519

更多内容可以参阅:http://www.softwhy.com/javascript/

时间: 01-28

使用setTimeout()实现倒计时效果代码实例的相关文章

jQuery实现的手机发送验证码倒计时效果代码分享

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果:首先检测手机是否符合1开头,11位数字的格式:若不符合,则提示错误信息并返回false:否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: 年利率高达14.4% 上海投融理财,20万起投,年化收益14.4% 房产抵押,

使用box-shadow属性实现圆角效果代码实例

使用box-shadow属性实现圆角效果代码实例:通常实现圆角效果我们使用border-radius,其实我们也可以使用box-shadow属性来实现.两个属性的具体用法这里就不多介绍了,具体可以参阅以下两个文章:(1).圆角效果可以参阅CSS3实现圆角效果一章节.(2).box-shadow可以参阅CSS3的box-shadow属性用法详解一章节.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" u

CSS3实现的字符串逐字高亮效果代码实例

CSS3实现的字符串逐字高亮效果代码实例:本章节分享一段代码实例,它实现了字符串逐字高亮效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title>

input文本框圆角效果代码实例

input文本框圆角效果代码实例:本章节分享一段代码实例,它实现了将input文本框设置为圆角的功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</tit

js实现的数字四舍五入效果代码实例

js实现的数字四舍五入效果代码实例:下面直接给出能够截取指定位数字符串,且具有四舍五入效果的代码: var num=3.1415926; console.log(num.toFixed(3)); toFixed()函数可以参阅javascript的Number对象的toFixed()方法一章节. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11973 更多内容可以参阅:http://www.softwhy.com/javas

CSS3实现的菱形效果代码实例

CSS3实现的菱形效果代码实例:本章节分享一段代码实例,它使用CSS3实现了菱形效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

css3实现的动态月食效果代码实例

css3实现的动态月食效果代码实例:本章节分享一段代码实例,它利用CSS3实现了动态的月食效果.动画其实比较简单简短,需要的朋友可以自行做一下分析,这里就不多介绍了.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

css3代码实现的鼠标悬浮按钮效果代码实例

css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前,鼠标悬浮于按钮之上,无非是设置按钮的大小.字体颜色或者背景图片等简单的项目,但是css3的出现,可以让设置变得丰富多彩,下面就是一个css3实现的此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://