使用setTimeout实现倒计时

  用JS写个倒计时,估计很多小伙伴一下就想到了setInterval(fn,millisec)这个函数了,但是如果不用此函数呢?大家还能想到其他的办法吗?嘿嘿就是setTimeout函数了,

这两函数是js里面实现动画很重要的两个函数!

  首先上菜看code:

  

1 var countDown = function(times){
2    if(!times||isNaN(parseInt(times)))return;
3    var args = arguments;
4    var self = this;
5     console.log(times);
6     setTimeout(function(){args.callee.call(self,--times)},1000);
7
8 }

  调用countDown(10);在chrome控制台下就会从10开始倒计时了!虽然看起来很容易,代码也不多,但是里面涉及到对js单线程的理解,如果不理解js单线程的话可能以后会遇到很多坑的,

希望伙伴们多多学习巩固基础知识这样才能练就深厚内功,杀人于无形!

时间: 2024-11-29 07:49:47

使用setTimeout实现倒计时的相关文章

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

使用setTimeout()实现倒计时效果代码实例:大多数情况下实现倒计时效果是使用setInterval()函数,因为此函数可以每隔指定的实现就执行一次指定函数,而setTimeout()函数只能够执行一次,不过也是可以实现倒计时效果的,下面就通过代码实例介绍一下如何利用setTimeout()函数实现倒计时效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">

javascript 学习随笔2

<html> <head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt } </script> </head> <body> <img src="/i/eg_planets.jpg" border="

一些面试题整理

抄别人的 觉得可以 就mark了 一.说说从输入URL到看到页面发生的全过程,越详细越好. 1.首先浏览器主进程接管,开了一个下载线程. 2.然后进行HTTP请求(DNS查询.IP寻址等等),中间会有三次捂手,等待响应,开始下载响应报文. 3.将下载完的内容转交给Renderer进程管理. 4.Renderer进程开始解析css rule tree和dom tree,这两个过程是并行的,所以一般我会把link标签放在页面顶部. 5.解析绘制过程中,当浏览器遇到link标签或者script.img

setInterval和setTimeout区别(验证码倒计时)

写了一个验证码60s倒计时的小demo来帮助记忆和区别setInterval和setTimeout. html <input type="button" id="btn1" value="setInterval获取验证码btn1" onclick="getTime1()" /> <input type="button" id="btn2" value="set

时间进行3段区分 执行倒计时 end1 end2 开始执行回调

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="jquery.js"></script> <script> // 倒计时插件 (function() {

Javascript Date对象 --- 时间戳及淘宝倒计时抢购功能实现

时间戳(timestamp)是指格林威治时间 1970年 01月 01日 00时 00分 00秒 (北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数. Date.parse( datestring )  parse( ) 方法可以解析一个日期的时间字符串,并返回 1970/01/01 午夜距离该日期时间的毫秒数 //获取2005年7月8日到格林威治时间相差的毫秒数 var timeDifference = Date.parse('2005/7/8'); console.log

自己封装的一个简单的倒计时功能

因为平常工作中很常用到该功能,所以就利用这次国庆假期,重新梳理与对原有代码进行改善,再集成一个常用的功能,最终封装出这个“简单倒计时”功能. 该倒计时方法具有以下该功能: 1. 根据指定日期与当前的电脑时间进行匹配 2. 通过指定一个数组参数,来设置在每一天内不同的时间段进行倒计时. * 该方法还未通过实际工作的检测,稳定性未知(如果实际工作通过,会删除这段话) 1 function countDown(date,target,filter){ 2 3 var setTime = new Dat

javascript特效实现(4)——当前时间和倒计时效果

这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> 主要体会javascript的实现 window.onload=func

1.1 结合date()和setTimeOut()实现简单的时钟效果

一.简单的时钟效果 首先要熟悉日期函数date()以及其常用的方法 getFullYear()  返回完整的年份 比如:2016 getMonth()  返回月份(从0开始,需+1) getDate()  返回日期 getHours()  返回小时数 getMinutes()  返回分钟数 getSeconds()  返回秒数 getDay() 返回星期几 (0-6,0是星期天,1是星期一) 写一个简单的html页面,用来展示时钟效果 <!DOCTYPE html> <html>