JavaScript利用Date实现简单的倒计时实例

介绍

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实现简单的倒计时实例

相关文章