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:這是本人閑著無聊,通過自己所學(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:這是本人閑著無聊,通過自己所學(xué)的 javascript 知識(shí),隨意寫的一些效果。
相關(guān)文章
js實(shí)現(xiàn)小球在頁面規(guī)定的區(qū)域運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js控制小球在規(guī)定范圍運(yùn)動(dòng),碰到邊界就改變運(yùn)動(dòng)方向,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06JS實(shí)現(xiàn)的數(shù)組去除重復(fù)數(shù)據(jù)算法小結(jié)
這篇文章主要介紹了JS實(shí)現(xiàn)的數(shù)組去除重復(fù)數(shù)據(jù)算法,總結(jié)分析了4種比較常見的數(shù)組去重復(fù)算法及相關(guān)使用技巧,需要的朋友可以參考下2017-11-11JavaScript 事件對(duì)內(nèi)存和性能的影響
本文主要介紹了JavaScript 事件對(duì)內(nèi)存和性能的影響。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01js在指定位置增加節(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種情況,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04