JavaScript电子时钟+倒计时

JavaScript时间类

获取时分秒：

getHours()

getMinutes();

getSeconds();

获取年月日：

getFullYear();

getMonth() + 1;//获取的月份需要+1；

getDate(); //日期

getDay(); //获取的是星期，0--》星期天

实例：（效果图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子时钟</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
     #wrap{
         width: 200px;
         height: 100px;
         background-color: black;
     }
     #time{
          color: #fff;
          display: block;
          font-size: 24px;
          margin: 0 auto;
          padding-top: 20px;
          /*border: 1px solid red;*/
          text-align: center;
          width: 100px;
     }
     #timer{
         color: green;
          display: block;
          font-size: 18px;
          margin: 0 auto;
          padding-top: 10px;
          /*border: 1px solid red;*/
          text-align: center;
          /*width: 100px;*/
     }
    </style>
</head>
<body>
       <div id="wrap">
            <span id="time"></span>
         <span id="timer"></span>
       </div>
     <script type="text/javascript">
       var time =document.getElementById("time");
        var timer =document.getElementById("timer");

       setInterval(function() {

        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();    
        var years = date.getYear();
        var dates = date.getDate();
        var monts = date.getMonth()+1; 
    var day = date.getDay();
        var parses = date.getMilliseconds()%60;

     switch(day){
          case 0:
          day="日";
           case 1:
          day="一";
           case 2:
          day="二";
           case 3:
          day="三";
           case 4:
          day="四";
           case 5:
          day="五";
           case 6:
          day="六";
     }
        //如果秒数小于十，在秒数面前连接一个0
        if(seconds < 10) {
            seconds = "0" + seconds;
        }
        //如果分钟数小于十，在分钟数面前连接一个0
        if(minutes < 10) {
            minutes = "0" + minutes;
        }
        //如果小时数小于十，在小说数面前连接一个0
        if(hours < 10) {
            hours = "0" + hours;
        }
        if(years<1900) {
            years = years+1900;
        }
        if(dates<10) {
            dates = "0" + dates;
        }
        if(monts<10) {
            monts = "0" + monts;
        }
        if(parses<10) {
            // parses = "0" + parses;
        }

       
        timer.innerHTML =  years +"年" +monts+ "月" +dates +"号"+"星期"+day;
            time.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + parses;
        // date.getTime()//返回的是一个从1970年到当前的毫秒数（时间戳）（ms）
        // date.getMonth()//返回的是月份，从0开始算
        // date.getFullYear();
        
    },10)
     </script>
</body>
</html>

2.倒计时

 <!doctype html> 
<html> 
<meta charset="utf-8"> 
<title>倒计时</title>
<head> 

     <style type="text/css">
     *{
         margin: 0;
         padding: 0;

     }
       .wrap{
           width: 350px;
           height: 100px;
           background-color: black;
       }
       #dates{
           color: #fff;
           margin-top: 10px;
           display: block;
           margin-left: 15px;
       }
       p{
           color: #fff;
       }
     </style>
</head> 
<body> 
<div class="wrap">
    <p>距离2016年02月08号00时00分00秒春节倒计时：</p>
    <!-- <p>距离2016年01月07号23时59分59秒倒计时：</p> -->
    <span id="dates"></span>
</div>
<script type="text/javascript"> 
var dates = document.getElementById("dates");
function getRTime(){ 
var EndTime= new Date('2016/02/07 23:59:59'); //截止时间 
var NowTime = new Date(); 
var t =EndTime.getTime() - NowTime.getTime(); 

var d=Math.floor(t/1000/60/60/24); 
var h=Math.floor(t/1000/60/60%24); 
var m=Math.floor(t/1000/60%60); 
var s=Math.floor(t/1000%60); 
var p=Math.floor(t%60);
if(d<10){
   d="0"+d;
}
if(h<10){
   h="0"+h;
}
if(m<10){
   m="0"+m;
}
if(s<10){
   s="0"+s;
}
if(p<10){
   p="0"+p;
}

dates.innerHTML=d+ "日" + h + "小时"+ m +"分" + s +"秒"+p+"毫秒";
} 
setInterval(getRTime,1); 
</script> 
</body> 
</html>

posted @ 2016-01-08 20:12 riven.lcs 阅读(1304) 评论(0) 编辑收藏举报

刷新页面返回顶部

riven.lcs

JavaScript电子时钟+倒计时

公告