码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript电子时钟+倒计时

时间:2016-01-08 21:51:19      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

JavaScript电子时钟+倒计时

标签:

原文地址:http://www.cnblogs.com/CaktyRiven/p/5114365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!