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

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

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

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

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

赞 (0)

相关推荐

  • jquery简单倒计时实现方法

    本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2

  • jQuery实现简单倒计时功能的方法

    jQuery实现简单倒计时功能的方法

    本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"

  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    本文实例讲述了jQuery简单倒计时效果.分享给大家供大家参考,具体如下: 前天做了一个活动项目,其中有一块需要做倒计时的效果,由于需求比较简单,所以也就没用网上各种倒计时的插件.今天抽空整理出来,分享给大家. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>倒计时效果</titl

  • js倒计时简单实现方法

    本文实例讲述了js倒计时简单实现方法的代码,分享给大家供大家参考,具体如下: function timeDown(second) { var month = '', day = '', hour = '', minute = ''; if (second >= 86400 * 30) { month = Math.floor(second / (86400 * 30)) + '月'; second = second % (86400 * 30); } if (second >= 86400)

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

    因为平常工作中很常用到该功能,所以就利用这次国庆假期,重新梳理与对原有代码进行改善,再集成一个常用的功能,最终封装出这个"简单倒计时"功能. 该倒计时方法具有以下该功能: 1. 根据指定日期与当前的电脑时间进行匹配 2. 通过指定一个数组参数,来设置在每一天内不同的时间段进行倒计时. * 该方法还未通过实际工作的检测,稳定性未知(如果实际工作通过,会删除这段话) function countDown(date,target,filter){ var setTime = new Date

  • vue实现一个简单的分页功能实例详解

    这是一个简单的分页功能,只能够前端使用,数据不能通过后台服务器进行更改,能容已经写死了. 下面的内容我是在做一个关于婚纱项目中用到的,当时好久没用vue了,就上网区找了别人的博客来看,发现只有关于element_ui的,基本全是,对自己没用什么用,就自己写了一个,效果如下: 点击相应的按钮切换到对应的内容内容: 下面我只发核心代码,css样式就不发了,自己想怎么写怎么写 <!-- 分页内容 --> <ul class="blog-lists-box"> <

  • PHP实现一个简单url路由功能实例

    PHP实现一个简单url路由功能实例

    什么是php的路由机制 1.路由机制就是把某一个特定形式的URL结构中提炼出来系统对应的参数.举个例子,如:http://main.test.com/article/1  其中:/article/1  -> ?_m=article&id=1. 2.然后将拥有对应参数的URL转换成特定形式的URL结构,是上面的过程的逆向过程. 如果一个页面的内容呈现,需要根据url上传递的参数来进行渲染.很多时候可能是这样子写:xxx.com/xx?c=x&m=x&t=..,而我们看到的url

  • python实现的简单窗口倒计时界面实例

    本文实例讲述了python实现的简单窗口倒计时界面.分享给大家供大家参考.具体分析如下: 下面的代码通过Tkinter制作windows窗口界面,然后时间了一个简单的倒计时功能,代码可以直接运行 # Countdown using Tkinter from Tkinter import * import time import tkMessageBox class App: def __init__(self,master): frame = Frame(master) frame.pack()

  • Vue写一个简单的倒计时按钮功能

    在项目开发里,我们经常会遇到发送验证码.点击了之后有60秒倒计时的按钮,很常见却也很简单,但是在写这个按钮的时候有个别地方还要注意下,今天写出来,如有问题欢迎指正! 完成的效果如下: 为了更快显示出效果,我把时间设成了5秒.按钮在点击之后会出现倒计时,同时按钮变为不可点击状态,样式也发生变化,鼠标悬浮上的样子也会发生变化. 接下来我们用代码来实现: <button class="button" @click="countDown"> {{content}

  • Android 简单实现倒计时功能

    在 Android 中倒计时功能是比较常用的一个功能,比如短信验证码,付款倒计时等.实现方式有Handler.Thread 等,但是实现起来都有点麻烦,其实Android已经为我们封装好了一个抽象类 CountDownTimer,可以简单的实现倒计时功能,如下图所示. CountDownTimer 实现倒计时功能的机制也是用Handler 消息控制,只是它帮我们已经封装好了,先看一下它的介绍. Schedule a countdown until a time in the future, wi

  • Android实现一个完美的倒计时功能

    目录 一. 已有倒计时方案存在的问题 1. CountDownTimer 2. Handler 3. Timer 二. 自己封装倒计时 总结 一. 已有倒计时方案存在的问题 在开发倒计时功能时往往我们会为了方便直接使用CountDownTimer或者使用Handler做延时来实现,当然CountDownTimer内部封装也是使用的Handler. 如果只是做次数很少的倒计时或者不需要精确的倒计时逻辑那倒没关系,比如说我只要倒计时10秒,或者我大概5分钟请求某个接口 但是如果是需要做精确的倒计时操

  • python使用线程封装的一个简单定时器类实例

    本文实例讲述了python使用线程封装的一个简单定时器类.分享给大家供大家参考.具体实现方法如下: from threading import Timer class MyTimer: def __init__(self): self._timer= None self._tm = None self._fn = None def _do_func(self): if self._fn: self._fn() self._do_start() def _do_start(self): self.

  • 使用Lucene实现一个简单的布尔搜索功能

    使用Lucene实现一个简单的布尔搜索功能

    什么是lucene Lucene是apache软件基金会jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎(英文与德文两种西方语言). Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工具让你能实现这些产品. 在布尔查询的对象中,包含一个子句的集合,各个子句间都是如

  • jQuery基于扩展简单实现倒计时功能的方法

    本文实例讲述了jQuery基于扩展简单实现倒计时功能的方法.分享给大家供大家参考,具体如下: jQuery.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '36px', endFontSize: '12px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings);

随机推荐