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


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 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
js实现json数组分组合并操作示例
Feb 12 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
JavaScript控制台的更多功能
Apr 28 Javascript
TS 类型兼容教程示例详解
Sep 23 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位运算的简单权限设计
2013/06/30 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
Vue项目路由刷新的实现代码
2019/04/17 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
python中的itertools的使用详解
2020/01/13 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
医学专业毕业生求职信
2014/06/20 职场文书
敬老院标语
2014/06/27 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
千与千寻观后感
2015/06/04 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技