Heim > Artikel > Web-Frontend > Implementierung des Code-Sharings des Sternebewertungseffekts in JavaScript
Implementierung des Code-Sharings des Sternebewertungseffekts in JavaScript
- 黄舟Original
- 2017-05-21 11:38:541196Durchsuche
In diesem Artikel wird hauptsächlich JavaScript ausführlich vorgestellt, um einen einfachen Sternebewertungseffekt zu erzielen, der einen gewissen Referenzwert hat. Interessierte Freunde können sich auf die allgemeinen Implementierungsideen von
beziehen. Verwenden Sie einfach ein Grau Stern als Hintergrund, positionieren Sie dann das farbige Sternbild auf dem grauen Sternbild und steuern Sie die Breite des farbigen Sternbilds, 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.
Das obige ist der detaillierte Inhalt vonImplementierung des Code-Sharings des Sternebewertungseffekts in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!