조건
1. 카운트다운 시작 값은 100입니다.
2. 숫자는 1씩 줄어들며, 줄어드는 시간은 0.1초입니다.
3. 30이 되면 카운트다운이 멈추도록 하세요.
4. 줄어드는 도중에 마우스를 클릭해도 카운트다운이 멈추도록 하세요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head><title>setInterval</title>
<style>
span{
font-size: 50px;
}
</style>
</head>
<body>
<h3>숫자를 100부터 카운트하며 30초가 되면 멈춥니다.</h3>
<hr>
<div>
<span id="span_1" style="background-color:yellow">100</span>
</div>
<script>
let span_1 = document.getElementById("span_1");
let countS = parseInt(span_1.textContent);
let timerID = setInterval("doRotate()", 100);
function doRotate() {
span_1.textContent = countS;
countS--;
if(countS < 30){
clearInterval(timerID);
}
span_1.onclick = function (e) {
clearInterval(timerID);
}
}
</script>
</body>
</html>
|
cs |
결과값
'HTML, JAVASCRIPT' 카테고리의 다른 글
| javascript - for문을 활용하여 트리 만들기 (0) | 2022.06.14 |
|---|---|
| javascript - for문을 이용하여 표 안에 구구단 출력하기 (0) | 2022.06.13 |
| javascript - input 태그에 선언적 함수와 익명함수 연결하기 활용 (0) | 2022.05.13 |
| javascript - 반지름 값을 입력 받아 원의 둘레 구하기 (0) | 2022.05.12 |
| HTML, CSS, JavaScript, jQuery의 정의 (0) | 2022.05.10 |
댓글