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


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 Eval 函数使用
Mar 23 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
php结合js实现多条件组合查询
May 28 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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
拼音码表的生成
2006/10/09 PHP
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python base64编码解码实例
2015/06/21 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
PyQt5 多窗口连接实例
2019/06/19 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Pycharm安装python库的方法
2020/11/24 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
几道PHP面试题
2013/04/14 面试题
毕业生物理教师求职信
2013/10/17 职场文书
大学秋游活动方案
2014/02/11 职场文书
市场开发计划书
2014/05/07 职场文书
保密工作承诺书
2014/08/29 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
财务工作失误检讨书
2015/02/19 职场文书
员工辞职信范文
2015/03/02 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
浅谈redis缓存在项目中的使用
2021/05/20 Redis