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 への統合に関する詳細なチュートリアル

推薦する

実行中のDockerコンテナのポートマッピングを変更する方法

序文docker run がコンテナを作成して実行するときに、-p を使用してポート マッピング ル...

Ubuntu の仮想環境に Django をインストールする方法

Ubuntu コマンドライン ウィンドウで次の操作を実行します。 1. 仮想環境をインストールする...

Vue ソング プログレス バーのサンプル コード

なお、これはvue-cliで作成したプロジェクトではありません。vue.jsを参照して記述したHTM...

HTML+CSS マージテーブル境界線サンプルコード

table タグと td タグに境界線を追加すると、デフォルトでは次のように二重境界線が使用されます...

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...

WeChat アプレットカスタムタブバーステップ記録

目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...

Nginxドメイン名転送の実装

Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...

Node.js+express+socket でオンラインのリアルタイム多人数チャットルームを実現

この記事では、オンラインリアルタイム多人数チャットルームを実現するためのNode.js+expres...

uniapp は日付と時刻の選択機能を実装します

この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...

Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...

ローカルのMySQLをサーバーデータベースに移行する方法

Linux の scp コマンド (Windows では scp は使用できません) と、mysql...

さまざまなターミナルで Mac が SSH 経由でリモート サーバーに接続する方法の説明

Macはシェル(ターミナル)SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...

Web プロジェクトでの SQL インジェクションの防止

目次1. SQLインジェクションの概要2. SQLインジェクション攻撃の全体的な考え方SQLインジェ...

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...

MySQL 5.7.17 でパスワードを忘れた場合の対処方法

1. my.iniファイルにskip-grant-tablesを追加し、MySQLサーバーを再起動し...