シンプルなメッセージボードケースを実現するJavaScript
|
参考までに、Javascriptを使用してメッセージボードの例（メッセージ削除あり）を実装します。具体的な内容は次のとおりです。 まだフロントエンドの勉強中です。コードに不備や間違った考えがあったらご容赦ください。アドバイスをよろしくお願いします。 一部のウェブサイトのディスカッションエリアでは、通常、メッセージボード機能を見ることができます。ユーザーがコメントすると、空のコメントは投稿できません。最新のコメントが表示され、古いコメントは押し下げられます。その後、ブロガーはコメントを削除できます。 コードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
}
体 {
パディング: 100px;
}
テキストエリア {
幅: 200ピクセル;
高さ: 100px;
境界線: 1px ピンク
アウトライン: なし;
サイズ変更: なし;
}
ul {
上マージン: 50px;
}
li {
リストスタイル: なし;
幅: 300ピクセル;
パディング: 5px;
背景色: rgb(245, 209, 243);
色: 赤;
フォントサイズ: 14px;
マージン: 15px 0;
}
li a {
フロート: 右;
テキスト装飾: なし;
}
</スタイル>
</head>
<本文>
<テキストエリア名="" id=""></テキストエリア>
<button>公開</button>
<ul>
</ul>
<スクリプト>
var btn = document.querySelector('ボタン')
var テキストエリア = document.querySelector('テキストエリア')
var ul = document.querySelector('ul')
btn.onclick = 関数（）{
テキストエリアの値 == '' の場合 {
アラート('Ning には入力がありません')
偽を返す
}それ以外{
var li = document.createElement('li')
li.innerHTML=textarea.value+"<a href='javascript:;'>削除</a>"
ul.insertBefore(li,ul.children[0])
var as=document.querySelectorAll('a')
(var i=0;i<as.length;i++){
as[i].onclick=関数() {
ul.removeChild(この親ノード)
}
}
}
}
</スクリプト>
</本文>
</html>エフェクト表示 コメントが空の場合:
新しいコメントは古いコメントを押し下げます:
削除する場合:
コードの説明 ここでは、ボタンクリックイベントがトリガーされると、テキストフィールドの内容が取得され、関数がトリガーされ、最初にテキストフィールドの値が空であるかどうかの判断が行われます。そうである場合、警告ボックスがポップアップし、テキストの内容は下に表示されません。 テキストボックスにコンテンツがある場合は、要素 li を作成し、li を使用して ' を受け取ります。次に、li のテキストコンテンツを、テキスト領域の 1 の内容 + a タグ (削除機能) に設定します。 次に、新しく追加した li を前面に表示するように設定します (insertbefore)。次に、a タグがクリックされたときに行が削除されるように、ループ内で a タグをバインドする必要があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Jenkins の紹介と Docker で Jenkins をデプロイする方法
![MySQL マルチテーブルクエリ例の詳しい解説 [リンククエリ、サブクエリなど]](/upload/images/67cad8ad5e1d9.webp)
推薦する
tomcat をインストールし、Linux で Web サイトを展開します (推奨)
jdk をインストールします: Oracle 公式ダウンロード https://www.oracl...
K8Sの5つのコントローラーの紹介と使用
目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント（ステートレスアプリケーショ...
Apache FlinkCEP でタイムアウトステータス監視を実装するための詳細な手順
CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...
Bootstrap が人気な 11 の理由
序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...
DockerでHadoopを実行しイメージを作成する方法
車輪の再発明として、ここでは再パッケージ化を使用して Docker ベースの Hadoop イメージ...
MySQL 文字セットの変更に関する実践的なチュートリアル
序文： MySQL では、システムが多くの文字セットをサポートしており、異なる文字セット間にはわずか...
JavaScriptカルーセルの実装について
今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね？今日はカルーセル画像の真髄を簡...
DockerプライベートライブラリHarborのアーキテクチャとコンポーネントの説明
この記事では、Harbor アーキテクチャの構成と、実行時に各コンポーネントを使用する方法について説...
MySQLのクラスタ化インデックスと非クラスタ化インデックスの詳細な説明
1. クラスター化インデックステーブル データはインデックスの順序で保存されます。つまり、インデック...
JavaScript JSON.stringify() の使用法の概要
目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...
CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法
1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...
Iframe の使用を減らすべきいくつかの理由の分析
次のグラフは、100 個の異なる要素で iframe を作成するのにどれくらいの時間がかかるかを示し...
HTML Webページの例を使用してヘッドエリアコードの意味を説明する
例を使って、Webページのヘッダー情報の意味を理解しましょう。 <!DOCTYPE HTML ...
Linux で crontab 出力リダイレクトが有効にならない問題の解決方法
質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
無効と読み取り専用で入力を読み取り専用に設定する
読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...