この記事では、TaobaoとBaidu Libraryと同様のスコアリング機能を共有しており、JS実装は参照のためです。特定のコンテンツは次のとおりです
効果は写真に示されています：
5つの5つの尖った星は、テーブルの5つの列に配置されています。以下は、スコアの結果を表示するために使用される<p>です。コードは次のとおりです。
<body onload = "changebg（）"> <table align = "center" cellpadding = "0" cellpacing = "0" "id =" maintable "> <tr style =" font-size：30px; "> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td> </tr> </table> <p align = "center"> you wase reaver </p/p/p/</p/</p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p/p？
ボディのオンロードイベントはメソッドにバインドされており、JSコードは次のとおりです。
<script type = "text/javascript"> function getIndex（arr、element）{// arguments：array、element;兄弟要素のインデックスを（var i = 0; i <arr.length; i ++）{if（arr [i] ==要素）{return i; }} return -1; } function changebg（）{//各tdを設定してフォーカス属性を取得します[onclick属性を設定することもできます] var維持= document.getElementById（ "maintable"）; // var tds = mainted.getelementsbytagname（ "td"）;を設定する必要があるテーブルを取得します。 //テーブルですべてのセルを取得しますdocument.getElementById（ "result"）。style.display= "none"; //スコア結果を非表示に設定します（var i = 0; i <tds.length; i ++）{var td = tds [i]; td.onfocus = getonfocus; td.style.cursor = "pointer"; //マウスを五gramに手型に設定する}}関数getonfocus（）{// tdのフォーカスイベントを設定します。 var tds = maintable.getelementsbytagname（ "td"）; var index = getIndex（tds、this）; //応答イベントのインデックスを返すこれは、このイベントdocument.getElementById（ "result"）。style.display= "";をトリガーした要素を表します。 //スコアを取得した後、result document.getElementByID（ "スコア"）を表示します。InnerText= index + 1; for（var i = 0; i <index+1; i ++）{tds [i] .style.color = "red"; } for（var i = index+1; i <tds.length; i ++）{tds [i] .style.color = "black"; }} </script>JSコードは主に3つの関数で構成されています。
①：changebg（）;ボディのオンロードイベントに結合する関数。各TD要素へのオンフォーカスイベントの結合を実現するため。
②：getonfocus（）; TD要素のオンフォーカスイベントの特定の実装。
③：getIndex（）; 2つのパラメーターがあります。1つはTD要素のコレクション配列、もう1つは対応するイベントのTD要素です。このキーワードの使用に注意してください。主に、対応するイベントの要素のインデックスを返します。応答イベント要素の前に色を赤として表示するために、その後の要素は黒として表示されます。
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。