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


Posted in Javascript onNovember 23, 2016

因为平常工作中很常用到该功能,所以就利用这次国庆假期,重新梳理与对原有代码进行改善,再集成一个常用的功能,最终封装出这个“简单倒计时”功能。

该倒计时方法具有以下该功能:

1. 根据指定日期与当前的电脑时间进行匹配

2. 通过指定一个数组参数,来设置在每一天内不同的时间段进行倒计时。

* 该方法还未通过实际工作的检测,稳定性未知(如果实际工作通过,会删除这段话)

function countDown(date,target,filter){

  var setTime = new Date(date).getTime(),
    timer = null;

  function core(){
    var nowTime = new Date().getTime(),
      leftTime = 0,
      d = 0,h = 0,m = 0,s = 0;

    ////////////////////////////
    //conditation @ doublue time
    if(filter.length){
      setTime = new Date();
      for(var i=0,l=filter.length;i<l;i++){
        setTime.setHours(filter[i]);
        setTime.setMinutes(0);
        setTime.setSeconds(0);
        if(nowTime < setTime.getTime()){
          break;
        }else if(i == filter.length-1){
          setTime.setDate(setTime.getDate()+1);
          setTime.setHours(filter[0]);
        }
        
      }
    }
    ////////////////////////////

    leftTime = Math.ceil((setTime - nowTime)/1000);
    if(nowTime <= setTime){
      d = ~~(leftTime/86400);
      h = ~~(leftTime%86400/3600);
      m = ~~(leftTime%86400%3600/60);
      s = ~~(leftTime%86400%3600%60);
      timer = setTimeout(core,1e3);
    }else{
      clearTimeout(timer);
      timer = null;
    }

    //here set out format
    target.innerHTML = 'd:'+d+' h:'+h+' m:'+m+' s:'+s;
    
  }
  core();
}

调用方式:

// 普通调用
countDown('2016/10/02/23:43',oDiv);
// 指定时间循环倒计时
countDown('2016/10/02/23:43',oDiv,[9,11,18]);

以上这篇自己封装的一个简单的倒计时功能实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 #Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 #Javascript
domReady的实现案例
Nov 23 #Javascript
BootStrap按钮标签及基本样式
Nov 23 #Javascript
JavaScript仿百度图片浏览效果
Nov 23 #Javascript
Asp.Net之JS生成分页条的方法
Nov 23 #Javascript
javascript判断firebug是否开启的方法
Nov 23 #Javascript
You might like
S900/ ETON E1-XM 收音机
2021/03/02 无线电
js下函数般调用正则的方法附代码
2008/06/22 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Python中isnumeric()方法的使用简介
2015/05/19 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
门卫岗位安全职责
2013/12/13 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
品德评语大全
2014/05/05 职场文书
环保倡议书范文
2014/05/12 职场文书
学生吸烟检讨书
2014/09/14 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python