안녕하세요. 오늘은 회색 별을 드래그 했을 때 노란색으로 채워지는 기능을 만들어 보겠습니다.
star.html
<!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>별점</title>
<script defer src="star.js"></script>
<link rel="stylesheet" href="star.css">
</head>
<body>
<div class="rating_box">
<div class="rating">
★★★★★
<span class="rating_star">★★★★★</span>
<input type="range" value="1" step="1" min="0" max="10">
</div>
</div>
</body>
</html>
star.css
.rating_box {
display: flex;
}
.rating {
position: relative;
color: #ddd;
font-size: 30px;
text-align: center;
}
.rating input {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.rating_star {
width: 0;
color: #ffc107;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
pointer-events: none;
}
star.js
const rating_input = document.querySelector('.rating input');
const rating_star = document.querySelector('.rating_star');
// 별점 드래그 할 때
rating_input.addEventListener('input', () => {
rating_star.style.width = `${rating_input.value * 10}%`;
});
결과
'JavaScript' 카테고리의 다른 글
| Day.js를 활용하여 날짜 및 시간 조작 (0) | 2023.01.01 |
|---|---|
| [ JavaScript ] Chart.js 라이브러리 사용해서 복합(막대, 라인) 그래프 그리기 (2) | 2022.12.28 |
| [ JavaScript ] Chart.js 라이브러리 사용해서 막대 그래프 그리기 (0) | 2022.12.17 |
| [ JavaScript ] moment.js 라이브러리 사용해보기 (0) | 2022.12.11 |
| [javascript] collapsible 테이블 만들기. (0) | 2022.12.08 |
