지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

不言
풀어 주다： 2018-08-07 11:44:45
원래의
2120명이 탐색했습니다.

이 기사의 내용은 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>
로그인 후 복사

추천 관련 기사 :


위 내용은 JS를 사용하여 10ms까지 정확한 스톱워치 만들기(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
JS秒表
원천：php.cn
이전 기사：js에서 파일 업로드 진행 상황을 얻는 방법은 무엇입니까? 파일 업로드 진행 상황을 가져오는 js 코드 다음 기사：jQuery는 사격을 어떻게 구현하나요? 사격 효과를 얻기 위한 jQuery 코드
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Nuxt.js로 생성된 대시보드를 배포하기 위해 SSG를 사용해야 합니까? Nuxt.js를 사용하여 내부용 대시보드를 개발하겠습니다. 내부 대시보드이므로 범용 스키마가 필요하지 않습니다. 일반적으로 대부분의 대시보드는 SPA에서 개발됩니...
에서 2024-04-06 13:17:44
0
1
493
수정된 제목: 체크박스 선택에 따라 합계 계산 저는 간단한 금융 추적 애플리케이션을 개발 중입니다. 애플리케이션에는 모든 비용 청구서가 포함된 테이블이 있고 테이블 외부에 총 금액이 표시됩니다. JS 또는 A...
에서 2024-04-04 13:45:50
0
1
3465
SQL 테이블(SQL/C++)의 정렬되지 않은 맵에서 누락된 값을 채우는 효율적인 방법 질문 현재 SQL 테이블의 고유 식별자(id)와 그에 연결된 데이터 세트를 순서가 지정되지 않은 맵으로 읽어들이는 시스템이 있습니다. 이러한 데이터 세트는 id1...
에서 2024-04-04 11:47:44
0
1
345
Postman에서 JavaScript를 사용하여 보낸 메시지에 액세스할 수 없습니다. 아래 코드를 사용하여 post 메서드로 MySQL 테이블에 정보를 입력할 수 있으며 해당 정보는 테이블에 기록됩니다. js 터미널에서도 확인합니다. "n...
에서 2024-04-03 22:02:38
0
1
304
쿼리의 두 값이 동일한지 확인하여 쿼리 속도를 매우 느리게 만듭니다. 내 목표: 건물이 건설되고 있는 모든 지역을 쿼리하고 제공합니다. 내 문제: 모든 건물을 동일한 건물과 비교하면(upgrade_id 비교) 쿼리가 영원히 계속됩니...
에서 2024-04-03 19:06:32
0
1
288
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿