JavaScript implémente l'encapsulation du code simple d'un composant d'horloge électronique

Il y a quelques jours, je voulais ajouter une horloge électronique déplaçable dans le coin supérieur droit de ma page d'accueil personnelle, et même si j'avais un peu de temps libre ces jours-ci, j'ai brièvement passé en revue la programmation orientée objet, j'ai donc passé un peu de temps temps dessus. Il est sorti et ressemblait à ceci :

En fait, ce cas est très simple. , utilisez-le simplement brièvementDate classe et minuterie. Bien sûr, cet exemple sert simplement à revoir les connaissances frontales. Il est encapsulé dans un composant

<.>

Le code est le suivant :

(function (window, undefined) {

    function Time()
    {

        this.clock = null;

        this.date = new Date();

        this.month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        this.day = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Friday', 'Saturday'];

        this.str = '11:34 Tuesday30August ';
    }

    Time.prototype = {

        constructor: 'Time',

        init: function (selector)
        {

            this.createHTML(selector);

            this.getTime();

            this.getDay();

        },

        createHTML: function (selector)
        {

            var elem = document.querySelector(selector);

            this.clock = elem;

            elem.innerHTML = this.str;

        },

        getTime: function ()
        {

            var clock = this.clock;

            var hour = clock.getElementsByClassName('cth_hour')[0];

            var minute = clock.getElementsByClassName('cth_min')[0];

            var point = clock.getElementsByClassName('cth_point')[0];

            var date = this.date;

            var date_hour = this.addZoom(date.getHours()); //时
            var date_minutes = this.addZoom(date.getMinutes()); //分

            hour.innerHTML = date_hour;

            minute.innerHTML = date_minutes;

            var num = 0;

            var timer = setInterval(function () {

                    if (num % 2 == 1) {

                        point.style.visibility = 'visible';

                    } else {

                        point.style.visibility = 'hidden';

                    }

                    num++;

                },
                500);

            var This = this;

            var timer2 = setInterval(function () {

                    var date = new Date();

                    hour.innerHTML = This.addZoom(date.getHours());

                    minute.innerHTML = This.addZoom(date.getMinutes());

                },
                30000);

        },

        getDay: function ()
        {

            var clock = this.clock;

            var dates = clock.getElementsByClassName('cdm_date')[0];

            var day = clock.getElementsByClassName('cdm_day')[0];

            var month = clock.getElementsByClassName('cdm_month')[0];

            var date = this.date;

            var date_day = date.getDay(); //星期
            var date_date = date.getDate(); //日
            var date_month = date.getMonth(); //月

            dates.innerHTML = this.day[date_day];

            day.innerHTML = this.addZoom(date_date);

            month.innerHTML = this.month[date_month * 1];

        },

        addZoom: function (para)
        {

            var str = '';

            if (para < 10)
            {
                str = &#39;0&#39; + para;
            } else
            {
                str = para;
            }

            return str;

        }

    }

    DesktopTime = Time;

})(window);

Bien sûr, j'ai écrit la fonction de manière auto-exécutable. L'avantage est que cela évite la duplication de. variables. L'inconvénient bien sûr est qu'il est difficile d'obtenir la valeur dans la fonction Donc en attribuant la classe Time à la variable globale DesktopTime, le Time prototype est exposé indirectement, puis initialisé par l'appel.

Recommandations associées :

js pour réaliser une horloge circulaire

Utilisez HTML5 pour implémenter une apparence d'horloge simple

JavaScript pour implémenter une horloge

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!