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


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之AJAX框架使用说明
Apr 24 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Django中的Signal代码详解
2018/02/05 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
软件测试面试题
2015/10/21 面试题
医学专业毕业生个人的求职信
2013/12/04 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android