今日、私は別のクールな例を書きました：星評価システム（星の数をカスタマイズして情報を表示できます）
sufustar.star（）;
5つ星のデフォルト値、デフォルト情報を使用します
var msg = [......];
sufustar.star（10、msg）;
カスタムスターの数は10で、表示情報はMSG形式のデフォルト値を参照しています。星の数は、星の数と一致する必要があります。
自分でいくつかの例を実装することには利点があります。これにより、さまざまな知識ポイントを適用する習熟度が高まり、自分の弱点をテストできます。発見されたら、すぐにAPIドキュメントを検索して、それを補います！
愚かすぎるかどうかはわかりませんが、この例は一日中書かれていました！
ナンセンスについて話さないでください、この例に関係する知識のポイントについて話しましょう。
1. CSSボーダーを使用して三角形を描き、前に使用して他の要素に追加します。
2。要素を見つけるためにCSSを使用する方法を学びます。
3。学習イベントのエージェント。
4.パフォーマンスを最適化する方法。
5。文字列オブジェクトの一致方法の適用と正規表現の適用。
6.イベントの登録とイベント処理には、IE互換のライティング方法が必要です。
7。 '||'の使用方法を学ぶ変数のデフォルト値を設定するには。
8。コードを簡素化：繰り返されるコードを取り出して、それを個別に機能に書き込みます。
以下は、コメント付きの完全なコードです。わからない場合は、ドキュメントを確認してください。現在のレベルでは、このように書くことしかできません。良い提案がある場合は、お気軽に指摘してください！
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin：0;パディング：0; } #star {position：absolute;左：0;右：0;トップ：30px;下：0;マージン：自動;幅：80％;フォントサイズ：12px; }＃star-div {マージン：5px;フォントサイズ：0; }＃star-div a {display：inline-block;幅：21px;高さ：21px;背景：url（http://files.cnblogs.com/files/susufufu/star0.gif）no-repeat; }＃star-div .on {background：url（http://files.cnblogs.com/files/susufufu/star1.gif）no-repeat; }＃star-info {position：absolute;上：55px;左：-30px;表示：なし;幅：155px;高さ：50px;パディング：2px; Line-Height：17px;ボーダーラジウス：8px;背景色：金; z-index：5; }＃star-info：before {content： '';国境圏：10pxの固体金;国境左：10pxソリッドRGBA（0,0,0,0）;国境右：10pxソリッドRGBA（0,0,0,0）;位置：絶対;左：35px;トップ：-10px; }＃star-span {line-height：14px}＃star-info strong、＃star-span strong {color：red; } </style> <script> window.onload = function（）{var sufustar = function（）{//ツール関数gbyid（id）{return document.getelementbyid（id）;} function addevent（elem、type、func）{// IEと互換性のあるIEと互換性if（elem.attachevent）{elem.attachevent（ 'on'+type、func）}} function getIndex（event）{// IE var e = event || window.event; var t = e.target || E.SRCELEMENT; if（t.tagname.tolowercase（）=== 'a'）{return parseint（t.innerhtml）; }} function showinfo（index、msg）{var info = gbyid（ 'star-info'）; info.style.display = 'block'; info.style.left = index*21-51+'px'; info.innerhtml = "<strong>"+index+'points'+msg [index-1] .match（/(.+)/ |/）[1]+'<br//'+'+'</strong>'+msg [index-1]。 } function appenstar（elem、nums）{var fragment = document.createdocumentfragment（）; //パフォーマンスを改善するために、ドキュメントフラグメントは一度に追加されるために使用されるため、ページは（var i = 0; i <nums; i ++）{var a = document.createelement（ 'a'）; a.innerhtml = i+1; a.href = "javascript :;"; //ブロッキングブラウザのデフォルト動作をクリックしますlink fragment.appendchild（a）; } elem.appendChild（frag）; } //ボディ関数関数星（num、mymsg）{var n = num || 5; // numに値がある場合、その値を取得し、値がない場合は、デフォルト値5を取得します。 var clickstar = currentStar = 0; // ClickStarを保存するクリックステータスvar msg = mymsg || ["非常に不満|それはあまりにも悪く、売り手の説明と真剣に矛盾している、非常に不満、非常に不満を抱いている」、「不満|部分的に損傷し、売り手の説明と矛盾し、満足していない」、一般|満足している」、「非常に満足している|品質は非常に優れており、売り手の説明と完全に一致しており、非常に満足している」]; var starcontainer = gbyid（ 'star-div'）; Appenstar（StarContainer、n）; AddEvent（starcontainer、 'mouseover'、over）; //イベントプロキシモード（<a>タグの親要素を介したプロキシイベント）addevent（starcontainer、 'mouseout'、out）; addevent（starcontainer、 'click'、click）; function over（event）{if（getIndex（event））{// getIndex（event）が値を取得できない場合、現在のトリガーイベントのターゲットは<a> tag var index = getindex（event）ではないことを意味します。変更（インデックス）; showinfo（index、msg）; }} function out（event）{change（）; //スコアをクリックした状態に設定しますclickstar gbyid（ 'star-info'）。style.display= 'none'} function click（event）{if（getIndex（event））{var index = getIndex（event）; clickstar = index; //クリックステータスgbyid（ 'star-info'）を保存します。style.display= 'none'; gbyid（ 'star -span'）。innerhtml = "<strong>" + index + 'point' + msg [index -1] .match（/(.+)/ |//）[1] + '</strong>' + '<br/>' + msg [index -1] .match（// |（。 +）/）[1]; }} function change（index）{currentStar = index || clickstar; for（var i = 0; i <n; i ++）{starcontainer.children [i] .classname = i <currentStar？ 'on'： ''}}} return {star：star}}（）; //（）ここでの（）は、関数がすぐに実行されることを意味します。そのため、変数Sufustarは匿名関数のスターの返品値を呼び出すことができます//コール実行：sufustar.star（num、mymsg）、パラメーターは空になります。 } </script> </head> <body> <div id = "star"> <span>星をクリックしてスコアを付けます：</span> <div id = "star-div"> </div> <span id = "star-span"> </span> <p id = "star-info"> </p> </div> </body>ネイティブJS実装スター評価システムの上記の簡単な例は、私があなたと共有したすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。