Maison > Article > interface Web > Partage de code d'implémentation de l'effet de notation par étoiles en JavaScript
Partage de code d'implémentation de l'effet de notation par étoiles en JavaScript
- 黄舟original
- 2017-05-21 11:38:541194parcourir
Cet article présente principalement en détail JavaScript pour obtenir un simple effet de notation par étoiles, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer aux idées générales de mise en œuvre de
Utilisez simplement un gris. étoile comme arrière-plan, puis positionnez l'image de l'étoile colorée sur l'image de l'étoile grise et contrôlez la largeur de l'image de l'étoile colorée pour obtenir l'effet de base. Comme indiqué ci-dessous :
Le code ci-dessous :
<html>
<head>
<meta charset="UTF-8">
<title>星星</title>
<style>
.starnone,.starWrap{
width: 100px;
height: 20px;
}
.starnone{
position: relative;
background: url(stars-none20px.png) no-repeat;
}
.star{
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 20px;
background: url(stars20px.png) no-repeat;
}
#num{
width: 30px;
}
</style>
</head>
<body>
<p class="starnone">
<p class="starWrap">
<p class="star" id="star"></p>
</p>
</p>
<p>
<input type="text" id="num"> %
<button id="ok">OK</button>
</p>
<script>
window.onload = function(){
var star = document.getElementById("star");
var okBtn = document.getElementById("ok");
var num = document.getElementById("num");
okBtn.onclick = function(){
var value = parseFloat(num.value);
if (value>100) {
alert("请小于100");
return;
} else if(value<0){
alert("请大于0");
return;
}
star.style.width = value + "px";
}
}
</script>
</body>
</html>Deux images utilisées.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!