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-06Javascript檢查圖片大小不要讓大圖片撐破頁(yè)面
用Javascript判斷圖片大小,其實(shí)只要寫(xiě)一個(gè)簡(jiǎn)單的函數(shù)就可以了,使用其他語(yǔ)言進(jìn)行判斷,過(guò)程比較復(fù)雜,用 Javascript 判斷輕松搞定2014-11-11JS實(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-11JavaScript 事件對(duì)內(nèi)存和性能的影響
本文主要介紹了JavaScript 事件對(duì)內(nèi)存和性能的影響。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01uniapp在微信小程序中圖片寬度顯示問(wèn)題示例代碼
在uniapp中,如果你的富文本圖片顯示寬度不正常,你可以通過(guò)設(shè)置圖片的寬高屬性來(lái)解決這個(gè)問(wèn)題,這篇文章主要介紹了uniapp在微信小程序中圖片寬度顯示問(wèn)題,需要的朋友可以參考下2023-02-02js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法實(shí)例
這篇文章主要介紹了js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法,實(shí)例分析了insertBefore()函數(shù)追加結(jié)點(diǎn)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-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