javascript 星級(jí)評(píng)分效果(手寫)
更新時(shí)間：2012年12月24日 17:21:25 作者：
今天上午抽空隨手寫了個(gè)星級(jí)評(píng)分的效果，給大家分享下。由于水平有限，如有問題請(qǐng)指出;首先要準(zhǔn)備一張星星的圖片，灰色是默認(rèn)狀態(tài)，黃色是選擇狀態(tài)，需要的朋友可以參考下
今天上午抽空隨手寫了個(gè)星級(jí)評(píng)分的效果，給大家分享下。由于水平有限，如有問題請(qǐng)指出。
首先要準(zhǔn)備一張星星的圖片，灰色是默認(rèn)狀態(tài)，黃色是選擇狀態(tài)。如圖：
最后附上代碼：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>javascript星級(jí)評(píng)分</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;}
p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;}
</style>
</head>
<body>
<div class="wrapper">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<p></p>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var star = document.getElementsByTagName('a');
var oDiv = document.getElementsByTagName('div')[0];
var temp = 0;
for(var i = 0, len = star.length; i < len; i++){
star[i].index = i;
star[i].onmouseover = function(){
clear();
for(var j = 0; j < this.index + 1; j++){
star[j].style.backgroundPosition = '0 0';
}
}
star[i].onmouseout = function(){
for(var j = 0; j < this.index + 1; j++){
star[j].style.backgroundPosition = '0 -20px';
}
current(temp);
}
star[i].onclick = function(){
temp = this.index + 1;
document.getElementsByTagName('p')[0].innerHTML = temp + ' 顆星';
current(temp);
}
}
//清除所有
function clear(){
for(var i = 0, len = star.length; i < len; i++){
star[i].style.backgroundPosition = '0 -20px';
}
}
//顯示當(dāng)前第幾顆星
function current(temp){
for(var i = 0; i < temp; i++){
star[i].style.backgroundPosition = '0 0';
}
}
};
</script>
附上下載地址
PS：這是本人閑著無(wú)聊，通過自己所學(xué)的 javascript 知識(shí)，隨意寫的一些效果。
首先要準(zhǔn)備一張星星的圖片，灰色是默認(rèn)狀態(tài)，黃色是選擇狀態(tài)。如圖：
最后附上代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>javascript星級(jí)評(píng)分</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;}
p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;}
</style>
</head>
<body>
<div class="wrapper">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<p></p>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var star = document.getElementsByTagName('a');
var oDiv = document.getElementsByTagName('div')[0];
var temp = 0;
for(var i = 0, len = star.length; i < len; i++){
star[i].index = i;
star[i].onmouseover = function(){
clear();
for(var j = 0; j < this.index + 1; j++){
star[j].style.backgroundPosition = '0 0';
}
}
star[i].onmouseout = function(){
for(var j = 0; j < this.index + 1; j++){
star[j].style.backgroundPosition = '0 -20px';
}
current(temp);
}
star[i].onclick = function(){
temp = this.index + 1;
document.getElementsByTagName('p')[0].innerHTML = temp + ' 顆星';
current(temp);
}
}
//清除所有
function clear(){
for(var i = 0, len = star.length; i < len; i++){
star[i].style.backgroundPosition = '0 -20px';
}
}
//顯示當(dāng)前第幾顆星
function current(temp){
for(var i = 0; i < temp; i++){
star[i].style.backgroundPosition = '0 0';
}
}
};
</script>
附上下載地址
PS：這是本人閑著無(wú)聊，通過自己所學(xué)的 javascript 知識(shí)，隨意寫的一些效果。
相關(guān)文章
JS實(shí)現(xiàn)含有中文字符串的友好截取功能分析
這篇文章主要介紹了JS實(shí)現(xiàn)含有中文字符串的友好截取功能,結(jié)合實(shí)例形式分析了JS針對(duì)含有中文的字符串截取操作相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了淺談javascript中replace()方法，replace函數(shù)方法是返回根據(jù)正則表達(dá)式進(jìn)行文字替換后的字符串的復(fù)制，需要的朋友可以參考下2015-11-11
這篇文章主要是對(duì)Javascript對(duì)象屬性方法進(jìn)行了詳細(xì)的匯總介紹。需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要給大家介紹了關(guān)于微信小程序位置授權(quán)處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
基于JavaScript實(shí)現(xiàn)多級(jí)菜單效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)多級(jí)菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細(xì)介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JS有一定幫助，需要的可以參考一下
2022-08-08 
網(wǎng)頁(yè)廣告中JS代碼的信息監(jiān)聽示例
在一些網(wǎng)頁(yè)廣告中提供的JS代碼可以進(jìn)行代碼注入，然后監(jiān)視各種元素，下面有個(gè)示例，大家可以參考下
2014-04-04 
組件是 vue 技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開發(fā)效率大幅提升,組件可以使用全局注冊(cè)和頁(yè)面引入兩種方式進(jìn)行使用,對(duì)uni-app自定義組件和通信相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
2024-03-03 
你真的了解BOM中的history對(duì)象嗎？具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02