この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル
>>: Tomcat9 のダウンロード、インストール、設定 + Eclipse への統合に関する詳細なチュートリアル
目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...
目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...
データベース インデックスは、テーブル操作の速度を向上させることを目的としたデータ構造です。高速なラ...
目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...
目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...
コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...
目次1. 配列の役割: 2. 配列の定義: 1. コンストラクタを通じて配列を作成する2. リテラル...
この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...
目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...
通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定され...
目次1. 事前準備1.1 Node.jsをインストールする1.2 webpackをインストールする1...
目次序文例まとめ序文Vue の親子コンポーネントは、props を通じて親コンポーネントの値を子コン...
1.MySqlをダウンロードしてインストールする公式ウェブサイトからMySqlデータベースをダウンロ...
目次序文バックグラウンドデータの結合フロントエンドデータ表示ページ効果表示Avue.js は、既存の...
目次MVCCとはMySQL ロックとトランザクション分離レベルMySQL 元に戻すログMVCCの実装...