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