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


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 相关文章推荐
对之前写的jquery分页做下升级
Jun 19 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
详细分析vue响应式原理
Jun 22 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
js表单验证实例讲解
2016/03/31 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python字典多条件排序方法实例
2014/06/30 Python
Python字符串替换实例分析
2015/05/11 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
分厂厂长岗位职责
2013/12/29 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
创业计划书之养殖业
2019/10/11 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android