JavaScript implementiert die Kapselung eines einfachen elektronischen Uhrenkomponentencodes-js-Tutorial-php.cn

JavaScript implementiert die Kapselung eines einfachen elektronischen Uhrenkomponentencodes

小云云

Freigeben： 2018-03-15 09:31:30

Original

1803 Leute haben es durchsucht

Vor ein paar Tagen wollte ich in der oberen rechten Ecke meiner persönlichen Homepage eine verschiebbare elektronische Uhr hinzufügen, und während ich in diesen Tagen etwas Freizeit hatte, habe ich kurz die objektorientierte Programmierung besprochen, also habe ich etwas ausgegeben Zeit drauf. Es kam heraus und sah so aus:

Tatsächlich ist dieser Fall sehr einfach , verwenden Sie es einfach kurzDatum Klasse und Timer Dieses Beispiel dient natürlich nur der Überprüfung des Front-End-Wissens Es ist in einer Komponente gekapselt

Der Code lautet wie folgt:

(function (window, undefined) {

    function Time()
    {

        this.clock = null;

        this.date = new Date();

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

        this.day = [&#39;Sunday&#39;, &#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;];

        this.str = &#39;11:34 Tuesday30August &#39;;
    }

    Time.prototype = {

        constructor: &#39;Time&#39;,

        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(&#39;cth_hour&#39;)[0];

            var minute = clock.getElementsByClassName(&#39;cth_min&#39;)[0];

            var point = clock.getElementsByClassName(&#39;cth_point&#39;)[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 = &#39;visible&#39;;

                    } else {

                        point.style.visibility = &#39;hidden&#39;;

                    }

                    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(&#39;cdm_date&#39;)[0];

            var day = clock.getElementsByClassName(&#39;cdm_day&#39;)[0];

            var month = clock.getElementsByClassName(&#39;cdm_month&#39;)[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 = &#39;&#39;;

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

            return str;

        }

    }

    DesktopTime = Time;

})(window);

Nach dem Login kopieren

Natürlich habe ich die Funktion selbstausführend geschrieben. Der Vorteil davon ist, dass eine Duplizierung vermieden wird Der Nachteil besteht natürlich darin, dass es schwierig ist, den Wert in der Funktion zu erhalten, indem man der globalen Variablen Time zuweist >, der Zeit Prototyp wird indirekt offengelegt und dann durch den Aufruf initialisiert.
Verwandte Empfehlungen:

JS realisiert rund um die Uhr

Verwenden Sie HTML5, um ein einfaches Erscheinungsbild einer Uhr zu implementieren

JavaScript, um eine Uhr zu implementieren

Das obige ist der detaillierte Inhalt vonJavaScript implementiert die Kapselung eines einfachen elektronischen Uhrenkomponentencodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!