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


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 相关文章推荐
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
Vue仿支付宝支付功能
May 25 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
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JS与框架页的操作代码
2010/01/17 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
python 图片验证码代码
2008/12/07 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python global关键字的用法详解
2019/09/05 Python
python做接口测试的必要性
2019/11/20 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Python3 assert断言实现原理解析
2020/03/02 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
社区党员先进事迹
2014/01/22 职场文书
军人违纪检讨书
2014/02/04 职场文书
2014年个人售房协议书
2014/10/30 职场文书
培训感想范文
2015/08/07 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Python中request的基本使用解决乱码问题
2022/04/12 Python