<！DOCTYPE htmlののPUBLIC " - // W3C // DTD XHTML 1.0過渡// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLのxmlns = "http://www.w3.org/1999/xhtml" XML：LANG = "EN">
<ヘッド>
<META HTTP-当量= "Content-Typeの" コンテンツ= "text / htmlの;のcharset = UTF-8">
<タイトル>五芒星の評価コントロール</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
インクルード
{
リストスタイル：なし。
}
UL李
{
フロート：左;
フォントサイズ：40ピクセル;
フォントファミリ：太字;
色：#CCC;
カーソル：ポインタ;
}
。スコア
{
カラー：ゴールド;
}
</スタイル>
ます。<script type = "text / javascriptの">
関数$ ID（ID）{
document.getElementById（ID）を返します。
}
関数$タグ（タグ、objDom）{
IF（objDom）{
objDom.getElementsByTagName（タグ）を返します。
}
他の{
objDom.getElementsByTagName（タグ）を返します。
}
}
star_s =は '★' でした。
'☆' = star_kました。
window.onload =関数（）{
VaRのLIS = $タグ（ 'リー'、$のID（ 'score_control'））;
ため（VAR i = 0; iはlis.lengthを<; iは++）{
// 1.李各タグのために、独自のインデックスの値を記録するために使用される動的属性インデックスを追加
LIS [I] .setAttribute（ 'インデックス'、I）。
登録された各イベントの// 2.李タグのonmouseover
LIS [i]は.onmouseover =関数（）{
//this.innerHTML = star_s。
//this.className = 'スコア';
// 3.リチウムの現在のインデックス値を取得します。
VAR指数=数（this.getAttribute（ 'インデックス'））;
李クラスとinnHTML番目0インデックスの集合からLISを介し// 4ループ
//のための（VARのJ = 0; J <=指数; J ++）{
//lis[j].innerHTML = star_s。
//lis[j].className = 'スコア';
//}
//のための（VARのK =指数+ 1; lis.length <Kあり、k ++）{
//console.log(k）;
//lis[k].innerHTML = star_k。
//lis[k].className = '';
//}
用（VARのJ = 0; J <lis.length; J ++）{
IF（J <=指数）{
LIS [J] .innerHTML = star_s。
LIS [J] .className = 'スコア'。
}他{
LIS [J] .innerHTML = star_k。
LIS [J] .className = '';
}
}
}
// 6.李は得点、のonclickイベントに登録しました
グローバル変数を宣言//6.1すると、星の数をユーザーがクリックを格納するために使用されます
VAR電流= -1;
LIS [i]は.onclick =関数（）{
//6.2星のクリック数を取得
電流=番号（this.getAttribute（ 'インデックス'））;
}
}
ULに// 5.れるonmouseoutイベントを登録しました
$のID（ 'score_control'）。れるonmouseout =関数（）{
ため（VAR i = 0; iはlis.lengthを<; iは++）{
{式（I =電流<）場合
LIS [I] .innerHTML = star_s。
LIS [I] .className = 'スコア'。
}他{
LIS [I] .innerHTML = star_k。
LIS [I] .className = '';
}
}
}
}
</ SCRIPT>
</ head>の
<身体>
<ulのID = "score_control">
<LI>☆</ LI>
<LI>☆</ LI>
<LI>☆</ LI>
<LI>☆</ LI>
<LI>☆</ LI>
</ UL>
</ BODY>
</ HTML>