초보자가 Javascript 스톱워치를 만들려고 시도합니다.
면책 성명:
나는 과학 기술에 대해 아직 낯설기 때문에 만약 내가 어떤 잘못이 있다면 나를 바로잡고 내가 향상시킬 수 있는 자원을 공유해 주십시오.
저는 지난주 훈련소의 세미나를 수정할 수 있도록 보조 프로젝트를 하기로 했습니다. 중점은 구성 요소와 모듈화로 DOM 렌더링을 하는 것입니다.
기술 창고
디자인과 개념 창조
나는 내가 원하는 초시계Figma를 설계하기 시작했다. 나는 아래의 와이어프레임/디자인을 만들었다.
견본
내가 이루고자 하는 목표를 만든 후에 나는 나의 기본 템플릿을 만들기 시작했다.
내가 이루고자 하는 목표를 만든 후에 나는 나의 기본 템플릿을 만들기 시작했다.
main-container, header, timer-container 부분을 만들었다.나는 가끔 초시계를 타이머라고 부른다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
rel="stylesheet"
/>
<title>Stop Timer</title>
<link rel="stylesheet" href="stopwatch.css" />
<script defer type="module" src="stopwatch.js"></script>
</head>
<body>
<section class="main-container">
<header id="heading"></header>
<div id="timer-container"></div>
</section>
</body>
</html>
추상적createElement（）
그리고create element 함수를 만들고 HTML을 호출합니다 h.
다음 워크숍에서 이 작업을 수행하는 방법을 확인할 수 있습니다.
https://github.com/oliverjam/learn-dom-rendering
h() 함수를 만든 후, 나는 h() 함수를 계속 사용하여 stopwatch.js 의 요소를 DOM에 렌더링하고 타이머 용기 div에 추가합니다.
export default를 사용하여 h () 함수를stopwatch로 내보냅니다.js.스크립트에 코드를 연결하기 위해 모듈을 만들고 사용하는 것을 알 수 있도록 모듈type=module과 같은 형식을 표시합니다.
나는 내가 더 긴 길을 걸어서 물건을 창조하는 것처럼 보이지만, 위에서 링크된 세미나에서 가르친 일을 실현하기 위해 노력하고 있다는 것을 고려해 주십시오.
요소 생성 및 UI 구현
그리고 stopwatch()에서 stopwatch.js 함수를 만들었습니다. 저는 세 번째 줄createElement.js에서 h() 함수를 가져왔습니다.그리고 나는 단일 요소를 포함하는 변수를 만들고 이 요소를 timerContainer (23 줄) 변수의 하위 요소로 하고 6 줄에서 querySelector 를 사용하여 필요한 타이머 용기에 추가해서 보여 주었다.
이러한 요소를 렌더링하면 내 스톱워치는 다음과 같이 표시됩니다.
접근성 및 간격
용기가 뛰어넘는 위치와 거리를 직관적으로 확인할 수 있도록 테두리를 사용합니다.
초록색도 #6d884d에서 살짝 바꿨어요.⇒ #6d9b4d는 등대가 대비를 표시하기 때문에 현장에 더욱 쉽게 들어갈 수 있다.크롬 개발 도구에서lighthouse를 방문할 수 있습니다. 이것은 웹 사이트의 액세스 가능성에 대한 보고서를 제공합니다.색상이 충분한 명암비를 가질 때까지 스타일 섹션의 개발 도구에서 명암비를 변경할 수도 있습니다.
검사하다⇒ 원소⇒ 스타일⇒ * 체크할 요소를 클릭하고 명암비가 올바르게 표시될 때까지 색상을 변경합니다*
Image Source
그리고 나서 나는 단추를 완전히 잊어버렸기 때문에 단추와 페이지 제목을 만들고 보여주는 것으로 되돌아갔다.
버튼과 제목을 만들면 내 초시계는 다음과 같다.
그래서 현재 나의 응용 프로그램은 매우 아름답지만 기능이 없다.
나의 다음 단계는 함수를 만드는 것이다. 이 함수는 내가 유튜브 튜토리얼을 사용하여 지도하는 시간을 대체할 것이다.
시간 변수
필요한 함수를 만들기 전에 초, 분, 시간 (초, 분, 시간) 의 변수를 만들고 0 으로 설정해야 합니다.
startTime() 함수
나는 함수를 만들 때부터 초, 분, 시간을 늘릴 수 있도록 했다.초와 분에 대해if문장의 조건은 59보다 작으면 지정한 계수기를 증가하지만, 59보다 크면 이 계수는 0으로 설정하고 비교적 높은 시간 계수를 증가시킨다.
따라서 59초(00:00:59)면 1분 후, 초계수기는 0으로 돌아가고, 최소값은 +1(00:01:00) 증가합니다.시간의 조건은 시간의 수가 24시간보다 적으면 점차적으로 증가하지만, 시간의 수가 24시간을 초과하면 0으로 재설정해야 한다는 것이다.
if 문장의 코드 블록에서 "00"을 선택하고 인쇄 기능을 통해 텍스트 내용을 변경합니다.
Print() 함수
print 함수는 값 (val) 을 매개 변수로 합니다.값이 9보다 작거나 같으면 함수가'0'+ 지정한 값을 되돌려야 한다는 if 문장이 있습니다.값이 인 경우3초 후 print () 는 "03"으로 돌아갑니다.
Start(), Reset() 및 Pause() 함수
시작 및 일시 정지 기능의 경우 getElementById() 을 사용하여 시작 단추를 선택하고 이 단추는 시작할 때 비활성화되거나 (중복 클릭을 방지하기 위해) 스톱워치가 일시 정지될 때 활성화되어 다시 시작할 수 있습니다.
시작 ()
시작 기능에서 간격은 1000ms=1s 때문에 1000ms로 설정됩니다.나는 setInterval()이 실제로 어떻게 일을 했는지 궁금하다. 나는 주로 설정된 시간에 무엇을 했는지 궁금하다.정답이 뭐예요?이름에 있음;)
setInterval은 리셋 함수를 매개 변수로 하고 설정된 간격 후에 이 함수를 실행합니다.따라서 1000ms를 입력하면 초당 이 함수를 실행합니다.
우리의 예에서, 우리는 설정된 시간 변수가 증가하고, 이 값을'00'요소에 인쇄하기를 희망한다.
Pause() 함수
pause () 함수에서, 우리는 clearInterval() 과 setInterval 변수 t 를 매개 변수로 사용하여 간격을 지웁니다.
Reset() 함수
리셋 함수에서 우리는 간격을 지우고 시간 변수 (초, 분, 시간) 를 0으로 리셋하고 "00"h2 요소의 텍스트 내용을 바꿉니다.
이 함수를 완성한 후에 제가 해야 할 일은 DOM에서 단추 querySelector() 를 선택하고'클릭'이벤트 탐지기를 만들어서 start (), pause (), reset () 함수를 매개 변수로 하는 것입니다.
몇몇 프로그래머의 오류를 복구한 후, 나는 기능이 상당히 좋은 초시계를 하나 가지고 있다.
나의 결과
Click here to view my stopwatch.
제가 뭘 놓쳤는지 말씀해 주세요.
너는 나의 원본 코드here를 볼 수 있다.
Reference
이 문제에 관하여(초보자가 Javascript 스톱워치를 만들려고 시도합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ephieo/beginners-attempt-at-creating-a-javascript-stopwatch-4kg6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
그리고
stopwatch()에서 stopwatch.js 함수를 만들었습니다. 저는 세 번째 줄createElement.js에서 h() 함수를 가져왔습니다.그리고 나는 단일 요소를 포함하는 변수를 만들고 이 요소를 timerContainer (23 줄) 변수의 하위 요소로 하고 6 줄에서 querySelector 를 사용하여 필요한 타이머 용기에 추가해서 보여 주었다. 이러한 요소를 렌더링하면 내 스톱워치는 다음과 같이 표시됩니다.
접근성 및 간격
용기가 뛰어넘는 위치와 거리를 직관적으로 확인할 수 있도록 테두리를 사용합니다.
초록색도 #6d884d에서 살짝 바꿨어요.⇒ #6d9b4d는 등대가 대비를 표시하기 때문에 현장에 더욱 쉽게 들어갈 수 있다.크롬 개발 도구에서lighthouse를 방문할 수 있습니다. 이것은 웹 사이트의 액세스 가능성에 대한 보고서를 제공합니다.색상이 충분한 명암비를 가질 때까지 스타일 섹션의 개발 도구에서 명암비를 변경할 수도 있습니다.
검사하다⇒ 원소⇒ 스타일⇒ * 체크할 요소를 클릭하고 명암비가 올바르게 표시될 때까지 색상을 변경합니다*
Image Source
그리고 나서 나는 단추를 완전히 잊어버렸기 때문에 단추와 페이지 제목을 만들고 보여주는 것으로 되돌아갔다.
버튼과 제목을 만들면 내 초시계는 다음과 같다.
그래서 현재 나의 응용 프로그램은 매우 아름답지만 기능이 없다.
나의 다음 단계는 함수를 만드는 것이다. 이 함수는 내가 유튜브 튜토리얼을 사용하여 지도하는 시간을 대체할 것이다.
시간 변수
필요한 함수를 만들기 전에 초, 분, 시간 (초, 분, 시간) 의 변수를 만들고 0 으로 설정해야 합니다.
startTime() 함수
나는 함수를 만들 때부터 초, 분, 시간을 늘릴 수 있도록 했다.초와 분에 대해if문장의 조건은 59보다 작으면 지정한 계수기를 증가하지만, 59보다 크면 이 계수는 0으로 설정하고 비교적 높은 시간 계수를 증가시킨다.
따라서 59초(00:00:59)면 1분 후, 초계수기는 0으로 돌아가고, 최소값은 +1(00:01:00) 증가합니다.시간의 조건은 시간의 수가 24시간보다 적으면 점차적으로 증가하지만, 시간의 수가 24시간을 초과하면 0으로 재설정해야 한다는 것이다.
if 문장의 코드 블록에서 "00"을 선택하고 인쇄 기능을 통해 텍스트 내용을 변경합니다.
Print() 함수
print 함수는 값 (val) 을 매개 변수로 합니다.값이 9보다 작거나 같으면 함수가'0'+ 지정한 값을 되돌려야 한다는 if 문장이 있습니다.값이 인 경우3초 후 print () 는 "03"으로 돌아갑니다.
Start(), Reset() 및 Pause() 함수
시작 및 일시 정지 기능의 경우 getElementById() 을 사용하여 시작 단추를 선택하고 이 단추는 시작할 때 비활성화되거나 (중복 클릭을 방지하기 위해) 스톱워치가 일시 정지될 때 활성화되어 다시 시작할 수 있습니다.
시작 ()
시작 기능에서 간격은 1000ms=1s 때문에 1000ms로 설정됩니다.나는 setInterval()이 실제로 어떻게 일을 했는지 궁금하다. 나는 주로 설정된 시간에 무엇을 했는지 궁금하다.정답이 뭐예요?이름에 있음;)
setInterval은 리셋 함수를 매개 변수로 하고 설정된 간격 후에 이 함수를 실행합니다.따라서 1000ms를 입력하면 초당 이 함수를 실행합니다.
우리의 예에서, 우리는 설정된 시간 변수가 증가하고, 이 값을'00'요소에 인쇄하기를 희망한다.
Pause() 함수
pause () 함수에서, 우리는 clearInterval() 과 setInterval 변수 t 를 매개 변수로 사용하여 간격을 지웁니다.
Reset() 함수
리셋 함수에서 우리는 간격을 지우고 시간 변수 (초, 분, 시간) 를 0으로 리셋하고 "00"h2 요소의 텍스트 내용을 바꿉니다.
이 함수를 완성한 후에 제가 해야 할 일은 DOM에서 단추 querySelector() 를 선택하고'클릭'이벤트 탐지기를 만들어서 start (), pause (), reset () 함수를 매개 변수로 하는 것입니다.
몇몇 프로그래머의 오류를 복구한 후, 나는 기능이 상당히 좋은 초시계를 하나 가지고 있다.
나의 결과
Click here to view my stopwatch.
제가 뭘 놓쳤는지 말씀해 주세요.
너는 나의 원본 코드here를 볼 수 있다.
Reference
이 문제에 관하여(초보자가 Javascript 스톱워치를 만들려고 시도합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ephieo/beginners-attempt-at-creating-a-javascript-stopwatch-4kg6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
나는 함수를 만들 때부터 초, 분, 시간을 늘릴 수 있도록 했다.초와 분에 대해if문장의 조건은 59보다 작으면 지정한 계수기를 증가하지만, 59보다 크면 이 계수는 0으로 설정하고 비교적 높은 시간 계수를 증가시킨다.
따라서 59초(00:00:59)면 1분 후, 초계수기는 0으로 돌아가고, 최소값은 +1(00:01:00) 증가합니다.시간의 조건은 시간의 수가 24시간보다 적으면 점차적으로 증가하지만, 시간의 수가 24시간을 초과하면 0으로 재설정해야 한다는 것이다.
if 문장의 코드 블록에서 "00"을 선택하고 인쇄 기능을 통해 텍스트 내용을 변경합니다.
Print() 함수
print 함수는 값 (val) 을 매개 변수로 합니다.값이 9보다 작거나 같으면 함수가'0'+ 지정한 값을 되돌려야 한다는 if 문장이 있습니다.값이 인 경우3초 후 print () 는 "03"으로 돌아갑니다.
Start(), Reset() 및 Pause() 함수
시작 및 일시 정지 기능의 경우 getElementById() 을 사용하여 시작 단추를 선택하고 이 단추는 시작할 때 비활성화되거나 (중복 클릭을 방지하기 위해) 스톱워치가 일시 정지될 때 활성화되어 다시 시작할 수 있습니다.
시작 ()
시작 기능에서 간격은 1000ms=1s 때문에 1000ms로 설정됩니다.나는 setInterval()이 실제로 어떻게 일을 했는지 궁금하다. 나는 주로 설정된 시간에 무엇을 했는지 궁금하다.정답이 뭐예요?이름에 있음;)
setInterval은 리셋 함수를 매개 변수로 하고 설정된 간격 후에 이 함수를 실행합니다.따라서 1000ms를 입력하면 초당 이 함수를 실행합니다.
우리의 예에서, 우리는 설정된 시간 변수가 증가하고, 이 값을'00'요소에 인쇄하기를 희망한다.
Pause() 함수
pause () 함수에서, 우리는 clearInterval() 과 setInterval 변수 t 를 매개 변수로 사용하여 간격을 지웁니다.
Reset() 함수
리셋 함수에서 우리는 간격을 지우고 시간 변수 (초, 분, 시간) 를 0으로 리셋하고 "00"h2 요소의 텍스트 내용을 바꿉니다.
이 함수를 완성한 후에 제가 해야 할 일은 DOM에서 단추 querySelector() 를 선택하고'클릭'이벤트 탐지기를 만들어서 start (), pause (), reset () 함수를 매개 변수로 하는 것입니다.
몇몇 프로그래머의 오류를 복구한 후, 나는 기능이 상당히 좋은 초시계를 하나 가지고 있다.
나의 결과
Click here to view my stopwatch.
제가 뭘 놓쳤는지 말씀해 주세요.
너는 나의 원본 코드here를 볼 수 있다.
Reference
이 문제에 관하여(초보자가 Javascript 스톱워치를 만들려고 시도합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ephieo/beginners-attempt-at-creating-a-javascript-stopwatch-4kg6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
시작 및 일시 정지 기능의 경우
getElementById() 을 사용하여 시작 단추를 선택하고 이 단추는 시작할 때 비활성화되거나 (중복 클릭을 방지하기 위해) 스톱워치가 일시 정지될 때 활성화되어 다시 시작할 수 있습니다.시작 ()
시작 기능에서 간격은 1000ms=1s 때문에 1000ms로 설정됩니다.나는
setInterval()이 실제로 어떻게 일을 했는지 궁금하다. 나는 주로 설정된 시간에 무엇을 했는지 궁금하다.정답이 뭐예요?이름에 있음;)setInterval은 리셋 함수를 매개 변수로 하고 설정된 간격 후에 이 함수를 실행합니다.따라서 1000ms를 입력하면 초당 이 함수를 실행합니다.
우리의 예에서, 우리는 설정된 시간 변수가 증가하고, 이 값을'00'요소에 인쇄하기를 희망한다.
Pause() 함수
pause () 함수에서, 우리는
clearInterval() 과 setInterval 변수 t 를 매개 변수로 사용하여 간격을 지웁니다.Reset() 함수
리셋 함수에서 우리는 간격을 지우고 시간 변수 (초, 분, 시간) 를 0으로 리셋하고 "00"h2 요소의 텍스트 내용을 바꿉니다.
이 함수를 완성한 후에 제가 해야 할 일은 DOM에서 단추
querySelector() 를 선택하고'클릭'이벤트 탐지기를 만들어서 start (), pause (), reset () 함수를 매개 변수로 하는 것입니다. 몇몇 프로그래머의 오류를 복구한 후, 나는 기능이 상당히 좋은 초시계를 하나 가지고 있다.
나의 결과
Click here to view my stopwatch.
제가 뭘 놓쳤는지 말씀해 주세요.
너는 나의 원본 코드here를 볼 수 있다.
Reference
이 문제에 관하여(초보자가 Javascript 스톱워치를 만들려고 시도합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ephieo/beginners-attempt-at-creating-a-javascript-stopwatch-4kg6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(초보자가 Javascript 스톱워치를 만들려고 시도합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ephieo/beginners-attempt-at-creating-a-javascript-stopwatch-4kg6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
