JSが5つ星の賞賛を獲得

この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

ビジネスロジックとしては、まず使用する必要があるすべてのタグとスタイルを作成し、次に星、スコア、スマイリーフェイス、クリックの対応する動作を記述して、メンテナンスしやすいように抽象化する必要があります。そしてクリックするとイベントをスローし、対応する名前、スコアなどの情報を記録し、Cookie に保存します。

作成プロセス中に、1 つは位置の問題です。これは、appendChild を作成せずに実行すると発生しやすくなります。2 つ目は、動作を追加するときに星とスマイリーフェイスの位置を調整する方法です。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <スクリプトタイプ="モジュール">
        「./js/Star.js」からStarをインポートします。
        let list=["製品の適合性","ショップのサービス態度","速達スピード","宅配便サービス","速達梱包"]
        リスト.forEach(項目 => {
            star = new Star(item); とします。  
            star.appendTo("本文");
            star.addEventListener("change",changeHandler);
        });

        関数changeHandler(e){
            var date = 新しい Date();
            日付.setMonth(11);
            Cookie を設定します(e.scoreList、日付);
            
            function setCookie(data,date){ //JSON形式でCookieに保存します var str=date===undefined ? "" : ";expires="+date.toUTCString();
                for(var prop in data){
                    var 値=データ[prop];
                    if(typeof value==="object" && value!==null) value=JSON.stringify(value);
                    document.cookie=prop+"="+値+str;
                }
            }
        }
    </スクリプト>
</本文>
</html>

export default class Component{ // warp メソッドと appendTo メソッドを作成します elem;
    コンストラクタ（）{
        this.elem = this.createElem();
    }
    要素を作成します（）{
        if(this.elem) は this.elem を返します。
        div = document.createElement("div"); とします。
        div を返します。
    }
    親に追加{
        if(typeof parent==="string")parent=document.querySelector(parent);
        親要素に子要素を追加します。
    }
}

「./Component.js」からコンポーネントをインポートします。
デフォルトクラス Star をエクスポートし、Component を拡張します{
    ラベル="";
    スコア;
    顔;
    スターコン;
    静的STAR_NUM = 5;
    星Arr=[];
    静的スタースコアリスト = [];
    位置=-1;
    コンストラクター(_label){
        素晴らしい（）;
        this.label=_label;
        オブジェクト.assign(this.elem.style,{
            幅:"自動",
            高さ:"16px",
            フロート:"左",
            パディング下部:"10px",
            右余白:"20px",
            パディング上部:"16px",
        })
        Star.StarScoreList[_label]=0;
        _label を作成します。
        this.createStar();
        this.createScore();
    }
    ラベルを作成します(_label){
        ラベルを document.createElement("div");
        ラベル.textContent=_label;
        オブジェクト.assign(ラベル.style,{
            フロート:"左",
            高さ: "16px",
            行の高さ: "16px",
            右余白: "10px",
            オーバーフロー: "非表示",
            空白: "nowrap",
            テキストオーバーフロー: "省略記号",
            フォント: '12px/150% tahoma、arial、Microsoft YaHei、Hiragino Sans GB,"\u5b8b\u4f53",サンセリフ',
            色: "#666"
        });
        this.elem.appendChild(ラベル);
    }
    スターを作成します（）{
        this.starCon = document.createElement("div");
        オブジェクト.assign(this.starCon.style,{
            フロート:"左",
            高さ:"16px",
            位置:"相対",
            上マージン:"1px"
        })
        for(let i=0;i<Star.STAR_NUM;i++){
            star = document.createElement("div"); とします。
            オブジェクト.assign(star.style,{
                背景画像:"url(./img/commstar.png)",
                幅:"16px",
                高さ:"16px",
                フロート:"左",
            })
            this.starArr.push(星);
            this.starCon.appendChild(スター);
        }
        オブジェクト.assign(this.face.style,{
            幅:"16px",
            高さ:"16px",
            背景画像:"url(./img/face-red.png)",
            位置:"絶対",
            上:"-16px",
            表示:"なし"
        });
        this.starCon.appendChild(this.face);
        this.elem.appendChild(this.starCon);
        this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e))
        this.starCon.addEventListener("クリック",e=>this.mouseHandler(e))
        this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e))
        this.face=document.createElement("div");
           
    }
    スコアを作成します（）{
        this.score=document.createElement("span");
        オブジェクト.assign(this.score.style,{
            位置:"相対",
            幅:"30px",
            高さ:"16px",
            上:"-2px",
            左余白:"10px",
            行の高さ:"16px",
            テキスト配置:"右",
            色:"#999",
            フォント:"12px/150% tahoma、arial、Microsoft YaHei、Hiragino Sans GB、sans-serif",
        });
        this.score.textContent="0 ポイント";
        this.starCon.appendChild(this.score);
    }
    mouseHandler(e){ //マウスの動作 let index=this.starArr.indexOf(e.target);
        スイッチ(e.type){
            ケース「マウスオーバー」:
                if(インデックス<0) 戻り値:
                this.changeFace(インデックス);
                this.changeScore(インデックス+1);
                this.changeStar(インデックス+1);
                壊す;
            「クリック」の場合:
                this.pos=インデックス;
                これをディスパッチします。
                壊す;
            ケース「マウスリーブ」:
                this.changeStar(this.pos+1);
                this.changeFace(this.pos);
                this.changeScore(this.pos+1);
                壊す;
            デフォルト：
                戻る;
        }
    }
    星を変える(n){
        for(let i=0;i<this.starArr.length;i++){
            もし(i<n){
                this.starArr[i].style.backgroundPositionY="-16px";
            }それ以外{
                this.starArr[i].style.backgroundPositionY="0px";
            }
        }
    }
    スコア変更(n){
        this.score.textContent=n+"ポイント";
        n===0の場合{
            this.score.style.color="#999";
            
        }それ以外{
            スコアスタイルカラー="#e4393c";
        }
    }
    フェイスを変更する(n){
        n<0の場合{
            this.face.style.display="なし";
            戻る;
        }
        let index=Star.STAR_NUM-n-1; //画像のため、ここのスマイリー フェイスは反転されています this.face.style.display="block";
        this.face.style.backgroundPositionX=-index*20+"px";
        this.face.style.left=this.starArr[n].offsetLeft+"px";
    }
    スコア変更(n){
        this.score.textContent=n+"ポイント";
        n===0の場合{
            this.score.style.color="#999";
        }それ以外{
            スコアスタイルカラー="#e4393c";
        }
    }
    急送（）{
        // コンソールログ("aaa")
        Star.StarScoreList[this.label]=this.pos+1;
        var evt = 新しいイベント("change");
        evt.score=this.pos+1;
        evt.label=このラベル;
        evt.scoreList=Star.StarScoreList;
        this.dispatchEvent(evt);
    }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: