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


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 arguments 对象使用介绍
Oct 18 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP6新特性分析
2016/03/03 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
对Python中range()函数和list的比较
2018/04/19 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
初任培训自我鉴定
2013/10/07 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
干部考核评语
2014/04/29 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
法学院毕业生求职信
2014/06/25 职场文书
公司活动总结范文
2014/07/01 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书