シンプルなメッセージボードケースを実現する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 をデプロイする方法
推薦する
ファイルのダウンロードを実現する javascript Blob オブジェクト
目次例示する1. ブロブオブジェクト2. フロントエンド3. バックエンド要約する例示する最近、ファ...
JavaScript 正規表現の説明
目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...
axios を使用してプロジェクト内の複数の繰り返しリクエストをフィルタリングする方法
目次1. はじめに:この場合、通常は 2 つのアプローチがあります。 2. CancelToken ...
検証コードケースのjs実装
この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
JavaScript 状態コンテナ Redux の詳細な説明
目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...
MySQL の NULL 値に関する体験談と分析チュートリアルシリーズ
目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...
Vue3 を使用してポップアップ コンポーネントをカプセル化するのは簡単ですか?
目次最初に要約: 🌲🌲 序文: 🍬🍬公開🍬🍬 🍬🍬グローバル🍬🍬 🍬🍬ボールボックス🍬🍬 🎉🎉🎉結論...
VMware15.5 インストール Ubuntu20.04 グラフィック チュートリアル
1. インストール前の準備1. 公式ウェブサイトからUbuntu 20.04のイメージファイルを直接...
Linux でのプロセスデーモン スーパーバイザーのインストール、構成、および使用
Supervisor は非常に優れたデーモン管理ツールです。自動起動、ログ出力、自動ログカットなど、...
この記事では、CSSのようなJSモジュールをインポートする方法を説明します。
目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...
チャットバブル効果を実現するCSS
1. レンダリングJD効果シミュレーション効果 2. 原則高さと幅が0のボックスを用意しますこのボ...
Vue でデータコレクターを設計する
目次シナリオ中核問題ステータス監視状態監視の利点国家監視の欠点復興実行のアイデア依存関係の収集要約す...
JavaScript 配列と非配列オブジェクトのディープ クローンとシャロー クローンの原則の詳細な説明
目次シャロークローニングとディープクローニングとは何ですか? 1. アレイのクローンを作成する1.1...
Linux trコマンドの使い方
01. コマンドの概要tr コマンドは、標準入力からの文字を置換、圧縮、削除できます。ある文字セット...
Dockerが正常に起動しない原因と解決策を詳しく解説
1. Docker 起動時の異常なパフォーマンス: 1. ステータスが繰り返し再起動している場合は、...