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


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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
node中实现删除目录的几种方法
2019/06/24 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
在python中安装basemap的教程
2018/09/20 Python
python中强大的format函数实例详解
2018/12/05 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
python3中确保枚举值代码分析
2020/12/02 Python
python 获取计算机的网卡信息
2021/02/18 Python
Tostadora意大利:定制T恤
2019/04/08 全球购物
出纳岗位职责模板
2013/11/27 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
领导干部作风建设总结
2014/10/23 职场文书
群众路线个人整改措施
2014/10/24 职场文书
党支部培养考察意见
2015/06/02 职场文书
小兵张嘎观后感
2015/06/03 职场文书
奔腾年代观后感
2015/06/09 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
python实现高效的遗传算法
2021/04/07 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python
Golang连接并操作MySQL
2022/04/14 MySQL