JavaScript는 간단한 전자 시계 구성 요소 코드의 캡슐화를 구현합니다.

몇일 전 개인 홈페이지 오른쪽 상단에 드래그 앤 드롭 전자시계를 추가하고 싶어서 요즘 시간이 좀 나면 객체지향 프로그래밍에 대해 간략하게 복습하다가 시간을 보냈습니다.

사실 이 경우는 Date 클래스와 타이머를 사용하는 매우 간단합니다. 단지 프론트엔드 지식을 복습하고 그것을 캡슐화하기 위해 컴포넌트를 만들었습니다

코드는 다음과 같습니다.

(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);

물론 함수 자체 실행을 통해 함수를 작성했다는 것이 장점입니다. 물론 변수의 중복을 방지한다는 점은 함수에서 값을 가져오기가 어렵다는 것입니다. 따라서 Time 클래스를 전역 변수 DesktopTime에 할당하면 Prototype이 됩니다. of Time이 간접적으로 노출된 후 호출이 초기화됩니다.

관련 권장 사항:

js를 사용하여 둥근 시계 구현

html5를 사용하여 간단한 시계 모양 구현

JavaScript를 사용하여 시계 구현

위 내용은 JavaScript는 간단한 전자 시계 구성 요소 코드의 캡슐화를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!