首頁(yè) 猿問(wèn) 星級(jí)評(píng)分系統(tǒng)部分加粗代碼解釋

星級(jí)評(píng)分系統(tǒng)部分加粗代碼解釋

JavaScript

ken0510 2017-03-03 09:22:48

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ? ?<html xmlns="http://www.w3.org/1999/xhtml"> ? ?<head> ? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ? ?<title>星級(jí)評(píng)分系統(tǒng)</title> ? ?<style> ? ?body,div,ul,li,p{margin:0;padding:0;} ? ?body{color:#666;font:12px/1.5 Arial;} ? ?ul{list-style-type:none;} ? ?#star{position:relative;width:600px;margin:10px auto;} ? ?#star ul,#star span{float:left;display:inline;height:19px;line-height:19px;} ? ?#star ul{margin:0 10px;} ? ?#star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(img/star.png) no-repeat;} ? ?#star strong{color:#f60;padding-left:10px;} ? ?#star li.on{background-position:0 -28px;} ? ?#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(img/icon.gif) no-repeat;padding:7px 10px 0;} ? ?#star p em{color:#f60;display:block;font-style:normal;} ? ?</style> ? ?<script type="text/javascript"> ? ?window.onload = function () ? ?{ ? ? var oStar = document.getElementById("star"); ? ? var aLi = oStar.getElementsByTagName("li"); ? ? var oUl = oStar.getElementsByTagName("ul")[0]; ? ? var oSpan = oStar.getElementsByTagName("span")[1]; ? ? var oP = oStar.getElementsByTagName("p")[0]; ? ? var i = iScore = iStar = 0; ? ? var aMsg = [ ? ? "很不滿意|差得太離譜，與賣家描述的嚴(yán)重不符，非常不滿", ? ? "不滿意|部分有破損，與賣家描述的不符，不滿意", ? ? "一般|質(zhì)量一般，沒(méi)有賣家描述的那么好", ? ? "滿意|質(zhì)量不錯(cuò)，與賣家描述的基本一致，還是挺滿意的", ? ? "非常滿意|質(zhì)量非常好，與賣家描述的完全一致，非常滿意" ? ? ] ? ? ? ? for (i = 1; i <= aLi.length; i++) ? ? { ? ? aLi[i - 1].index = i; ? ? //鼠標(biāo)移過(guò)顯示分?jǐn)?shù) ? ? aLi[i - 1].onmouseover = function () ? ? { ? ? fnPoint(this.index); ? ? //浮動(dòng)層顯示 ? ? oP.style.display = "block"; ? ? //計(jì)算浮動(dòng)層位置 ? ? oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px"; ? ? //匹配浮動(dòng)層文字內(nèi)容 ? ? oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1] ? ? }; ? ? //鼠標(biāo)離開(kāi)后恢復(fù)上次評(píng)分 ? ? aLi[i - 1].onmouseout = function () ? ? { ? ? fnPoint(); ? ? //關(guān)閉浮動(dòng)層 ? ? oP.style.display = "none" ? ? }; ? ? //點(diǎn)擊后進(jìn)行評(píng)分處理 ? ? aLi[i - 1].onclick = function () ? ? { ? ? iStar = this.index; ? ? oP.style.display = "none"; ? ? oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")" ? ? } ? ? } ? ? //評(píng)分處理 ? ? function fnPoint(iArg) ? ? { ? ? //分?jǐn)?shù)賦值 ? ? iScore = iArg || iStar; ? ? for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : ""; ? ? } ? ?}; ? ?</script> ? ?</head> ? ?<body> ? ?<div id="star"> ? ?<span>點(diǎn)擊星星就能打分</span> ? ?<ul> ? ?<li><a href="javascript:;">1</a></li> ? ?<li><a href="javascript:;">2</a></li> ? ?<li><a href="javascript:;">3</a></li> ? ?<li><a href="javascript:;">4</a></li> ? ?<li><a href="javascript:;">5</a></li> ? ?</ul> ? ?<span></span> ? ?<p></p> ? ?</div> ? ?</body> ? ?</html> ? ?

查看完整描述

1 回答

已采納

習(xí)慣受傷

TA貢獻(xiàn)885條經(jīng)驗(yàn) 獲得超1144個(gè)贊

for?(i?=?1;?i?<=?aLi.length;?i++)????
{????
aLi[i?-?1].index?=?i;

這一段表示：循環(huán)給li加了一個(gè)index屬性，并且賦值。i-1的原因是JS中下標(biāo)都是從0開(kāi)始。

("?+?aMsg[this.index?-?1].match(/\|(.+)/)[1]?+?")"

這一段表示：鼠標(biāo)點(diǎn)擊時(shí)拼接分?jǐn)?shù)和選中的星星表示的內(nèi)容。

aMsg是一個(gè)數(shù)組，下標(biāo)同樣是從0開(kāi)始的而li.index是從1開(kāi)始的，所以往前移動(dòng)一位 aMsg[this.index-1] 就是index對(duì)應(yīng)的評(píng)價(jià)信息。

后邊的：.match(/\|(.+)/)[1]，表示從消息中用正則匹配"|"，然后選擇第二個(gè)匹配值，也就是把對(duì)應(yīng)索引的消息用“|”號(hào)分割，選后邊的一個(gè)。

如："非常滿意|質(zhì)量非常好，與賣家描述的完全一致，非常滿意" ，用“|”分割，可以分割為具有兩個(gè)字符串的數(shù)組：

非常滿意 ?===> 在數(shù)組中下標(biāo) 0

質(zhì)量非常好，與賣家描述的完全一致，非常滿意??===> 在數(shù)組中下標(biāo) 1

//評(píng)分處理????
function?fnPoint(iArg)????
{????
//分?jǐn)?shù)賦值????
iScore?=?iArg?||?iStar;????
for?(i?=?0;?i?<?aLi.length;?i++)?aLi[i].className?=?i?<?iScore???"on"?:?"";	???
}

這一段里，iArg是鼠標(biāo)劃過(guò)元素的 index 屬性值。

iScore = iArg || iStar; ?表示，如果iArg沒(méi)有傳入正確的值，iScore將等于iStar。

后邊那個(gè)循環(huán)，表示給鼠標(biāo)滑過(guò)元素和它前邊的元素加CSS類“on”。

1 反對(duì) 回復(fù) 2017-03-05