집 >웹 프론트엔드 >HTML 튜토리얼 >HTML로 카운터 및 시계 함수 코드를 구현하는 방법

HTML로 카운터 및 시계 함수 코드를 구현하는 방법

不言원래의: 2018-08-30 11:29:512707검색

이 문서의 내용은 HTML에서 카운터 및 시계 기능 코드를 구현하는 방법에 대한 것입니다. 특정 참조 값이 있으므로 도움이 될 수 있습니다.

많은 웹 페이지에서 카운터와 시계를 볼 수 있는데, 이 기능을 어떻게 직접 구현할 수 있을까요?

먼저 카운터에 대해 이야기해 보겠습니다. 카운터의 논리적 기능은 매우 간단합니다. 즉, 초침은 1초마다 1씩 증가하고 60마다 1씩 전진합니다. 코드는 다음과 같습니다.

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

이렇게 하면 간단한 카운터가 완성됩니다.

시계 기능 코드:

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

이제 시계가 완성되었습니다!

HTML로 카운터 및 시계 함수 코드를 구현하는 방법

관련 기사