728x90
๋ฐ์ํ
JavaScript
์ซ์ ์นด์ดํธ ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ JS
/
" ์น์ฌ์ดํธ ํํ์ด์ง๋ฅผ ๋ณด๋ฉด
์ซ์๊ฐ ์ฌ๋ผ๊ฐ๋ฉด์ ์นด์ดํ ๋๋ฉด์
๊ณ ๊ฐ์ ์์ ์ ์ก๋ ํ์ด์ง๊ฐ ์๋๋ฐ,
JS ์นด์ดํธ ์ ๋๋ฉ์ด์ ์ผ๋ก ๊ตฌํ ๊ฐ๋ฅํฉ๋๋ค.โ๏ธ
๊ณ ๊ฐ์๊ฒ ์ดํํ ์ ์๋ ์ซ์ ์นด์ดํธ ๊ตฌํ ์ฝ๋์ ๋๋ค.๐"
/
โฌ๏ธโฌ๏ธโฌ๏ธ์์นด ํํ์ด์ง ์ซ์ ์นด์ดํ ์์โฌ๏ธโฌ๏ธโฌ๏ธ
โ ์ซ์ ์นด์ดํธ ์ ๋๋ฉ์ด์ Code
โช๏ธ HTML > CSS > JS
-
๐font : Montserrat
<!DOCTYPE html>
<html lang="ko">
<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>Number Count Animation</title>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
.section10 {
width: 100%;
height: 400px;
background: #f2f2f2;
}
.section10Text {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 35px;
line-height: 52px;
text-align: center;
letter-spacing: -0.08em;
/* border: 1px solid red; */
position: relative;
margin: 0;
top: 50%;
transform: translateY(-50%);
}
.colorBold,
.countNum {
color: #0071E3;
font-weight: 700;
}
.countBold {
font-weight: 700;
}
</style>
</head>
<body>
<div class="section10">
<p class="section10Text">
<span class="countNum">0</span>๋ช
์ ํ์์ด ์์นด์
<br>ํจ๊ปํ๊ณ ์์ต๋๋ค.
<br>์ง๊ธ ๋ฐ๋ก <span class="colorBold">์์นด ๋๋ผ์ด๋ธ</span>๋ฅผ ์์ํ์ธ์.
</p>
</div>
</body>
<script>
const counter = ($counter, max) => {
let now = max;
const handle = setInterval(() => {
$counter.innerHTML = Math.ceil(max - now);
// ๋ชฉํ์์น์ ๋๋ฌํ๋ฉด ์ ์ง
if (now < 1) {
clearInterval(handle);
}
// ์ฆ๊ฐ๋๋ ๊ฐ์ด ๊ณ์ํ์ฌ ์์์ง
const step = now / 10;
// ๊ฐ์ ์ ์ฉ์ํค๋ฉด์ ๋ค์ ์ฐจ๋ก์ ์ํฅ์ ๋ผ์นจ
now -= step;
}, 50);
}
window.onload = () => {
// ์นด์ดํธ๋ฅผ ์ ์ฉ์ํฌ ์์
const $counter = document.querySelector(".countNum");
// ๋ชฉํ ์์น
const max = 8599184;
setTimeout(() => counter($counter, max), 2000);
}
</script>
</html>
728x90
๋ฐ์ํ
'๐ปCoding > ๐ JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| JavaScript ์ซ์ ์ฝค๋ง : 3์๋ฆฌ๋ง๋ค ์ฝค๋ง ํ์ํ | ์๋ฐ์คํฌ๋ฆฝํธ JS (0) | 2023.03.18 |
|---|---|
| javascript_if_์กฐ๊ฑด๋ฌธ (0) | 2021.10.28 |
| JavaScript _HTML ์ปจํ ์ธ ๋ฅผ ๋ณ๊ฒฝํ๊ธฐ (0) | 2021.08.26 |
| JavaScript _ ์๋ฐ์คํฌ๋ฆฝํธ ์์ฑ ์์น์ ์ฐ๊ฒฐ๋ฐฉ๋ฒ (0) | 2021.08.23 |
| JavaScript _๋ฌธ๋ฒ + (์๋ฐ์คํฌ๋ฆฝํธ ๋ง๋ณด๊ธฐ) (0) | 2021.08.19 |