<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      html如何完成計數器以及時鐘的技巧代碼
                
                  發表時間：2023-09-03             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]本篇文章給大家帶來的內容是關于html如何實現計數器以及時鐘的功能代碼 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。在許多的網頁中，我們都會看到計數器以及時鐘，那么我們怎么自己實現著種功能呢？先說計數器，計數器的邏輯功能很簡單，就是秒針每秒加一，逢60進一就可以。代碼如下：&l...
      本篇文章給大家帶來的內容是關于html如何實現計數器以及時鐘的功能代碼 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
      在許多的網頁中，我們都會看到計數器以及時鐘，那么我們怎么自己實現著種功能呢？
      先說計數器，計數器的邏輯功能很簡單，就是秒針每秒加一，逢60進一就可以。代碼如下：
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div></div>
        <script>
            var index = 0;
            var i=0;
            
            /**
             * 對時間進行預先處理，逢60進一
             */
            function counter(){
                second = index;
                minute=i;
                index++;
                if(second==60){
                    second=0;
                    i++;
                    index=0;
                }
                if(second<10){
                    second = "0"+second;
                }
                if(minute<10){
                    minute="0"+minute;
                }
                return time = minute +":"+second;
            }
            
            /**
             * 將獲得的時間插入到div的區域
             */
            function show(){
                var time = counter();
                document.getElementsByTagName("div")[0].innerHTML=time;
            }
            
            /**
             * 每秒鐘獲得一次時間，實現計數功能
             */
            function set(){
                setInterval("show()",1000);
            }
            
            show();
            set();
        </script>
    </body>
</html>
      這樣，一個簡單的計數器就完成了。
      時鐘功能的代碼：
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            /**
             * 向Date類中添加獲取當前時間的方法
             */
            Date.prototype.currentTime = function(){
                var year = this.getFullYear();
                var month = this.getMonth()+1;
                var day = this.getDate();
                var week = this.getDay();
                week = "星期"+"日一二三四五六".charAt(week);
                month = month<10 ? "0"+month : month;
                day = day < 10 ? "0"+day : day;
                var hour = this.getHours();
                var second = this.getSeconds();
                var minute = this.getMinutes();
                hour = hour<10 ? "0"+hour : hour;
                second = second < 10 ? "0"+second : second;
                minute = minute < 10 ? "0"+minute : minute;
                return year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
            }
            
            function showTime(){
                var time = new Date().currentTime();
                document.getElementById("show").innerHTML = time;
            }
            
            function setTime(){
                showTime();
                setInterval("showTime()",1000);
            }
            window.onload = function(){
                setTime();
            }
            
        </script>
    </head>
    <body>
        <span id="show"></span>
        
    </body>
</html>
      這樣，時鐘就完成了！
      相關推薦：
      js如何使用定時器實現倒計時功能
      jQuery+css實現的時鐘效果(兼容各瀏覽器)_jquery
      以上就是html如何實現計數器以及時鐘的功能代碼的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清