介绍

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. C# Owin初探 概念理解（一）

    本文是阅读网上大牛的文章总结而成. 目录 1.Owin定义 2.为什么要用Owin 3.作用 4.总结 1.Owin定义 Owin是Open Web Interface For .NET.也就是.Ne ...

  2. windows7 资源管理器无法显示常用

    1.windows7 资源管理器无法显示常用 2.windows7 资源管理器无法附加的解决办法. 删除以下文件夹内的所有文件即可%APPDATA%\Microsoft\Windows\Recent\ ...

  3. 【MongoDB-MongoVUE图像管理工具】

    介绍一款很不错的开源的MongoDB图形化管理工具:MongoVUE . MongoVUE 1.6.9 破解版,下载地址.    

  4. 37.Linux驱动调试-根据oops的栈信息,确定函数调用过程

    上章链接入口: http://www.cnblogs.com/lifexy/p/8006748.html 在上章里,我们分析了oops的PC值在哪个函数出错的 本章便通过栈信息来分析函数调用过程 1. ...

  5. Java基础——Servlet（五）

    哈哈哈...学习Servlet学了半个多月,因为中间有比较灰心的时候,有几天是啥都不学了的状态,看了好几部励志的电影.呃~还是得继续吧.本来计划是好好夯实这里的基础,结果在网找到了介绍比较全面的视频, ...

  6. 使用JDBC一次执行多条语句（以MySQL为例）

    阅读本文需要的先修知识: 最基本的SQL语句 最基本的JDBC操作(如插入单条记录) 如急需使用请直接看最后一段代码. 在JDBC中,对记录进行修改操作最简单的方法是使用executeUpdate() ...

  7. Idea的Maven项目引入模块

    File->Project Structures->Modules 点击那个加号,选择Import Module

  8. Android插件化

    http://www.androidblog.cn/index.php/Index/detail/id/16# Android Hotfix 新方案——Amigo 源码解读 https://www.d ...

  9. pycharm 光标快速移动到括号外或行尾

    coupon = models.ForeignKey("Coupon", on_delete=models.CASCADE) pycharm中编写程序,  需要将光标快速移动到“” ...

  10. ubuntu 18.04 设置固定ip

    # This file is generated from information provided by # the datasource.  Changes to it will not pers ...