javascript 星級(jí)評(píng)分效果(手寫(xiě))
更新時(shí)間：2012年12月24日 17:21:25 作者：
今天上午抽空隨手寫(xiě)了個(gè)星級(jí)評(píng)分的效果，給大家分享下。由于水平有限，如有問(wèn)題請(qǐng)指出;首先要準(zhǔn)備一張星星的圖片，灰色是默認(rèn)狀態(tài)，黃色是選擇狀態(tài)，需要的朋友可以參考下
今天上午抽空隨手寫(xiě)了個(gè)星級(jí)評(píng)分的效果，給大家分享下。由于水平有限，如有問(wèn)題請(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ú)聊，通過(guò)自己所學(xué)的 javascript 知識(shí)，隨意寫(xiě)的一些效果。
首先要準(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ú)聊，通過(guò)自己所學(xué)的 javascript 知識(shí)，隨意寫(xiě)的一些效果。
您可能感興趣的文章:
相關(guān)文章
js實(shí)現(xiàn)小球在頁(yè)面規(guī)定的區(qū)域運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js控制小球在規(guī)定范圍運(yùn)動(dòng)，碰到邊界就改變運(yùn)動(dòng)方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Javascript檢查圖片大小不要讓大圖片撐破頁(yè)面
用Javascript判斷圖片大小，其實(shí)只要寫(xiě)一個(gè)簡(jiǎn)單的函數(shù)就可以了，使用其他語(yǔ)言進(jìn)行判斷，過(guò)程比較復(fù)雜，用 Javascript 判斷輕松搞定2014-11-11
JS實(shí)現(xiàn)的數(shù)組去除重復(fù)數(shù)據(jù)算法小結(jié)
這篇文章主要介紹了JS實(shí)現(xiàn)的數(shù)組去除重復(fù)數(shù)據(jù)算法,總結(jié)分析了4種比較常見(jiàn)的數(shù)組去重復(fù)算法及相關(guān)使用技巧,需要的朋友可以參考下2017-11-11
JS獲取鍵盤(pán)按鍵的鍵碼event.keyCode，記錄-方便查找。需要的朋友參考下本教程吧2017-01-01
JavaScript 事件對(duì)內(nèi)存和性能的影響
本文主要介紹了JavaScript 事件對(duì)內(nèi)存和性能的影響。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
uniapp在微信小程序中圖片寬度顯示問(wèn)題示例代碼
在uniapp中，如果你的富文本圖片顯示寬度不正常，你可以通過(guò)設(shè)置圖片的寬高屬性來(lái)解決這個(gè)問(wèn)題，這篇文章主要介紹了uniapp在微信小程序中圖片寬度顯示問(wèn)題,需要的朋友可以參考下2023-02-02
js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法實(shí)例
這篇文章主要介紹了js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法,實(shí)例分析了insertBefore()函數(shù)追加結(jié)點(diǎn)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
今天小編就為大家分享一篇關(guān)于js數(shù)組去重的方法總結(jié)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
詳解JavaScript中關(guān)于this指向的4種情況
這篇文章主要介紹了JavaScript中關(guān)于this指向的4種情況，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文是腳本之家小編日常整理的關(guān)于javascript知識(shí)點(diǎn)，包括javascript擁有的特點(diǎn)，組成部分，數(shù)據(jù)類型等方面，對(duì)javascript知識(shí)點(diǎn)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12