HTML로 카운터 및 시계 함수 코드를 구현하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

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

不言

Aug 30, 2018 am 11:29 AM

시계 계수기

이 문서의 내용은 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>

로그인 후 복사

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

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7446

Cakephp 튜토리얼

1374

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

iPhone에 시계 앱이 없습니다. 해결 방법 May 03, 2024 pm 09:19 PM

휴대폰에 시계 앱이 없나요? 날짜와 시간은 iPhone의 상태 표시줄에 계속 표시됩니다. 그러나 시계 앱이 없으면 세계 시계, 스톱워치, 알람 시계 및 기타 여러 기능을 사용할 수 없습니다. 따라서 누락된 시계 앱을 수정하는 것이 해야 할 일 목록의 맨 위에 있어야 합니다. 이러한 솔루션은 이 문제를 해결하는 데 도움이 될 수 있습니다. 수정 1 - 시계 앱 배치 실수로 홈 화면에서 시계 앱을 제거한 경우 시계 앱을 다시 제자리에 배치할 수 있습니다. 1단계 – iPhone을 잠금 해제하고 앱 라이브러리 페이지에 도달할 때까지 왼쪽으로 스와이프합니다. 2단계 – 다음으로 검색창에 “시계”를 검색하세요. 3단계 – 검색 결과 아래에 “시계”가 표시되면 길게 누르고

iOS 17이 설치된 iPhone에서 여러 타이머를 사용하는 방법 Jun 21, 2023 am 08:18 AM

iOS17의 멀티 타이머란 무엇입니까? iOS17에서 Apple은 이제 사용자에게 iPhone에서 한 번에 여러 타이머를 설정할 수 있는 기능을 제공합니다. 이는 많은 사람들이 수년 동안 기다려온 환영할 만한 변화입니다. iOS 16 이전에는 사용자가 한 번에 하나의 타이머만 설정할 수 있었던 시계 앱을 이제 원하는 수의 타이머를 활성화하는 데 사용할 수 있으므로 한 번에 여러 작업을 완료하는 데 이상적입니다. 타이머 화면에서 타이머를 원하는 만큼 설정할 수 있습니다. 타이머가 시작되면 모든 활성 타이머가 잠금 화면 및 알림 센터에 "실시간 활동" 알림으로 표시됩니다. 여기에서 시계 앱을 열지 않고도 타이머가 꺼질 때까지 남은 시간을 확인하거나 타이머를 일시 중지하거나 중지할 수 있습니다. 당신이 시계에있을 때

iOS 17: 대기 모드에서 iPhone 시계 스타일을 변경하는 방법 Sep 10, 2023 pm 09:21 PM

대기는 iPhone이 충전기에 연결되어 있고 가로(또는 가로) 방향일 때 활성화되는 잠금 화면 모드입니다. 세 가지 화면으로 구성되어 있으며 그 중 하나는 전체 화면 시간으로 표시됩니다. 시계 스타일을 변경하는 방법을 알아보려면 계속 읽어보세요. StandBy의 세 번째 화면에는 수직으로 스와이프할 수 있는 다양한 테마의 시간과 날짜가 표시됩니다. 일부 테마에는 온도나 다음 알람과 같은 추가 정보도 표시됩니다. 시계를 길게 누르면 디지털, 아날로그, 세계, 태양광, 플로팅 등 다양한 테마 간에 전환할 수 있습니다. Float는 사용자 정의 가능한 색상의 큰 거품 숫자로 시간을 표시하고, Solar는 다양한 색상의 태양 플레어 디자인을 갖춘 보다 표준적인 글꼴을 가지며, World는 강조 표시하여 세계를 표시합니다.

iPhone에서 알람을 끄는 방법 [2023] Aug 21, 2023 pm 01:25 PM

스마트폰이 등장한 이후 스마트폰은 의심할 여지없이 알람시계를 대체해 왔습니다. iPhone을 소유하고 있다면 시계 앱을 사용하여 하루 종일 여러 상황에 대해 원하는 만큼의 알람을 쉽게 설정할 수 있습니다. 이 앱을 사용하면 알람 시간, 신호음, 반복 빈도, 스누즈 옵션을 사용하여 알람을 지연할지 여부를 구성할 수 있습니다. 설정한 알람을 끄고 싶다면 다음 게시물을 참조하여 iPhone에서 일반 알람과 모닝콜 알람을 비활성화하고 삭제하는 데 도움이 될 것입니다. iPhone에서 일반 알람을 끄는 방법 기본적으로 시계 앱에 알람을 추가하거나 Siri에게 알람 추가를 요청하면 실제로 일반 알람이 생성됩니다. iPhone에서 원하는 만큼의 알람 시계를 만들고 추가할 수 있습니다.

iOS 17에서 대기 색상을 사용자 정의하는 방법 Sep 23, 2023 pm 12:53 PM

Apple은 iOS 17에서 대기 모드라는 새로운 잠금 화면 모드를 제공합니다. 이 모드는 iPhone을 충전기(유선 또는 무선)에 연결하고 스탠드에 가로 방향으로 놓았을 때 활성화됩니다. 이 모드에서는 시계, 날씨 데이터, 달력, 일부 위젯을 표시하여 표준 잠금 화면보다 더 많은 정보를 한 눈에 볼 수 있습니다. 설정에서 이 기능을 활성화한 후 충전하는 동안 iPhone을 가로 방향으로 놓으면 자동으로 대기 모드로 전환됩니다. iOS 17 대기 모드에서 대기 색상을 변경하는 방법은 화면을 스와이프하여 앞뒤로 전환할 수 있는 세 가지 페이지(위젯, 사진, 시계) 세트를 제공합니다. 이 페이지 중 시계 화면에서만 화면에 표시되는 색상을 사용자 정의할 수 있습니다.

win10 컴퓨터 시계가 항상 정확하지 않으면 어떻게 해야 합니까? win10 컴퓨터 시간을 조정하는 몇 가지 방법이 있습니까? Mar 27, 2024 pm 05:10 PM

1. 먼저 시작 메뉴를 클릭하고 시작 메뉴에서 설정 버튼을 선택합니다. 2. 개봉 후, 시간과 언어 설정을 선택하세요. 3. 시간이 자동으로 설정되도록 변경하세요. 4. 자동 시간 설정을 끄고 변경하려는 시간을 선택할 수도 있습니다. 방법 2: 1. [기타 날짜, 시간 및 지역 설정] 옵션을 엽니다. 2. [시간 및 날짜 설정]을 선택하세요. 3. [인터넷 시간]을 선택하고 [설정 변경 옵션]을 엽니다. 4. [인터넷 시간 서버(S)와 동기화]를 선택하고 [지금 업데이트]를 클릭한 후 확인을 클릭하세요.

Redis를 사용하여 분산 카운터 구현 May 11, 2023 am 08:06 AM

분산 카운터란 무엇입니까? 분산 시스템에서는 여러 노드가 공통 상태를 업데이트하고 읽어야 하며, 카운터는 가장 널리 사용되는 상태 중 하나입니다. 일반인의 관점에서 카운터는 액세스할 때마다 값이 1씩 증가하거나 감소하는 변수입니다. 이는 특정 시스템의 진행 상황을 추적하는 데 사용되는 표시기입니다. 분산 카운터는 분산 환경에서 카운터를 운영하고 관리하는 것을 의미합니다. 분산 카운터를 구현하기 위해 Redis를 사용하는 이유는 무엇입니까? 분산 컴퓨팅의 인기로 인해 분산 시스템의 세부적인 문제도 많이 발생했습니다.

TikTok 라벨 뒤에 시계를 설정하는 방법은 무엇입니까? 트래픽을 유도하기 위해 태그를 설정하는 방법은 무엇입니까? Mar 25, 2024 pm 05:21 PM

세계에서 가장 인기 있는 단편 비디오 플랫폼 중 하나인 Douyin의 강력한 기능과 풍부한 게임 플레이로 인해 사용자는 쉽게 내려놓을 수 없습니다. Douyin에서는 작품에 태그를 추가하여 노출을 늘릴 수 있으며, 태그 뒤의 시계는 태그 아래 콘텐츠의 업데이트 시간을 알려줍니다. 그렇다면 Douyin 라벨 뒤에 시계를 설정하는 방법은 무엇입니까? 이 글에서는 Douyin 태그와 시계를 설정하는 방법, 태그를 통해 트래픽을 유도하는 방법을 자세히 소개합니다. 1. Douyin 라벨 뒤에 시계를 설정하는 방법은 무엇입니까? 1. Douyin을 열고 "만들기" 버튼을 클릭하여 비디오 편집 페이지로 들어갑니다. 2. 자료 선택 후 '다음'을 클릭하여 작품 공개 페이지로 이동합니다. 3. 작품 출판 페이지에서 작품 제목을 입력하고 '태그 추가'를 클릭하세요. 4. 라벨 페이지에서 추가하려는 라벨의 이름을 입력하세요.

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제