JS를 사용하여 10ms까지 정확한 스톱워치 만들기(코드 첨부)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS를 사용하여 10ms까지 정확한 스톱워치 만들기(코드 첨부)

不言

Aug 07, 2018 am 11:44 AM

이 기사의 내용은 JS를 사용하여 10ms까지 정확할 수 있는 스톱워치 제작을 구현하는 내용입니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

이 기간 동안 js를 접하게 되었는데, 배운 지식을 활용하여 간단한 스톱워치를 만들고 싶습니다.

스톱워치를 만드는 아이디어는 다음과 같습니다.

1. 먼저 기능과 인터페이스를 결정합니다.

제 목적은 가장 간단한 스톱워치를 만드는 것이기 때문에 시작, 종료, 재설정 기능만 필요합니다. 인터페이스는 아래와 같습니다:

실행이 시작되지 않음:

실행 중:

2. 구현 방법을 구상합니다.

먼저 핵심 메소드는 단연 setInterval() 메소드로, 주기적으로 시간을 표시하는데 사용됩니다. 10ms까지 정확하게 하고 싶어서 시간 간격을 10으로 설정했습니다.

게다가 시간을 늘리는 방법은 무엇입니까?

A . 제가 생각하기 시작한 것은 변수 설정입니다. 밀리초, 초, 분, 시간입니다. milliSeconds는 10ms마다 1씩 증가합니다. milliSeconds >= 100인 경우 milliSeconds 모듈로 100을 사용하고 동시에 초는 1씩 증가합니다. 마찬가지로 초가 60에 도달하면 분은 1씩 증가하고 분이 60에 도달하면 시간은 1씩 증가합니다.

단, 형식의 통일성을 보장하기 위해(2:1:24:6이 아닌 02:01:24:06을 표시하고 싶습니다) 위와 같은 생각으로 4개의 변수를 8개의 변수로 변경했습니다. . (코드에 대해서는 이 페이지 끝에 있는 "지연이 있는 스톱워치"를 참조하십시오.)

단, 작동 중 딜레이 문제가 발생하여 딜레이가 누적됩니다. 시간이 짧을 때에도 비교적 정확하게 작동할 수 있습니다. 시간이 지남에 따라 스톱워치의 시간은 표준 시간에서 크게 벗어나게 됩니다.

비. 지연을 줄이기 위해 다른 방법을 설계했습니다(실제로 이 방법은 이전 방법보다 지연이 더 높습니다). 이때 트리거 시작을 기록하는 데는 하나의 시간 변수만 사용됩니다. 버튼을 누른 후 경과한 밀리초 수(시간은 10ms 단위, 아래의 a/b/c/d는 밀리초(10ms), 초, 분, 시를 나타냄). 형식의 통일성을 추구하기 위해 다음과 같이 덧붙였습니다. 명령문에서 a/b/c/d가 10보다 작으면 앞에 0 자리 표시자를 추가합니다.

var a=time%100;
var b=time%6000/100;
var c=time%360000/6000;
var d=time%8640000/36000;

로그인 후 복사

솔루션 A와 B를 비교하세요. A는 시간을 계산하기 위해 중첩된 형식을 사용하므로 시간이 짧을 경우 계획 A는 더 적은 판단이 필요하고 더 효율적이지만 계획 B의 경우 각 주기는 4번의 계산을 거쳐야 하므로 시간이 짧을 경우 효율성이 높아집니다. A보다 훨씬 낮습니다.

C .실시간과 오류없이 동기화하기 위해 다른 방법을 생각했습니다. JS Date 객체에는 1970년 1월 1일 이후의 밀리초 수를 반환하는 데 사용되는 getTime()이라는 메서드가 있습니다. start를 클릭하면 getTime()이 발생하는데, 이 시간을 기준으로 getTime()이 10밀리초마다 실행되며 전자에서 후자를 빼서 상대 시간을 구한다. 이러한 방식으로 실시간 동기화 문제가 완벽하게 해결됩니다.

아래 세 가지 코드가 첨부되어 있습니다.

Code 1

<!doctype html>
<html>
    <head>
        <title>有延迟的秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span10">0</span><span id="span11">0</span> :
            <span id="span20">0</span><span id="span21">0</span> :
            <span id="span30">0</span><span id="span31">0</span> :
            <span id="span40">0</span><span id="span41">0</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span41");
            var milliSeconds0 = document.getElementById("span40");
            var seconds1 = document.getElementById("span31");
            var seconds0 = document.getElementById("span30");
            var minutes1 = document.getElementById("span21");
            var minutes0 = document.getElementById("span20");
            var hours1 = document.getElementById("span11");
            var hours0 = document.getElementById("span10");
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    inputValue.value=" stop";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = milliSeconds0.innerHTML = 
                seconds1.innerHTML = seconds0.innerHTML = minutes1.innerHTML = 
                minutes0.innerHTML = hours1.innerHTML = hours0.innerHTML = 0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }

            function timeIncrement(){
                milliSeconds1.innerHTML++;
                if(milliSeconds1.innerHTML>=10){
                    milliSeconds1.innerHTML%=10;
                    milliSeconds0.innerHTML++;
                    if(milliSeconds0.innerHTML>=10){
                        milliSeconds0.innerHTML%=10;
                        seconds1.innerHTML++;
                        if(seconds1.innerHTML>=10){
                            seconds1.innerHTML%=10;
                            seconds0.innerHTML++;
                            if(seconds0.innerHTML>=6){
                                seconds0.innerHTML%=6
                                minutes1.innerHTML++;
                                if(minutes1.innerHTML>=10){
                                    minutes1.innerHTML%=10;
                                    minutes0.innerHTML++;
                                    if(minutes0.innerHTML>=6){
                                        minute0.innerHTML%=6;
                                        hours1.innerHTML++;
                                        if(hours1.innerHTML>=10){
                                            hours1.innerHTML%=10;
                                            hours0.innerHTML++;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            function stop1(){//  暂停/停止
                clearInterval(flag);
            }

        </script>
    </body>
</html>

로그인 후 복사

Code 2

<!doctype html>
<html>
    <head>
        <title>仍然有延迟的秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span1">00</span> :
            <span id="span2">00</span> :
            <span id="span3">00</span> :
            <span id="span4">00</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span4");
            var seconds1 = document.getElementById("span3");
            var minutes1 = document.getElementById("span2");
            var hours1 = document.getElementById("span1");
            var time = 0;
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    inputValue.value=" stop";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
                time=0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }

            function timeIncrement(){
                time++;
                var a=time%100;
                var b=time%6000/100;
                var c=time%360000/6000;
                var d=time%8640000/360000;
                milliSeconds1.innerHTML=(a<10)?(&#39;0&#39;+a):a;
                seconds1.innerHTML=(b<10)?(&#39;0&#39;+Math.floor(b)):(Math.floor(b));
                minutes1.innerHTML=(c<10)?(&#39;0&#39;+Math.floor(c)):(Math.floor(c));
                hours1.innerHTML=(d<10)?(&#39;0&#39;+Math.floor(d)):(Math.floor(d));
            }

            function stop1(){//  暂停/停止
                clearInterval(flag);
            }

        </script>
    </body>
</html>

로그인 후 복사

Code 3(시간과 동기화된 코드)

<!doctype html>
<html>
    <head>
        <title>秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span1">00</span> :
            <span id="span2">00</span> :
            <span id="span3">00</span> :
            <span id="span4">00</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span4");
            var seconds1 = document.getElementById("span3");
            var minutes1 = document.getElementById("span2");
            var hours1 = document.getElementById("span1");
            var time=0;
            var pre_time=0;
            var intervals=0;
            var pre_intervals=0;
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    var date= new Date();
                    time = date.getTime();
                    pre_time=time;
                    inputValue.value="stop ";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
                time=0;
                pre_time=0;
                intervals=0;
                pre_intervals=0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }
            
            function timeIncrement(){
                date = new Date();
                intervals=date.getTime()-time+pre_intervals;
                var a=intervals%1000/10;
                var b=intervals%60000/1000;
                var c=intervals%3600000/60000;
                var d=intervals/3600000;
                milliSeconds1.innerHTML=(a<10)?(&#39;0&#39;+Math.floor(a)):(Math.floor(a));
                seconds1.innerHTML=(b<10)?(&#39;0&#39;+Math.floor(b)):(Math.floor(b));
                minutes1.innerHTML=(c<10)?(&#39;0&#39;+Math.floor(c)):(Math.floor(c));
                hours1.innerHTML=(d<10)?(&#39;0&#39;+Math.floor(d)):(Math.floor(d));
            }

            function stop1(){//  暂停/停止
                date = new Date();
                pre_intervals += date.getTime()-pre_time;
                clearInterval(flag);
            }

        </script>
    </body>
</html>

로그인 후 복사

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

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

7698

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유 Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? Apr 04, 2025 pm 05:09 PM

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까? 또는: Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까? Apr 04, 2025 pm 05:36 PM

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

JavaScript는 배우기가 어렵습니까? Apr 03, 2025 am 12:20 AM

JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.