ホームページ > 記事 > ウェブフロントエンド > JavaScript での星評価効果の実装コード共有
JavaScript での星評価効果の実装コード共有
- 黄舟オリジナル
- 2017-05-21 11:38:541251ブラウズ
この記事では主に簡単な星評価効果を実現するJavaScriptを詳しく紹介します。興味のある方は参考にしてみてください
実装の一般的な考え方は、灰色の星を次のように使用することです。次に、色付きの星画像を灰色の星の画像上に配置し、色付きの星の画像の幅を制御して、基本的な効果を実現します。以下に示すように:
以下のコード:
<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>使用された 2 つの写真。
以上がJavaScript での星評価効果の実装コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：画像のページ閲覧例を詳しく解説次の記事：画像のページ閲覧例を詳しく解説