当前位置: 首页 > 编程笔记 >

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

齐朝明
2023-03-14
本文向大家介绍自己封装的一个简单的倒计时功能实例,包括了自己封装的一个简单的倒计时功能实例的使用技巧和注意事项,需要的朋友参考一下

因为平常工作中很常用到该功能,所以就利用这次国庆假期,重新梳理与对原有代码进行改善,再集成一个常用的功能,最终封装出这个“简单倒计时”功能。

该倒计时方法具有以下该功能:

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]);

以上这篇自己封装的一个简单的倒计时功能实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍简单实现js倒计时功能,包括了简单实现js倒计时功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js倒计时的具体代码,主要使用了JS的Date对象和定时器setInterval,供大家参考,具体内容如下 更多关于倒计时的文章请查看专题:《倒计时功能》 更多JavaScript时钟特效点击查看:JavaScript时钟特效专题 以上就是本文的全部内容,希望对大家的学习

  • 本文向大家介绍Android实现订单倒计时功能,包括了Android实现订单倒计时功能的使用技巧和注意事项,需要的朋友参考一下 先上效果图 1.activity_main.xml 2.MainActivity.class 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍简单实现vue验证码60秒倒计时功能,包括了简单实现vue验证码60秒倒计时功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html js 更多关于倒计时的文章请查看专题:《倒计时功能》 更多JavaScript时钟特效点击查看:JavaScript时钟特效专题 以上就是本文的全部内容,希望对大家的学习有

  • 本文向大家介绍简单了解如何封装自己的Python包,包括了简单了解如何封装自己的Python包的使用技巧和注意事项,需要的朋友参考一下 将自己的程序打包为whl/tar.gz文件 有时候自己写了一个开发基本类,我们把这个类打包为whl或者tar.gz文件,这样的话同事也可以使用自己开发的基本类了 安装setuptools pip install setuptools 编写setup.py及__in

  • 本文向大家介绍Unity实现倒计时功能,包括了Unity实现倒计时功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Unity实现倒计时功能的具体代码,供大家参考,具体内容如下 有两种思路可以实现倒计时,一个是Update,另一个是协程。这里只展示核心的算法思路,有收获的还请点个赞哦 Update 首先定义三个变量,访问权限按需求设置: 思路: 首先用GameTime初始化Time

  • 本文向大家介绍Vue验证码60秒倒计时功能简单实例代码,包括了Vue验证码60秒倒计时功能简单实例代码的使用技巧和注意事项,需要的朋友参考一下 template script css(scss写法) 总结 以上所述是小编给大家介绍的Vue验证码60秒倒计时功能简单实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!