原文链接:http://mengqing.org/archives/js-countdown.html

之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用。
(用的是张鑫旭写的一个倒计时,稍作修改了下,原文:http://www.zhangxinxu.com/wordpress/?p=987)

用法:

<div class="timer">
<span id="years">00</span>:
<span id="months">00</span>:
<span id="days">00</span>:
<span id="hours">00</span>:
<span id="minutes">00</span>:
<span id="seconds">00</span>
</div> <script type="text/javascript">
// 获取本机当前时间
var mydate = new Date();
// console.log(mydate.getFullYear(), parseInt(mydate.getMonth())+1, mydate.getDate(), mydate.getHours(), mydate.getMinutes(), mydate.getSeconds()); var futureDate = eval(Date.UTC(2014, 10, 30, 12, 0, 0));
// var nowDate = eval(Date.UTC(2013, 11, 15, 16, 36, 52));
var nowDate = eval(Date.UTC(mydate.getFullYear(), parseInt(mydate.getMonth())+1, mydate.getDate(), mydate.getHours(), mydate.getMinutes(), mydate.getSeconds()));
var obj = {
sec: document.getElementById("seconds"),
mini: document.getElementById("minutes"),
hour: document.getElementById("hours"),
day: document.getElementById("days"),
day: document.getElementById("months"),
day: document.getElementById("years")
}
fnTimeCountDown(futureDate, obj, nowDate, function () {
// console.log('时间到了!');
});
</script>

  JS源码:

/*
* 倒计时的实现
*/
var fnTimeCountDown = function (d, o, now, callback) {
var f = {
zero: function (n) {
var n = parseInt(n, 10);
if (n > 0) {
if (n <= 9) {
n = "0" + n;
}
return String(n);
} else {
return "00";
}
},
dv: function () {
d = d || Date.UTC(2050, 0, 1); //如果未定义时间,则我们设定倒计时日期是2050年1月1日
var future = new Date(d);
var nowTime = new Date(now);
//现在将来秒差值
var dur = Math.round((future.getTime() - nowTime.getTime()) / 1000), pms = {
sec: "00",
mini: "00",
hour: "00",
day: "00",
month: "00",
year: "0"
};
if (dur > 0) {
pms.sec = f.zero(dur % 60);
pms.mini = Math.floor((dur / 60)) > 0 ? f.zero(Math.floor((dur / 60)) % 60) : "00";
pms.hour = Math.floor((dur / 3600)) > 0 ? f.zero(Math.floor((dur / 3600)) % 24) : "00";
//pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor((dur / 86400)) % 30) : "00";
pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor(dur / 86400)) : "00";
//月份,以实际平均每月秒数计算
pms.month = Math.floor((dur / 2629744)) > 0 ? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
//年份,按回归年365天5时48分46秒算
pms.year = Math.floor((dur / 31556926)) > 0 ? Math.floor((dur / 31556926)) : "0";
}
return pms;
},
ui: function () {
if (o.sec) {
o.sec.innerHTML = f.dv().sec;
}
if (o.mini) {
o.mini.innerHTML = f.dv().mini;
}
if (o.hour) {
o.hour.innerHTML = f.dv().hour;
}
if (o.day) {
o.day.innerHTML = f.dv().day;
}
if (o.month) {
o.month.innerHTML = f.dv().month;
}
if (o.year) {
o.year.innerHTML = f.dv().year;
}
now = now + 1000;
if (f.dv().sec == "00" && f.dv().mini == "00" && f.dv().hour == "00" && f.dv().day == "00" && f.dv().month == "00" && f.dv().year == "0") {
if (callback) {
callback();
}
} setTimeout(f.ui, 1000);
}
};
f.ui();
};

(转)js实现倒计时效果(年月日时分秒)的更多相关文章

  1. js获取当前的年月日时分秒周期

    function timeNow(){ var date = new Date(); this.year = date.getFullYear(); this.month = date.getMont ...

  2. 时间格式的转化 vue与js 年月日 时分秒

    首先使用原生转化的方法 第一种 //时间转换 dateStr(d, sign) { //如果没有传递符号,给一个默认的符号 if (!sign) { sign = '-' } //获取d里面年月日时分 ...

  3. js获取当前时间的年月日时分秒以及时间的格式化

    1.获取当前时间 var myDate = new Date(); 2.获取时间中的年月日时分秒 myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear( ...

  4. jquery获取年月日时分秒当前时间

    获取年月日时分秒的当前时间,可按照某种格式显示出来,下面是一种得到如2017年02月02日  00:00:00格式的当前时间 function getCurrentDate(date){ var y ...

  5. 在vue项目中显示实时时间(年月日时分秒)

    1.在data中定义一个变量,存储时间 data(){ return { nowTime:'' } }, 2.给定一个div <div>{{nowTime}}</div> 3. ...

  6. Swift3.0 iOS获取当前时间 - 年月日时分秒星期

    Swift3.0 iOS获取当前时间 - 年月日时分秒星期func getTimes() -> [Int] { var timers: [Int] = [] // 返回的数组 let calen ...

  7. C# 版本的 计时器类:精确到微秒 秒后保留一位小数 支持年月日时分秒带单位的输出

    class TimeCount { // 临时变量,存放当前类能表示的最大年份值 ; /// <summary> /// 获取毫秒能表示的最大年份数 /// </summary> ...

  8. H面试程序(1)编写一个函数,要求输入年月日时分秒,输出该年月日时分秒的 下一秒

    编写一个函数,要求输入年月日时分秒,输出该年月日时分秒的下一秒. 如输入 2004 年 12 月 31 日 23 时 59 分 59 秒,则输出 2005年 1 月 1 日 0 时 0 分 0 秒. ...

  9. [置顶] java得到前一个月的年月日时分秒

    import java.util.Calendar; /** * 得到前一个月的年月日时分秒 * @author Mr.hu * 2013-6-28上午12:00:35 * Class Explain ...

随机推荐

  1. C/C++ 传递信息给Java

    #开始 今天有人问我C++怎么给Java传递消息 大概需求是 用C++写了一个窗口 需要把编辑框里面的东西传递给Java做处理 #解决过程 我现在能想到的有三个简单的方法 1. Socket编程 通过 ...

  2. 《实战Java高并发程序设计》读书笔记四

    第四章 锁的优化及注意事项 1.锁性能的几点建议 减小锁持有时间: 系统持有锁时间越长锁竞争程度就越激烈,只对需要同步的方法加锁,可以减小锁持有时间进而提高锁性能. 减少锁的持有时间有助于降低锁冲突的 ...

  3. JAVA-替换html中图片的路径-从html代码中提取图片路径并下载(完整版)

    transHtml方法实现提取网络图片中得图片路径,将其重新下载到本地,并替换html中原来得路径 package com.googosoft.until; import java.io.Buffer ...

  4. 【C语言】创建一个函数,判断某一正整数是否为素数,并调用这个函数找出1000以内所有素数

    #include <stdio.h> int fun(int x) { int n; ;n<=x-;n++) ) break; if(n>=x) ; else ; } main ...

  5. 【译】高级T-SQL进阶系列 (三)【中篇】:理解公共表表达式(CTEs)

    [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:传送门. 一个简单的CTE例子 如前所述,CTE‘s提供给你了一个方法来更容易的书写复杂的代码以提高其可读性.假设你有列表 ...

  6. Hack the box邀请码和注册问题总结

    注意下,有3个坑, 1. 解码方式是随机的,记得看DATA下面提示用哪种 2. post时候可以直接用f12里的console,命令是: $.post('https://www.hackthebox. ...

  7. 【嵌入式】ARM9复习

    一.嵌入式系统基础 二.ARM处理器 1. 在每条指令后,用;//注释这条指令的寻址方式,以及实现的功能(25分) 注:变址寻址需要标注是基址加偏移.还是基址加索引,是前变址还是后变址.SUB SP, ...

  8. springmvc基于java配置的实现

    该案例的github地址:https://github.com/zhouyanger/demo/tree/master/springmvc-noxml-demo 1.介绍 之前搭建SpringMvc项 ...

  9. HDU3173 Dominos

    单向并查集,问至少给几个点可以遍历全图,连通块数量n,入度为0的点的数量m,取max(n,m)~ #include<cstdio> #include<algorithm> #i ...

  10. es 搜索功能简介

    DSL 语法介绍 语法 范围 /_search 集群上搜索所有的索引 /index1/_search index1 /index1,index2/_search index1和index2 /inde ...