介绍

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. .19-浅析webpack源码之compile流程-rules参数处理(2)

    第一步处理rule为字符串,直接返回一个包装类,很简单看注释就好了. test/include/exclude 然后处理test.include.exclude,如下: if (rule.test | ...

  2. Mouse点击之后，复制GridView控件的数据行

    本篇是实现用mouse点击GridView控件任意一行,把所点击的数据复制至另一个GridView控件上. 实现大概思路,把所点击的数据行的记录主键找出来,再去过滤数据源. 点击功能,已经实现,可以参 ...

  3. C# Windows程序窗口置前台的几种方法

    这个是从别的地方看来的,放我这里 第一种:SetForegroundWindow,这个方法时灵时不灵.有人说,在自己的程序里把自己的窗口之前一般就不灵,而置前其它程序的窗口就灵.我觉得这是有原因的:当 ...

  4. Java - Iterator源码解析

    java提高篇(三十)-----Iterator 迭代其实我们可以简单地理解为遍历,是一个标准化遍历各类容器里面的所有对象的方法类,它是一个很典型的设计模式.Iterator模式是用于遍历集合类的标准 ...

  5. Mybatis中的缓存

    Mybatis提供缓存查询功能,用于减轻数据库压力,提升数据查询能力. Mybatis中定义了两级缓存:包括一级缓存与二级缓存.示意图如下所示: 一.一级缓存 一级缓存的特点: 每一个SqlSessi ...

  6. Windows系统的消息机制

    1)Add the window to the clipboard viewer chain. 通过SetClipboardViewer()传入窗口句柄,所有监视剪贴板的窗口句柄会组成一个链表(后来者 ...

  7. 【转】android系统常用URI

    android系统管理联系人的URI如下:ContactsContract.Contacts.CONTENT_URI 管理联系人的UriContactsContract.CommonDataKinds ...

  8. python的变量以及常量介绍

    变量概念: 把程序运行过程中产生的中间值保存在内存. 方便后面使用. 命名规范: 1. 数字, 字母, 下划线组成 2. 不能数字开头, 更不能是纯数字 3. 不能用关键字 4. 不要用中文 5. 要 ...

  9. 安装nvm管理不同的node版本

    在工作或者学习中,偶尔会遇到需要切换不同node版本的需求,幸好有神器nvm可以帮我们解决问题.下面我们就来讲解如何在window系统上安装nvm!

  10. 基于react的标准form+table页面的请求流程图

    componentDidMount直接走handleSearch而不走loadData,是为了当form有默认初始值的时候也能适用! --------------------2018.2.7新增--- ...