So implementieren Sie Zähler- und Uhrfunktionscode in HTML-HTML-Tutorial-php.cn

So implementieren Sie Zähler- und Uhrfunktionscode in HTML

不言

Freigeben： 2018-08-30 11:29:51

Original

2733 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Implementierung des Funktionscodes von Zähler und Uhr in HTML. Ich hoffe, dass er für Freunde hilfreich ist.

Auf vielen Webseiten sehen wir Zähler und Uhren. Wie können wir diese Funktion also selbst implementieren?

Lassen Sie uns zuerst über den Zähler sprechen. Die logische Funktion des Zählers ist sehr einfach, das heißt, der Sekundenzeiger erhöht sich jede Sekunde um eins und rückt alle 60 um eins vor. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Auf diese Weise wird ein einfacher Zähler vervollständigt.

Code für die Uhrfunktion:

<!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>

Nach dem Login kopieren

Das war’s, die Uhr ist fertig!

Verwandte Empfehlungen:

So verwenden Sie den Timer, um die Countdown-Funktion in js zu implementieren

Uhreffekt implementiert durch jQuery+css (kompatibel mit jedem Browser)_jquery

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Zähler- und Uhrfunktionscode in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!