zoukankan      html  css  js  c++  java
  • 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;
              /* 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>
  • 相关阅读:
    SP是什么?CP是什么?SP与CP有什么区别?
    SP与CP将走向互补融合
    SP与CP分工
    Asynchronous Socket 顺序
    Asynchronous Client Socket Example
    Synchronous Server Socket Example
    web应用程序根目录
    简单socket服务(一)
    Asynchronous Server Socket Example
    Socket连接不上的问题
  • 原文地址:https://www.cnblogs.com/CaktyRiven/p/5114365.html
Copyright © 2011-2022 走看看