介绍

Date对象，是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。Date在js中和Array类似，都是拥有自己的特殊方法的特殊对象。

创建 Date 对象的语法：

var myDate=new Date() //Date 对象会自动把当前日期和时间保存为其初始值。

　　获取倒计时之前，我们不妨先来看怎样获取当前时间吧！！！

function time(){

  var oDate = new Date();

  var year = oDate.getFullYear();

  var month = oDate.getMonth() + 1 ;

  var dDate = oDate.getDate();

  var day = oDate.getDay();

  var house = oDate.getHours();

  var minu = oDate.getMinutes();

  var sec = oDate.getSeconds();

  switch(day){

  case 1:

  day = '星期一';

  break;

  case 2:

  day = '星期二';

  break;

  case 3:

  day = '星期三';

  break;

  case 4:

  day = '星期四';

  break;

  case 5:

  day = '星期五';

  break;

  case 6:

  day = '星期六';

  break;

  case 0:

  day = '星期日';

  break;

  }

  function double( t ){

  if( t < 10 ){

   t = '0' + t;

  }

  return t;

  }

  document.body.innerHTML = year + '年' + month +'月'+ dDate + '日 ' + day + ' ' + double(house) +':'+ double(minu) +':' + double(sec);

 }

 time();

 setInterval(time,1000);

　　

获取倒计时

1、实现倒计时功能

2、倒计时结束按钮可被点击，之前不可被点击

实例代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<div id="lastTime">

 <span>0天 </span>

 <span>00: </span>

 <span>00: </span>

 <span>00 </span>

</div>

<br /><br />

<style type="text/css">

#btn{

 text-decoration: none;

 display: block;

 width: 100px;

 height: 35px;

 background: #ccc;

 text-align: center;

 line-height: 35px;

 color: #666;

}

#btn.btn{

 background: red;

 color: #fff;

 font-size: 20px;

 font-weight: bold;

}

</style>

<a href="javascript:;" id="btn">即将开抢!</a>

<script type="text/javascript">

 var oLt = document.getElementById("lastTime");

 var oBtn = document.getElementById("btn");

 time();

 var timer = setInterval( time , 1000 );

 function time(){

 var endTime = new Date('2017/01/13 00:00:00');//结束日期不得在当前日期之前

 var nowTime = new Date();

 var splus = endTime.getTime() - nowTime.getTime();

 //天 时 分 秒

 if( splus <= 1 ){

  clearInterval( timer );

  oBtn.className = 'btn';

  oBn.innerHTML = '开始秒杀!';

  oBtn.href = 'http://www.baidu.com';

  return;

 }else{

  oBtn.className = '';

 }

 var day = Math.floor( splus / 1000 / 60 / 60 / 24 );

 var hours = Math.floor( splus / 1000 / 60 / 60 % 24 );

 var min = Math.floor(splus / 1000 / 60 % 60);

 var sec = Math.floor(splus / 1000 % 60);

 oLt.innerHTML = day + '天 ' + double( hours ) + ':' + double( min ) + ':' + double( sec );

 function double( n ){

  if( n < 10 ){

  n = '0' + n;

  }

  return n;

 }

 }

</script>

</body>

</html>

　学习网址：http://www.jb51.net/article/102817.htm　

我的实例下篇文章引入：

JavaScript利用Date实现简单的倒计时实例的更多相关文章

  1. Python 利用Python编写简单网络爬虫实例3

    利用Python编写简单网络爬虫实例3 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错 实验目的 获取目标网站“http://bbs.51testing. ...

  2. Python 利用Python编写简单网络爬虫实例2

    利用Python编写简单网络爬虫实例2 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错 实验目的 获取目标网站“http://www.51testing. ...

  3. 利用Java编写简单的WebService实例

    使用Axis编写WebService比較简单,就我的理解,WebService的实现代码和编写Java代码事实上没有什么差别,主要是将哪些Java类公布为WebService. 以下是一个从编写測试样 ...

  4. 利用Java编写简单的WebService实例-转载

    使用Axis编写WebService比较简单,就我的理解,WebService的实现代码和编写Java代码其实没有什么区别,主要是将哪些Java类发布为WebService.下面是一个从编写测试例子到 ...

  5. 用javascript来实现前端简单路由

    WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由.后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁.同样 ...

  6. JavaScript学习笔记-简单的倒计时跳转页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. javascript 的Date 格式化, 模仿shell中date命令的格式

    原文:javascript 的Date 格式化, 模仿shell中date命令的格式 shell 中显示当前的日期 [root@localhost]$ date '+%Y-%m-%d %H:%M:%S ...

  8. 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（二）（代码篇）

    这篇是上一篇的延续: 用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 源代码在github上可以下载,地址:https://github.com/guoxia ...

  9. Qt5.9一个简单的多线程实例（类QThread）（第一种方法）

    Qt开启多线程,主要用到类QThread.有两种方法,第一种用一个类继承QThread,然后重新改写虚函数run().当要开启新线程时,只需要实例该类,然后调用函数start(),就可以开启一条多线程 ...

随机推荐

  1. IIS 是如何处理 ASP.NET 请求的

    #main{ width:1250px; } #mainContent{ width:915px } img#imgTop{ max-width:850px; } Web 服务器 VS Web 应用程 ...

  2. Docker基础-镜像操作

    1.搜寻镜像 docker search [TERM] 可以搜索远程仓库中共享的镜像,默认搜索官方仓库的镜像. docker search参数: --automated=true|false :仅显示 ...

  3. [转]Easily Add a Ribbon into a WinForms Application

    本文转自:https://www.codeproject.com/articles/364272/easily-add-a-ribbon-into-a-winforms-application-cs ...

  4. 网页中通过js修改img的src属性刷新图片时，图片缓存问题现象表述及问题解决【ps：引用大神案例http://blog.csdn.net/goodleiwei/article/details/50737548】

    问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过fir ...

  5. [C#]System.Timers.Timer(2)

    摘要 之前学习过c#中定时器Timer的基本用法,在使用过程中,有一个问题,一直困扰着自己,就是在初始化定时器的时候,如果设置的interval过小,或者每次执行的业务非常耗时的时候,这时候该怎么处理 ...

  6. EF 求和 GroupBy多个字段

    GroupBy根据多个字段分组使用方式: 一.使用扩展方法 query.GroupBy(q => new { q.Year, q.Month }) .Select(q => new { Y ...

  7. [javaSE] 看博客学习java并发编程

    共享性 多线程操作同一个数据,产生线程安全问题 新建一个类ShareData 设计一个int 型的成员变量count 设计一个成员方法addCount(),把count变量++ 在main函数中开启多 ...

  8. 撩课-Web大前端每天5道面试题-Day28

    1.用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别? 首先来看setInterval的缺陷,使用setInterval()创建的定时器确保了定 ...

  9. Java - "JUC" ReentrantLock获取锁

    [Java并发编程实战]-----“J.U.C”:ReentrantLock之一简介 ReentrantLock介绍 ReentrantLock是一个可重入的互斥锁,又被称为“独占锁”. 顾名思义,R ...

  10. HDU6154

    CaoHaha's staff Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...