计数时：

结束时：

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome">

     <title>活动倒计时示例</title>

 </head>

 <body>

     <div class="time">

         <span id="day">00</span>

         <span id="hour">00</span>

         <span id="month">00</span>

         <span id="second">00</span>

     </div>

     <script type="text/javascript">

         (function () {

             // 页面加载完

             window.onload = function () {

                 countTime();

             }

             // 小于9则添加前缀：01\02....

             function checkTime(_zero) {

                 return _zero > 9 ? _zero : '0' + _zero;

             }

             function countTime() {

                 // 截止时间. 年、月、日 时、分、秒 - 设置结束时间后 - 自动关闭计时器.

                 var dateStr = "2018/8/14 08:00:00";

                 //获取当前时间

                 var date = new Date();

                 var now = date.getTime();

                 //设置截止时间

                 var endDate = new Date(dateStr);

                 var end = endDate.getTime();

                 //时间差

                 var leftTime = end - now;

                 //定义变量 d,h,m,s保存倒计时的时间

                 var d, h, m, s;

                 if (leftTime >= 0) {

                     // 计天、时、分、秒

                     d = Math.floor(leftTime / 1000 / 60 / 60 / 24);

                     h = Math.floor(leftTime / 1000 / 60 / 60 % 24);

                     m = Math.floor(leftTime / 1000 / 60 % 60);

                     s = Math.floor(leftTime / 1000 % 60);

                     //将倒计时赋值到div中

                     document.getElementById("day").innerHTML = d > 9 ? d + '天' : checkTime(d) + "天";

                     document.getElementById("hour").innerHTML = h > 9 ? h + '时' : checkTime(h) + "时";

                     document.getElementById("month").innerHTML = m > 9 ? m + '分' : checkTime(m) + "分";

                     document.getElementById("second").innerHTML = s > 9 ? s + '秒' : checkTime(s) + "秒";

                     //递归每秒调用countTime方法，显示动态时间效果

                     setTimeout(countTime, 1000);

                 } else {

                     document.getElementById("day").innerHTML = "00天";

                     document.getElementById("hour").innerHTML = "00时";

                     document.getElementById("month").innerHTML = "00分";

                     document.getElementById("second").innerHTML = "00秒";

                 }

             }

         })();

     </script>

 </body>

 </html>

javascript - 活动倒计时(天、时、分、秒)的更多相关文章

  1. JS实现倒计时(天数,时,分,秒)

    <!DOCTYPE html> <html> <head>   <meta charset="utf-8" >   <titl ...

  2. jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断

    jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...

  3. js倒计时demo 天/时/分/秒

    <html><head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> ...

  4. 网页倒计时，动态显示"××年还剩××天××时××分××秒"

    var target = document.getElementById('target'); function getTimeString(){ // 要计算任意两个日期的时间差只要修改curren ...

  5. JavaScript/js把秒或者毫秒换算成xx-xx-xx 时-分-秒的形式

    function MillisecondToDate(msd) { // var time = parseFloat(msd) / 1000; var time=msd; if (null != ti ...

  6. 【转】使用DateFormat把时间长度格式化为"时:分:秒"格式--不错

    原文网址:http://ssd910.blog.163.com/blog/static/238767972010112214114201/ 经常在系统中显示时间长度,基本上每次都是显示秒数,客户觉得按 ...

  7. Java 获取年 月 日 时 分 秒

    /** * 英文简写(默认)如:2010-12-01 */ public static String FORMAT_SHORT = "yyyy-MM-dd"; /** * 英文全称 ...

  8. oracle截取时间的年/月/日/时/分/秒

    修改日期格式为年月日时分秒: alter session set nls_date_format='yyyy-mm-dd hh24:mi:ss';select to_char(sysdate,'yyy ...

  9. ASP.NET C# 日期 时间 年 月 日 时 分 秒 格式及转换（转自happymagic的专栏）

    在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...

随机推荐

  1. 无法安装MVC3，一直卡在vs10-kb2483190

    原文发布时间为:2011-05-15 -- 来源于本人的百度文章 [由搬家工具导入] 无法安装MVC3，一直卡在vs10-kb2483190 解决方案： 1、用winrar 解压 MVC3安装文件 2 ...

  2. [ CodeVS冲杯之路 ] P1068

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1068/ 这是一道神DP题,一开始状态设计错了,用位置和剩余卡片做下标,过了样例数据WA了 好了,讲正解,设 f[i][ ...

  3. C 语言中char* 和const char*的区别

    const char *p = "123"; p[1] = '3'; // 会报错p = "456"; // 不会报错 const char * 只是说指针指向 ...

  4. objdump

    objdump -h test (show section headers) test.c #include <stdio.h> int main() { static int xxxxx ...

  5. POCO库中文编程参考指南（2）基本数据类型（Poco/Types.h）

    POCO库中文编程参考指南(2)基本数据类型 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmail.com (# -> ...

  6. python mysql创建表

    表设计 表:student 字段名 类型 是否为空 主键 描述 StdID int 否 是 学生ID StdName varchar(100) 否 学生姓名 Gender enum('M','F') ...

  7. windows 2012(64位) IIS配置asp程序 500 - 内部服务器错误。您查找的资源存在问题，因而无法显示。

    在网上找了很久,包括常规的设置父路径之类的,一直都不可以,搞了一晚上毫无成就感,第二天早上无意中看到一篇文章,说到点子上了,非常感谢.源地址已经找不到了,我把大概的问题截图说明一下. 方法如下:1.打 ...

  8. 制作servlet模板

    制作servlet模板 选中window-->preference--->搜索template--->选中java下面的template new一个 Name的设置,当你在eclip ...

  9. [BZOJ1191][HNOI2006]超级英雄Hero 类似二分图的最大匹配

    1191: [HNOI2006]超级英雄Hero Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4740  Solved: 2162[Submit][ ...

  10. DRF的版本和认证

    DRF的版本 版本控制是做什么用的, 我们为什么要用 首先我们要知道我们的版本是干嘛用的呢~~大家都知道我们开发项目是有多个版本的~~ 当我们项目越来越更新~版本就越来越多~~我们不可能新的版本出了~ ...