<!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. 【笔记3-26】Python语言基础

    编译型语言和解释型语言 编译型语言 C 先编译 解释型语言 Python 边执行边编译 Python的介绍 吉多·范罗苏姆 1991 解释型语言 Life is short you need Pyth ...

  2. SVN钩子HOOK设置自动备份，服务本地可以看到所有更新内容。

    可以实现SVN本机备份.或者其他备份.关键是可以保持有一份最新的SVN文件可以查看. 实现SVN与WEB同步,可以CO一个出来,也可以直接用自动更新web目录的方法,我们要在svn版本库中配置钩子来实 ...

  3. Material Design 组件之 AppBarLayout

    AppBarLayout 是一个垂直方向的 LinearLayout,它实现了许多符合 Material Design 设计规范的状态栏应该具有的功能,比如滚动手势. AppBarLayout 一般直 ...

  4. 并查集例题02.带权并查集(poj1182)

    Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A.现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底 ...

  5. NodeMCU入坑指南-低成本打造零舍友闻风丧胆WiFi断网神器

    前言 最近对IoT方面比较感兴趣,所以在某宝上入手了一块NodeMCU的开发板,至于为什么我选择这块开发板呢?嘿嘿,当然是因为便宜啊

  6. 消息队列 NSQ 源码学习笔记 (一)

    nsqlookupd 用于Topic, Channel, Node 三类信息的一致性分发 概要 nsqlookup 知识点总结 功能定位 为node 节点和客户端节点提供一致的topic, chann ...

  7. Java 程序该怎么优化？（技巧篇）

    搬砖者:为什么程序总是那么慢?它现在到底在干什么?时间都花到哪里去了? 面试官:简单谈谈 Java 程序性能优化? 1. 字符串处理优化,乃优化之源. 研发过程中,String 的 API 用的应该是 ...

  8. Spring之Bean的管理方式（Content，Beans）

    Spring的bean管理(注释) 注解 代码里特殊的标记,使用注解也可以直接完成相关功能 注解写法:@注解名称(属性名=属性值) 使用在类,方法,属性上面 Spring注解开发准备 导入jar包 ( ...

  9. Spark Streaming 编程入门指南

    Spark Streaming 是核心Spark API的扩展,可实现实时数据流的可伸缩,高吞吐量,容错流处理.可以从许多数据源(例如Kafka,Flume,Kinesis或TCP sockets)中 ...

  10. H5 布局 -- 让容器充满屏幕高度或自适应剩余高度

    在前端页面布局中,经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求.一般这时候都会想当然的使用 height:100% 这样的 CSS 来写. 这样写的话,当容器内内容很多的时候是没有问题的, ...