<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>倒计时制作</title>

    <style>

        .otime span{display:inline-block;padding: 10px 20px;background-color: #f4f4f4;opacity: 0.5;margin-left: 10px;color:#000;font-weight: bolder;}

    </style>

</head>

<body>

    <div class="text">

        <p>

            距离中秋还剩余:

            <span id="time" class="otime"></span>

        </p>

        <p>

            当前时间：

            <span id="time1" class="otime"></span>

        </p>

    </div>

</body>

    <script type="text/javascript">

    //这个函数是为了适应格式 比如：01分01秒;

    function p (n){

        return n < 10 ? '0'+ n : n;

    }

    //这个函数是为了适应格式 比如：毫秒;

    function m (m){

        if(m<=10){

            return '00'+m;

        }else if(10<m&&m<100){

            return '0'+m

        }else if(100<m&&m<1000){

            return m

        }

    }

    oldTime ();

    newTime ();

    //倒计时函数

    function newTime (){

        //定义当前时间

        // var startTime = new Date("2016/9/13 05:30:30");

        var startTime = new Date ();

        //定义结束时间

        var endTime = new Date("2016/12/22 00:00:00");

        //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算；

        var countDown = (endTime.getTime() - startTime.getTime())/1000;

        //获取天数 1天 = 24小时  1小时= 60分 1分 = 60秒

        var oDay = parseInt(countDown/(24*60*60));

        //获取小时数

        //特别留意 %24 这是因为需要剔除掉整的天数;

        var oHours = parseInt(countDown/(60*60)%24);

        //获取分钟数

        //同理剔除掉分钟数

        var oMinutes = parseInt(countDown/60%60);

        //获取秒数

        //因为就是秒数  所以取得余数即可

        var oSeconds = parseInt(countDown%60);

        //下面就是插入到页面事先准备容器即可;

        var html =  "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "时</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>";

        document.getElementById('time').innerHTML = html;

        //别忘记当时间为0的，要让其知道结束了;

        if(countDown < 0){

            document.getElementById('time').innerHTML = '中秋节活动已结束';

        }

        setTimeout ('newTime()', 200);

    }

    function oldTime (){

        var oDate = new Date();

        //获取年

        var oFullyear = oDate.getFullYear();

        //获取月份

        var oMonth = oDate.getMonth()+1;

        //获取日期

        var oDta= oDate.getDate();

        //获取星期

        var oDay = oDate.getDay();

        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

        //获取小时

        var oHours = oDate.getHours();

        //获取分钟

        var oMinutes = oDate.getMinutes();

        //获取秒数

        var oSeconds = oDate.getSeconds();

        // 获取毫秒数

        var omiao = oDate.getMilliseconds();

        //插入到容器中

        var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"时</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>"+ "<span>"+m(omiao)+"毫秒</span>";

        document.getElementById('time1').innerHTML = b;

        // 定时器调用

        setTimeout ('oldTime ()', 200);

    }

    // 此方法定义data可以是new Data方法兼容ie8及以下浏览器

     function parseISO8601(dateStringInRange) {

   var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,

       date = new Date(NaN), month,

       parts = isoExp.exec(dateStringInRange);

   if(parts) {

     month = +parts[2];

     date.setFullYear(parts[1], month - 1, parts[3]);

     if(month != date.getMonth() + 1) {

       date.setTime(NaN);

     }

   }

   return date;

 }

</script>

</html>

倒计时js的更多相关文章

  1. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  2. 团购、定时抢购倒计时js版

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

  3. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  4. 倒计时,js

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

  5. 手机验证 发送验证码倒计时js

    html: <input name="Tel" class="weui-input" type="tel" placeholder=& ...

  6. 验证码倒计时js

    getVarify.js // 验证码计时--第一种 window.onload = function () { var send = document.getElementById('send'), ...

  7. 点击按钮出现60秒倒计时js代码

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

  8. 一个简单的倒计时js插件

    接收的参数end是必须传的,格式是/分隔的日期字符串,start是可选的,不传就是从现在开始倒计时,callback也是可选的,到倒计时接收时执行自定义的函数. countdown({ 'end':' ...

  9. 简单倒计时js代码

    //倒计时 var timer=null; var interval = 1000; function ShowCountDown(year,month,day,hour,minute,second, ...

随机推荐

  1. 图像识别基本算法之SURF

    图像识别.人脸识别可行的算法有很多.但是作为学习,如果能理清这个问题研究的历程及其主线,会对你深入理解当前研究最新的发展有很多帮助.本文是自己在学习过程中的笔记,大多内容来自于网络,出处请参考最后的引 ...

  2. Chapter 5 Blood Type——12

    I blinked, my mind going blank. Holy crow, how did he do that? 我眨着眼睛,心里一片空白.天哪,他是怎么做到的? "Er, wh ...

  3. Connection open error . Connection Timeout Expired. The timeout period elapsed during the post-login phase.

    是这样的,最近我在开发Api(重构),用的数据库是Sqlserver,使用的Orm是 SqlSugar(别问我为什么选这个,boss选的同时我也想支持国人写的东西,且文档也很全). 被催的是,写好了程 ...

  4. 基本 SQL 之数据库及表管理

    上篇文章,我们基于『数据库』做了一个宏观上的介绍,你应当了解到数据库是在何种背景下,为了解决什么样的问题而诞生的,以及在具体实现下又可以划分哪些中类型. 非关系型数据库的种类很多,我们会在后续的篇章中 ...

  5. iptables 指南

    iptables 是 Linux 内核集成的防火墙系统, 几乎所有 Linux 发行版都会内置 iptables. iptables 对进出的 IP 数据报进行处理和过滤, 过滤规则(rule)存储在 ...

  6. Scala(四) —— 集合

    一.List var x = List(1,2,3,4) //x:List[Int] = List(1, 2, 3, 4) var y = List("x","y&quo ...

  7. 【转】什么是.Net以及.Net的基本语法

    什么是.Net? 1. 通常意义所说的.net有5个组成部分,但最主要的部分是.NET Framework, .NET Framework实际上是运行在Windows操作系统的一个应用程序,一个可供二 ...

  8. C#杂记-自动实现的属性（自动属性）

    基础知识: 普通属性:可读或可写并将值存储到一个私有变量中的属性,不对数据做任何加工,没有自定义代码. private string name public string Name { get{ret ...

  9. java数组及数组的插入，删除，冒泡算法

    1.数组的定义 数组为相同类型的若干个数据,在一个数组里面,不能存放多种不同类型的数据,其中每个数据为该数组的一个元素,可以通过下标对改元素进行访问. 1.1 数组的特点 (1)数组被创建后,长度就已 ...

  10. Selenium自动化-调用Mysql数据库

    上几篇博客发布了几篇Selenium入门知识和进阶, 现在附上如何 从数据库中取值 能够逐行取值,并且返回二维数组 import java.io.FileInputStream; import jav ...