この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。
|
イベント委任を使用してメッセージ ボード機能を実装します。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<スタイル>
* {
パディング: 0;
マージン: 0;
}
体 {
幅: 100%;
高さ: 100%;
背景: rgb(65, 65, 63);
}
。背景 {
幅: 700ピクセル;
高さ: 100%;
背景: 白;
マージン: 自動;
上マージン: 20px;
}
。頭、
.ポップヘッド{
高さ: 50px;
フォントサイズ: 20px;
テキスト配置: 中央;
行の高さ: 50px;
}
。名前 {
幅: 640ピクセル;
高さ: 40px;
フォントサイズ: 20px;
マージン: 10px 28px;
行の高さ: 50px;
境界線の半径: 8px;
境界線: 2px実線rgb(139, 137, 137);
アウトライン: なし;
}
。コンテンツ、
.ポップ返信{
幅: 640ピクセル;
高さ: 150px;
フォントサイズ: 22px;
マージン: 10px 28px;
境界線: 2px実線rgb(139, 137, 137);
アウトライン: なし;
境界線の半径: 8px;
サイズ変更: なし;
}
.btn、
.pop-btn {
フロート: 右;
高さ: 30px;
右マージン: 28px;
境界線の半径: 6px;
アウトライン: なし;
フォントサイズ: 20px;
パディング: 0 20px;
背景: rgb(169, 238, 255);
}
h3 {
フォントサイズ: 20px;
色: rgb(102, 102, 102);
背景: rgb(205, 221, 248);
上マージン: 50px;
行の高さ: 50px;
テキストインデント: 30px;
フォントの太さ: 545;
}
li {
リストスタイル: なし;
幅: 640ピクセル;
フォントサイズ: 22px;
マージン: 15px 30px;
}
.メッセージヘッド{
ディスプレイ: フレックス;
}
.メッセージヘッド .写真 {
幅: 70ピクセル;
高さ: 70px;
背景: rgb(6, 109, 134);
表示: インラインブロック;
境界線の半径: 50%;
テキスト配置: 中央;
行の高さ: 70px;
オーバーフロー: 非表示;
}
.メッセージヘッド.時間{
左マージン: 12px;
}
.liuyan、
.返信p{
幅: 560ピクセル;
/* 高さ: 76px; */
行の高さ: 50px;
表示: ブロック;
背景: rgb(205, 221, 248);
フォントサイズ: 20px;
左マージン: 80px;
境界線の半径: 8px;
テキストインデント: 15px;
}
。消去 {
幅: 60ピクセル;
高さ: 30px;
表示: ブロック;
行の高さ: 30px;
左マージン: 580px;
/* 下マージン: 0px; */
境界線の半径: 6px;
アウトライン: なし;
フォントサイズ: 15px;
背景: rgb(169, 238, 255);
}
。答え {
幅: 60ピクセル;
高さ: 30px;
表示: ブロック;
行の高さ: 30px;
上マージン: -29px;
左マージン: 515px;
境界線の半径: 6px;
アウトライン: なし;
フォントサイズ: 15px;
背景: rgb(169, 238, 255);
}
。ポップアップ {
幅：100vw;
高さ：100vh;
位置: 固定;
背景: rgba(0, 0, 0, .3);
左: 0;
上: 0;
zインデックス: 10;
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
コンテンツの中央揃え: 中央;
表示: なし;
}
.pop-content {
幅: 700ピクセル;
背景: #fff;
境界線の半径: 10px;
オーバーフロー: 非表示;
パディング下部: 20px;
}
.返信p{
上マージン: 10px;
背景: rgba(100, 100, 100, .1);
}
</スタイル>
</head>
<本文>
<div class="背景">
<div class="head">メッセージボード</div>
<input class="name" type="text" placeholder="ニックネームを入力してください">
<textarea class="content" placeholder="礼儀正しい発言を心がけてください..."></textarea>
<button class="btn">メッセージを残す</button>
<h3>人々が言っていること</h3>
<ul class="text">
<!-- <li>
<div class="メッセージヘッド">
<span class="photo">システム</span>
<p class="time">2019-9-27 0:47:38</p>
</div>
<p class="liuyan">テストメッセージ</p>
<div class="返信">
<p>テスト返信</p>
</div>
<button class="delete">削除</button>
<button class="answer">回答</button>
</li> -->
</ul>
</div>
<div class="popup">
<div class="pop-content">
<div class="pop-head">返信掲示板</div>
<textarea class="pop-reply" placeholder="礼儀正しい発言を心がけてください..."></textarea>
<button class="pop-btn huiFu">返信</button>
<button class="pop-btn quXiao">キャンセル</button>
</div>
</div>
<スクリプト>
//イベント委任では、各クリックによってイベント処理関数 var oAns が再トリガーされるため、各 if は独立した関数と同等になります。
//分析: イベントは誰に委任されますか? --- 共通の親要素 document.onclick = function (e) {
//イベント処理オブジェクト。IE8 以下のブラウザと互換性があります。e = e || event;
// ターゲット target --- どのタグがそれをトリガーするか var target = e.target;
//メッセージを残す if(target.className === 'btn'){
//オブジェクトを取得します var nickname = $('.name').value;
var コンテンツ = $('.content').値;
//入力が空かどうかを判断します if(nickname && content){
//タグを作成する var oLi = document.createElement('li');
//新しいコンテンツを挿入 oLi.innerHTML = `
<div class="メッセージヘッド">
<span class="photo">${ニックネーム}</span>
<p class="time">2019-9-27 0:47:38</p>
</div>
<p class="liuyan">${コンテンツ}</p>
<div class="返信">
</div>
<button class="delete">削除</button>
<button class="answer">回答</button>
`
//最新のメッセージを先頭に挿入します $('.text').insertBefore(oLi , $('.text').firstChild);
//カウントダウンクロック(ターゲット、3);
// メッセージを残した後、メッセージボードのコンテンツをクリアします $('.content').value = '';
}それ以外{
alert('入力は空にできません!')
}
戻る
}
//deleteif(target.className === 'delete'){
//メッセージを削除しますtarget.parentNode.remove();
戻る
}
//返信 if(target.className === 'answer'){
//ポップアップウィンドウを表示します$('.popup').style.display = 'flex';
//メッセージに返信する場所を検索します oAns = target.previousElementSibling.previousElementSibling;
戻る
}
//返信を確認する if(target.className === 'pop-btn huiFu'){
//返信コンテンツを取得します。var huiFuContent = $('.pop-reply').value;
if(huiFuContent){
//タグを作成する var oP = document.createElement('p');
//タグにコンテンツを挿入します oP.innerHTML = huiFuContent;
//メッセージ場所に返信を挿入します oAns.appendChild(oP);
}
//ポップアップウィンドウを閉じます$('.popup').style.display = 'none';
戻る
}
//返信をキャンセルif(target.className === 'pop-btn quXiao'){
$('.popup').style.display = 'なし';
戻る
}
}
//カウントダウン関数 clock(ele, time){
if(!ele.disabled){
ele.disabled = true ;
ele.innerHTML = time + 's 後に再度メッセージを残すことができます';
var t = setInterval(関数() {
時間 - ;
ele.innerHTML = time + 's 後に再度メッセージを残すことができます';
時間 <= 0 の場合
クリア間隔(t) ;
ele.disabled = false ;
ele.innerHTML = 'メッセージ';
}
},1000)
}
}
//オブジェクト関数 $(selector){ を取得する
document.querySelector(セレクタ) を返します。
}
</スクリプト>
</本文>
</html>
要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 実務経験7年のフロントエンドスーパーバイザーによる経験共有
推薦する
MySQL 5.7 で my.ini ファイルが見つからない場合の解決策
my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...
phpstudy をインストールした後に MySQL を起動できない問題に対する完璧なソリューション (元のデータベースを削除する必要はなく、設定を変更する必要もなく、ポートを変更する必要もありません) 直接共存
今日、PHP を学習する場合、当然ながら、まず実行環境をインストールする必要があります。Phpstu...
MySQL 起動時に報告される ERROR:2002 の分析と解決方法
序文この記事は主にMySQL起動エラー2002の分析と解決方法を紹介しています。参考と勉強のために共...
Windows Server 2016 に MySQL 5.7.19 の解凍バージョンをインストールするための詳細なチュートリアル
MySQL 5.7.19 winx64 解凍版のインストールチュートリアルを収録しています。具体的な...
現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法
目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...
XHTML CSS ページをプリンタ ページに変換する
<br />これまで、Web ページのプリンタ対応バージョンを作成するには、印刷したとき...
ウェブサイトのハイパーリンクを開く方法に関する議論
新しいウィンドウが開きます。 利点: ユーザーがリンクをクリックしても、現在閲覧しているコンテンツは...
nginx.conf のルートディレクトリ設定の詳細な説明
nginx.conf を構成するときには常に何らかの問題が発生します。ここでは、よくある問題とその解...
Linux で MySQL のスケジュールバックアップを実装する方法
実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...
Linux で libudev を使用して USB デバイスの VID と PID を取得する方法
この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...
JavaScript でアルゴリズムの複雑さを学ぶ方法
目次概要Big O 表記法とは何ですか?オー(1)の上） （n^2） O(logn) ですの上！）結...
div間のギャップの解決策
HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...
ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例
CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...
アダプティブ Web デザインの手法 (モバイル フォンでの優れたアクセス エクスペリエンス)
1. HTML ヘッダーにビューポート タグを追加します。ウェブサイトの HTML ファイルの先頭...
http:// の代わりに // を使用する利点は何ですか (アダプティブ https)
//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...