Comment implémenter le code des fonctions de compteur et d'horloge en HTML-tutoriel HTML-php.cn

Comment implémenter le code des fonctions de compteur et d'horloge en HTML

不言

Libérer： 2018-08-30 11:29:51

original

2733 Les gens l'ont consulté

Le contenu de cet article explique comment implémenter le code de fonction du compteur et de l'horloge en HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans de nombreuses pages Web, nous verrons des compteurs et des horloges, alors comment pouvons-nous implémenter cette fonction nous-mêmes ?

Parlons d'abord du compteur. La fonction logique du compteur est très simple, c'est-à-dire que la trotteuse incrémente de un toutes les secondes, et elle avance de un toutes les 60. Le code est le suivant :

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

Copier après la connexion

De cette façon, un simple compteur est complété.

Code pour la fonction horloge :

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

Copier après la connexion

De cette façon, l'horloge est complète !

Recommandations associées :

Comment utiliser la minuterie pour implémenter la fonction de compte à rebours dans js

Effet d'horloge implémenté par jQuery+css (compatible avec chaque navigateur)_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!