シンプルなメッセージボードケースを実現するJavaScript

シンプルなメッセージボードケースを実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSがメッセージボード機能を実現
  • jsp メッセージ ボード ソース コード 3: jsp 初心者向け。
  • DOM 操作を使用して js でシンプルなメッセージ ボードを実装する方法
  • JS+CSSは、更新せずにコンテンツを表示できるメッセージボードインスタンスをシミュレートします。
  • JSでメッセージボード機能を実現【床効果表示】
  • js で実装された折りたたみ式メッセージボード (ソースコードのダウンロードあり)
  • jsp メッセージ ボード ソース コード 2: jsp 初心者向け。
  • 私のAjaxメッセージボードソースコード優れたアプリケーションjs
  • ReactJS と Python の Flask フレームワークを使用してメッセージ ボードを作成するコード例
  • jsp メッセージ ボード ソース コード 1: jsp 初心者向け。

<<:  Mysql GTID Mha 設定方法

>>:  Jenkins の紹介と Docker で Jenkins をデプロイする方法

推薦する

WeChatアプレットが連携メニューを実現

最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するた...

HTML テーブル マークアップ チュートリアル (41): テーブル ヘッダーの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

Linux で JDK 環境を構成する方法

1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...

音楽プレーヤーアプリ(アプリケーションソフトウェア)の分析と再設計 美しい音楽プレーヤーインターフェースの設計方法

無線インタラクションにずっと興味があったので、今回は実践してみようと思います〜この分析と評価は iO...

JavaScript axiosのインストールとパッケージ化のケースの詳細な説明

1. axiosプラグインをダウンロードする cnpm インストール axios -S 2. mai...

lastInfdexOf 関数の MySQL 実装例

MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...

擬似静的およびクライアント適応型 Nginx の設定方法

バックエンドは thinkphp3.2.3 フレームワークを使用します。他の言語を使用している場合は...

Linux カーネル デバイス ドライバー カーネル デバッグ テクニカル ノート集

/****************** * カーネルデバッグ技術 ****************...

ウェブページを開いて数秒後に他のページにリダイレクトする

これを実現するには、次のコードを追加するだけです。方法1: メタを使用する使用方法: <Met...

MySQL 8.0 の新機能: ハッシュ結合

MySQL 開発チームは、2019 年 10 月 14 日に MySQL 8.0.18 GA バージ...

Docker+Jenkins+Gitlab+Djangoアプリケーションデプロイ実践の詳細な説明

1. 背景インターネット アプリケーションの急速な更新と反復という状況では、従来の手作業や単純なスク...

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...

MYSQLデータベースの最適化段階を簡単に理解する

導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...

meta name="" content="の機能の詳細な説明

1. 文法: <meta name="名前" content="...