JSが5つ星の賞賛を獲得

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSは5つ星の賞賛効果を達成
  • JavaScript で 5 つ星の製品評価を実装
  • jQuery に基づいて 5 つ星のレビューを実装する
  • jQueryで実装した5つ星レビュー機能【事例】
  • jQuery によるレイヤーベースの 5 つ星評価機能を模倣する方法
  • jsは5つ星評価機能を実現する
  • 5つ星評価機能を実現するJavaScript
  • 5 つ星評価コードを実装する JavaScript (ソース コードのダウンロード)
  • JSとJQueryはそれぞれ淘宝網の五つ星賞賛の特殊効果を実現

<<:  MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル

>>:  Tomcat9 のダウンロード、インストール、設定 + Eclipse への統合に関する詳細なチュートリアル

推薦する

SSM VUE Axios の詳細な説明

目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...

HTTP サーバーとクライアントのやり取りをシミュレートする Node.js+postman

目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...

MySQLインデックスの簡単な分析

データベース インデックスは、テーブル操作の速度を向上させることを目的としたデータ構造です。高速なラ...

Vue ログインページ用の動的パーティクル背景プラグインの実装

目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...

初心者のためのMySQL外部キーの設定方法

目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...

iframe を更新する 3 つの方法

コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...

JavaScript配列についてさらに詳しく知るのに役立つ記事

目次1. 配列の役割: 2. 配列の定義: 1. コンストラクタを通じて配列を作成する2. リテラル...

js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する

この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...

React ページ ターナーの実装 (フロント エンドとバックエンドを含む)

目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...

nestjs からフロントエンドに返されるデータ形式のカプセル化実装

通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定され...

Vue実戦記録のログインページの実装

目次1. 事前準備1.1 Node.jsをインストールする1.2 webpackをインストールする1...

Vue フロントエンド開発における階層的にネストされたコンポーネント間の通信の詳細な説明

目次序文例まとめ序文Vue の親子コンポーネントは、props を通じて親コンポーネントの値を子コン...

mysql8.0.23 msi インストールの超詳細なチュートリアル

1.MySqlをダウンロードしてインストールする公式ウェブサイトからMySqlデータベースをダウンロ...

複数レベルの複雑な動的ヘッダーの avue-crud 実装例

目次序文バックグラウンドデータの結合フロントエンドデータ表示ページ効果表示Avue.js は、既存の...

MySQL MVCCメカニズム原理の詳細な説明

目次MVCCとはMySQL ロックとトランザクション分離レベルMySQL 元に戻すログMVCCの実装...