JavaScript實(shí)現(xiàn)簡(jiǎn)單的星星評(píng)分效果
更新時(shí)間：2017年05月18日 09:51:53 作者：haozihaozi1234
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的星星評(píng)分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
大概實(shí)現(xiàn)思路就是用一張灰色的星星作為背景，然后讓有顏色的星星圖片定位在灰色的星星圖片上，控制有顏色星星圖片的寬度即可達(dá)到基本效果。如下圖：
下面上代碼：
<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>
<div class="starnone">
<div class="starWrap">
<div class="star" id="star"></div>
</div>
</div>
<div>
<input type="text" id="num"> %
<button id="ok">OK</button>
</div>
<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("請(qǐng)小于100");
return;
} else if(value<0){
alert("請(qǐng)大于0");
return;
}
star.style.width = value + "px";
}
}
</script>
</body>
</html>
用到的兩個(gè)圖片。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要為大家介紹了webpack打包的3種hash值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
javascript強(qiáng)制點(diǎn)擊廣告的方法
這篇文章主要介紹了javascript強(qiáng)制點(diǎn)擊廣告的方法,可用于下載站或文檔顯示站,實(shí)現(xiàn)點(diǎn)擊后才能出現(xiàn)相應(yīng)顯示的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
javascript小技巧 超強(qiáng)推薦...2006-08-08
這篇文章主要介紹了css與javascript跨瀏覽器兼容性,包括常見(jiàn)的css兼容性問(wèn)題與javascript兼容性問(wèn)題,以及IE與Firefox等常用瀏覽器的兼容性分析,需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細(xì)介紹了JS命令模式例子之菜單程序,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日歷效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼,以實(shí)例形式實(shí)現(xiàn)了包括Tab,選項(xiàng)卡,橫向等效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
下面小編就為大家?guī)?lái)一篇js判斷數(shù)組的最佳方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10