In diesem Artikel wird hauptsächlich JavaScript vorgestellt, um einen einfachen Sternebewertungseffekt im Detail zu erzielen. Es hat einen gewissen Referenzwert.
Die allgemeine Idee der Implementierung besteht darin, ein Grau zu verwenden Sterne als Hintergrund, positionieren Sie dann die farbigen Sternbilder auf den grauen Sternbildern und steuern Sie die Breite der farbigen Sternbilder, um den Grundeffekt zu erzielen. Wie unten gezeigt:
Der Code unten:
<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>Es werden zwei Bilder verwendet.
[Verwandte Empfehlungen]
1 Javascript kostenloses Video-Tutorial
2 >Wie JS bestimmt, ob Text in voller oder halber Breite vorliegt
3nodejs+websocket vervollständigt eine Chat-Systemfunktion
4.Js schließt den Countdown-Zeitdifferenzeffekt ab
5. Detaillierte Erläuterung der Methode zum rekursiven Löschen von Elementen in einem Array in JSDas obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Vervollständigung der Sternebewertungsfunktion durch JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
