溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

html實(shí)現(xiàn)計(jì)數(shù)器以及時(shí)鐘的方法

發(fā)布時(shí)間：2020-09-22 11:37:12 來(lái)源：億速云 閱讀：378 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下html實(shí)現(xiàn)計(jì)數(shù)器以及時(shí)鐘的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在許多的網(wǎng)頁(yè)中，我們都會(huì)看到計(jì)數(shù)器以及時(shí)鐘，那么我們?cè)趺醋约簩?shí)現(xiàn)著種功能呢？

先說(shuō)計(jì)數(shù)器，計(jì)數(shù)器的邏輯功能很簡(jiǎn)單，就是秒針每秒加一，逢60進(jìn)一就可以。代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div></div>
        <script>
            var index = 0;
            var i=0;
            
            /**
             * 對(duì)時(shí)間進(jìn)行預(yù)先處理，逢60進(jìn)一
             */
            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;
            }
            
            /**
             * 將獲得的時(shí)間插入到div的區(qū)域
             */
            function show(){
                var time = counter();
                document.getElementsByTagName("div")[0].innerHTML=time;
            }
            
            /**
             * 每秒鐘獲得一次時(shí)間，實(shí)現(xiàn)計(jì)數(shù)功能
             */
            function set(){
                setInterval("show()",1000);
            }
            
            show();
            set();
        </script>
    </body>
</html>

這樣，一個(gè)簡(jiǎn)單的計(jì)數(shù)器就完成了。

時(shí)鐘功能的代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            /**
             * 向Date類(lèi)中添加獲取當(dāng)前時(shí)間的方法
             */
            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>

這樣，時(shí)鐘就完成了！

以上是html實(shí)現(xiàn)計(jì)數(shù)器以及時(shí)鐘的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手