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


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的闭包
Jan 17 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
Angular中实现树形结构视图实例代码
May 05 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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
smarty模板局部缓存方法使用示例
2014/06/17 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
禁止刷新,回退的JS
2006/11/25 Javascript
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
vue实现拖拽效果
2019/12/23 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
如何利用Python写个坦克大战
2020/11/18 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
领导干部培训感言
2014/01/23 职场文书
简单的项目建议书模板
2014/03/12 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
2014年底工作总结
2014/12/15 职场文书
升职自荐信范文
2015/03/27 职场文书
协议书格式模板
2016/03/24 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书