반응형
웹사이트에 나와있는 것들도 있는데
나중에 1 2 3 4 5 점 다 데이터베이스로 넘기는 걸
어떻게 참조해야 할지 몰라서 그냥 만들었다..
간단하다!!
참고 : www.w3schools.com/howto/tryit.asp?filename=tryhow_css_star_rating
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
color: orange;
}
</style>
</head>
<body>
<h2>Star Rating</h2>
<span id = "star1" class="fa fa-star" onclick = "clickstar1()"></span>
<span id = "star2" class="fa fa-star" onclick = "clickstar2()"></span>
<span id = "star3" class="fa fa-star" onclick = "clickstar3()"></span>
<span id = "star4" class="fa fa-star" onclick = "clickstar4()"></span>
<span id = "star5" class="fa fa-star" onclick = "clickstar5()"></span>
<script>
function clickstar1() {
document.getElementById('star1').setAttribute("class", "fa fa-star checked");
document.getElementById('star2').setAttribute("class", "fa fa-star");
document.getElementById('star3').setAttribute("class", "fa fa-star");
document.getElementById('star4').setAttribute("class", "fa fa-star");
document.getElementById('star5').setAttribute("class", "fa fa-star");
}
function clickstar2(){
document.getElementById('star1').setAttribute("class", "fa fa-star checked");
document.getElementById('star2').setAttribute("class", "fa fa-star checked");
document.getElementById('star3').setAttribute("class", "fa fa-star");
document.getElementById('star4').setAttribute("class", "fa fa-star");
document.getElementById('star5').setAttribute("class", "fa fa-star");
}
function clickstar3(){
document.getElementById('star1').setAttribute("class", "fa fa-star checked");
document.getElementById('star2').setAttribute("class", "fa fa-star checked");
document.getElementById('star3').setAttribute("class", "fa fa-star checked");
document.getElementById('star4').setAttribute("class", "fa fa-star");
document.getElementById('star5').setAttribute("class", "fa fa-star");
}
function clickstar4(){
document.getElementById('star1').setAttribute("class", "fa fa-star checked");
document.getElementById('star2').setAttribute("class", "fa fa-star checked");
document.getElementById('star3').setAttribute("class", "fa fa-star checked");
document.getElementById('star4').setAttribute("class", "fa fa-star checked");
document.getElementById('star5').setAttribute("class", "fa fa-star");
}
function clickstar5(){
document.getElementById('star1').setAttribute("class", "fa fa-star checked");
document.getElementById('star2').setAttribute("class", "fa fa-star checked");
document.getElementById('star3').setAttribute("class", "fa fa-star checked");
document.getElementById('star4').setAttribute("class", "fa fa-star checked");
document.getElementById('star5').setAttribute("class", "fa fa-star checked");
}
</script>
</body>
</html>반응형
'HTML, CSS' 카테고리의 다른 글
| CSS로 글자 수직정렬하기 (0) | 2021.02.05 |
|---|---|
| [HTML] 비디오를 첨부했는데 재생 버튼이 안 나올 때(controls) (0) | 2021.02.05 |
| display: inline-block; 정렬! (0) | 2021.01.29 |
| placeholder 안에서 Enter 하기 (0) | 2021.01.28 |
| 글자 빼고 배경만 투명하게 하고 싶을 때 (opacity 아님 주의) (0) | 2021.01.28 |