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


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 学习笔记01 JQuery初接触
May 06 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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
2006/12/14 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
php字符集转换
2017/01/23 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
大一自我鉴定范文
2013/10/04 职场文书
岗位明星事迹材料
2014/05/18 职场文书
暑期培训心得体会
2014/09/02 职场文书
单位介绍信格式
2015/01/31 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
龙猫观后感
2015/06/09 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js