欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 星級評分效果(手寫)

 更新時間:2012年12月24日 17:21:25   作者:  
今天上午抽空隨手寫了個星級評分的效果,給大家分享下。由于水平有限,如有問題請指出;首先要準(zhǔn)備一張星星的圖片,灰色是默認(rèn)狀態(tài),黃色是選擇狀態(tài),需要的朋友可以參考下
今天上午抽空隨手寫了個星級評分的效果,給大家分享下。由于水平有限,如有問題請指出。
首先要準(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)動

    js實現(xiàn)小球在頁面規(guī)定的區(qū)域運(yùn)動

    這篇文章主要為大家詳細(xì)介紹了js控制小球在規(guī)定范圍運(yùn)動,碰到邊界就改變運(yùn)動方向,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • Javascript檢查圖片大小不要讓大圖片撐破頁面

    Javascript檢查圖片大小不要讓大圖片撐破頁面

    用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é)

    這篇文章主要介紹了JS實現(xiàn)的數(shù)組去除重復(fù)數(shù)據(jù)算法,總結(jié)分析了4種比較常見的數(shù)組去重復(fù)算法及相關(guān)使用技巧,需要的朋友可以參考下
    2017-11-11
  • JavaScript獲取鍵盤按鍵的鍵碼(參照表)

    JavaScript獲取鍵盤按鍵的鍵碼(參照表)

    JS獲取鍵盤按鍵的鍵碼event.keyCode,記錄-方便查找。需要的朋友參考下本教程吧
    2017-01-01
  • JavaScript 事件對內(nèi)存和性能的影響

    JavaScript 事件對內(nèi)存和性能的影響

    本文主要介紹了JavaScript 事件對內(nèi)存和性能的影響。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • uniapp在微信小程序中圖片寬度顯示問題示例代碼

    uniapp在微信小程序中圖片寬度顯示問題示例代碼

    在uniapp中,如果你的富文本圖片顯示寬度不正常,你可以通過設(shè)置圖片的寬高屬性來解決這個問題,這篇文章主要介紹了uniapp在微信小程序中圖片寬度顯示問題,需要的朋友可以參考下
    2023-02-02
  • js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法實例

    js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法實例

    這篇文章主要介紹了js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法,實例分析了insertBefore()函數(shù)追加結(jié)點(diǎn)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • js數(shù)組去重的方法總結(jié)

    js數(shù)組去重的方法總結(jié)

    今天小編就為大家分享一篇關(guān)于js數(shù)組去重的方法總結(jié),小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • 詳解JavaScript中關(guān)于this指向的4種情況

    詳解JavaScript中關(guān)于this指向的4種情況

    這篇文章主要介紹了JavaScript中關(guān)于this指向的4種情況,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • JavaScript知識點(diǎn)整理

    JavaScript知識點(diǎn)整理

    本文是腳本之家小編日常整理的關(guān)于javascript知識點(diǎn),包括javascript擁有的特點(diǎn),組成部分,數(shù)據(jù)類型等方面,對javascript知識點(diǎn)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12

最新評論