티스토리 뷰

HTML_CSS

HTML / CSS / Java script - (2021.03.30) 숫자증가

LHOIKTN 2021. 3. 30. 09:02

count.html
0.00MB

숫자 카운터. 

0부터 99까지, 숫자가 증가되는 모습이 화면에 출력.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            background: pink;
        }
        .number {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            font-size: 400px;
            list-style: none;
            text-align: center;
            margin-top: 100px;
            color: #333;
        }


    </style>
</head>
<body>
    <div class="number">99</div>
    
</body>
<script type="text/javascript">
	// 0부터 99까지 숫자를 증가시키며 화면에 출력 
	var cnt = 0;
          

	countUp();
    up = setInterval(countUp, 100);

    function countUp() {
        num= document.querySelector('.number');
        cnt++;
        if (cnt > 99) {
            clearInterval(up);
        } else {
            num.innerHTML=cnt;
        }
    }
		  
		
</script>
</html>
728x90

'HTML_CSS' 카테고리의 다른 글

롯데제과 클론코딩1  (0) 2021.04.01
HTML / CSS / Java script - javascript 변수  (0) 2021.03.31
HTML / CSS / Java script - (2021.03.29) 이미지 슬라이드  (0) 2021.03.29
HTML / CSS - 15 (2021.03.6)  (0) 2021.03.26
Java script - 7(2021.03.25) setInterval() clearInterval()  (0) 2021.03.25
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
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
글 보관함