• 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;
      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 

    我的实例下篇文章引入:

  • 相关阅读:
    gym101350 c h m
    Gym
    poj 1511 Invitation Cards(最短路中等题)
    POJ 1062 昂贵的聘礼(最短路中等题)
    POJ 1125 Stockbroker Grapevine(最短路基础题)
    【Linux】buffer cache free 理解
    python 绘图 工具
    【Linux】时间跟时区的校正
    python conda、pip区别,python 下 faiss 安装
    celery-demo
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/7003161.html
Copyright © 2020-2023  润新知