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


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 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
js 处理URL实用技巧
Nov 23 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
uniapp实现横向滚动选择日期
Oct 21 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python 垃圾收集机制的实例详解
2017/08/20 Python
Python3计算三角形的面积代码
2017/12/18 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
人力资源部经理助理岗位职责
2014/03/04 职场文书
2014年班组长工作总结
2014/11/20 职场文书
施工员岗位职责范本
2015/04/11 职场文书
酒店员工管理制度
2015/08/05 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python