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