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


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 相关文章推荐
JavaScript中pop()方法的使用教程
Jun 09 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
vue鼠标悬停事件实例详解
Apr 01 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 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
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python实现员工管理系统
2018/01/11 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
ubuntu上安装python的实例方法
2019/09/30 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python如何输出百分比
2020/07/31 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
网络工程师的自我评价
2013/10/02 职场文书
学术会议邀请函范文
2014/01/22 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
就业推荐表导师评语
2014/12/31 职场文书