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


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与Java中MD5使用两个例子
Dec 23 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
详解elementUI中input框无法输入的问题
Apr 27 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
react+antd 递归实现树状目录操作
Nov 02 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Vue-Router的使用方法
2018/09/05 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
python选择排序算法的实现代码
2013/11/21 Python
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python线性回归实战分析
2018/02/01 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
python分布式计算dispy的使用详解
2019/12/22 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
新书吧创业计划书
2014/01/31 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
出国留学单位推荐信
2015/03/26 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
Mysql中mvcc各场景理解应用
2022/08/05 MySQL