介绍

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. ASP.NET MVC实现剪切图片

    开发需要,我们需要对某一张图片进行剪切.就是说,获取图片某一区域.下面Insus.NET教大家轻便容易实现它. 首先写好一个处理函数,它建在MVC应用程序结构Utilities目录下: 准备好一张图片 ...

  2. 反射实现Model修改前后的内容对比

    在开发过程中,我们会遇到这样一个问题,编辑了一个对象之后,我们想要把这个对象修改了哪些内容保存下来,以便将来查看和追责. 首先我们要创建一个User类 public class User { priv ...

  3. Http请求处理流程

    本文结构: 一.HTTP请求处理流程的基础 1．网络分层 因特网TCP/IP分层模型共有五层:应用层.传输层.网络层.网络接口层和物理层.这种分层模型不同于OSI七层参考模型,但是,是实际使用中采用的 ...

  4. MVC在filter中如何获取控制器名称和Action名称

    使用ActionExecutingContext对象可以获取控制器名称.Action名称.参数名称以及参数值.路由和Action返回值不影响结果. 在代码中 [AttributeUsage(Attri ...

  5. arcgis按要求删除点位

    第一篇博客 嘻嘻 上图 1

  6. CSS学习笔记04 CSS文字排版常用属性

    字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...

  7. 26.Linux-网卡驱动介绍以及制作虚拟网卡驱动(详解)

    1.描述 网卡的驱动其实很简单,它还是与硬件相关,主要是负责收发网络的数据包,它将上层协议传递下来的数据包以特定的媒介访问控制方式进行发送, 并将接收到的数据包传递给上层协议. 网卡设备与字符设备和块 ...

  8. Java基本——数据类型

    一.创建一个简单的Java应用程序 public class Code { public static void main(String[]args) { System.out.println(&qu ...

  9. 使用 Node.js 搭建微服务网关

    目录 Node.js 是什么 安装 node.js Node.js 入门 Node.js 应用场景 npm 镜像 使用 Node.js 搭建微服务网关 什么是微服务架构 使用 Node.js 实现反向 ...

  10. Vue计算属性的用法

    计算属性是个很好玩的东西,在这里面可以对数据模型进行操作,·也可以使用getter,setter方法.使用的话也是非常的简洁明了 这里写个例子 <!DOCTYPE html> <ht ...