<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>时间倒计时</title>

     <style>

     span{

         display: inline-block;

     }

     </style>

 </head>

 <body>

 <center>

     <span id="time">getbootstrap.com</span><br/>

     <span id="time"></span><br/>

     <span id="time1"></span><br/>

     <span id="time2"></span><br/>

     <span id="time3"></span><br/>

     <span id="time4"></span><br/>

     <span id="time5"></span><br/>

 </center>

 </body>

 <script>

     function show_time(){

         var now_time=new Date();//创建当前时间

         // console.log(now_time.toLocaleString());//转化成本地时间

         var new_time=new Date('2017,7,23');//设置活动时间

         // console.log(new_time.toLocaleString());

         var cu_time=new_time.getTime()-now_time.getTime();//看时间差

         // console.log(cu_time);

         // console.log(new_time.getTime());

         // console.log(now_time.getTime());

         var cu_seconds=parseInt(cu_time/1000%60);

         var cu_seconds1=parseInt(cu_time/1000);

         //把所获得的时间差转化成秒，原值是毫秒转化单位是1000，%60是为了余数且取整，为了更好展示

         //console.log(cu_seconds);

         var cu_minutes=parseInt(cu_time/1000/60%60);//原来同上，转化为分钟，取余值且取整

         var cu_minutes1=parseInt(cu_time/1000/60);

         //console.log(cu_minutes);

         var cu_hours=parseInt(cu_time/1000/60/60%24);//原来同上，转化为小时，取余值且取整

         var cu_hours1=parseInt(cu_time/1000/60/60);

         //console.log(cu_hours);

         var cu_day=parseInt(cu_time/1000/60/60/24);//原来同上，转化为天,且取整

         var cu_day1=parseInt(cu_time/1000/60/60/24/30);

         // console.log(cu_day);

         time.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day+"</font>天<font color='red' size='20px'>"+cu_hours+"</font>小时<font color='red' size='20px'>"+cu_minutes+"</font>分<font color='red' size='20px'>"+cu_seconds+'</font>秒'+"</h2>";

         time1.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day1+"</font>个月</h2>";

         time2.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day+"</font>天</h2>";

         time3.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_hours1+"</font>小时</h2>";

         time4.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_minutes1+"</font>分</h2>";

         time5.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_seconds1+"</font>秒</h2>";

     }

         setInterval(show_time,500);//设置定时器500毫秒刷新一次

 </script>

 </html>

[JS] 自己弄得个倒计时的更多相关文章

  1. js写的5秒钟倒计时跳转

    使用js实现几秒以后倒计时跳转,这个在某些特殊情况下还是比较实用的,下面为大家介绍下具体的实现步骤,感兴趣的朋友不要错过  代码如下: <html>  <head>  < ...

  2. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  3. js 和 java 将时间倒计时显示

    需求:用户购买产品,创建了一个订单,但是还么有支付,此时给用户三十分钟剩余支付时间,前台页面做倒计时功能,时间到达时,更改订单状态 ,输出的格式是:29:23 java 实现 package com. ...

  4. js 发送短信验证码倒计时

    html <input type="button" id="btn" value="免费获取验证码" onclick="se ...

  5. js学习笔记之日期倒计时(天，时，分，秒）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. js手机短信按钮倒计时

    /*   120秒手机短信按钮倒计时   */    exports.sendmessage = function (name) {        var second = 120; $(name). ...

  7. js大图轮播和倒计时

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js模拟24小时的倒计时效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS与React分别实现倒计时（天时分秒）

    JS方法 html部分 <div class="clock"> <i></i> 天 <i></i> : <i> ...

随机推荐

  1. 老板说，Vim宏都不会用，你的工作效率太低啦~

    工作中,对于文本文件的编辑我们经常有这样的需求: 多次重复输入一段相同文本: 生成一段序列化的文本: 每行文本插入一句相同的文本. 除此之外,还有很多需要重复操作的动作.对于这些需求,如果我们人工去操 ...

  2. 使用PostgreSQL注意事项

    一.大小写特别敏感 大写字段需要用“”引号(pg字段名使用“”,MySQL字段名使用``) ******表名以及字段名如果是小写但是为关键字,比如name,则也需使用"": 二.分 ...

  3. css网页重置样式表(多版本)

    Eric reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ...

  4. Qt 事件使用示例 (一)

    Qt 事件使用示例,以一个常见的使用来说明:QLabel 当鼠标滑过时改变颜色. 事先说明要想实现这一功能有很多种方法,如Qss实现,本文使用Qt事件的方式来实现. 第一步,我们得实现一个从QLabe ...

  5. Reface.AppStarter 框架初探

    Reface.AppStarter 是一种基于 .NetFramework 的应用程序启动模式,使用该启动模式,你可以轻松的得到以下功能 : IOC / DI 自动注册与装配 简化配置 垂直模块化你的 ...

  6. Java 学习笔记 第一章：Java语言开发环境搭建

    第一章:Java语言开发环境搭建 第二章:常量.变量和数据类型 第三章:数据类型转换.运算符和方法入门 1.Java虚拟机——JVM JVM(Java Virtual Machine ):Java虚拟 ...

  7. iOS UIViewController的瘦身计划

    代码的组织结构,以及为何要这样写. 那些场景适合使用子控制器,那些场景应该避免使用子控制器? 分离UITableView的数据源和UITableViewDataSource协议. MVVM的重点是Vi ...

  8. SpringBoot系列（二）入门知识

    SpringBoot系列(二)入门知识 往期推荐 SpringBoot系列(一)idea新建springboot项目 引言 本来新建springboot项目应该放在入门知识这一章的,但是由于新建spr ...

  9. Javascript/Jquery遇到字符串自动NaN的问题

    结果发现是一个id绑定了两次点击事件.修改之后,问题解决.

  10. 计算机网络协议，UDP数据报的分析

    一.UDP数据报的特点 1.基本特性 UDP是在IP数据报的基础上增加了复用和分用以及差错检测的功能 UDP的主要特点如下: UDP是无连接的:即发送数据之前不需要建立连接 UDP使用尽最大努力交付, ...