ランダム会話メール's game

Click here for free DL of the app version that can save data.

No:29888

124

←

Prev Next

→

ランダム会話メール
Developer User14660｜Date and time 23/12/19 21:58:00
Build time 20.76 sec｜Game capacity 2.877KB｜

Script

了解です。以下にランダム会話メールのプログラムを実装したHTMLファイルの一例を記述します。

このプログラムでは、ユーザーがテキストボックスにメッセージを入力し、送信ボタンを押すと、ランダムなメッセージがボットから返信されるような仕組みになっています。メッセージは送信者ごとに異なるスタイルで表示され、会話エリアは自動的に上にスクロールされるようになっています。このHTMLファイルをブラウザで開くと、「ランダム会話メール」というタイトルのページが表示され、メッセージの入力と送信が行えます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

了解です。以下にランダム会話メールのプログラムを実装したHTMLファイルの一例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ランダム会話メール</title>
  <style>
    #conversation {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      overflow-y: scroll;
      padding: 10px;
      font-family: Arial, sans-serif;
    }

#msg-input {
      width: 240px;
      height: 30px;
      padding: 5px;
      font-family: Arial, sans-serif;
    }

#send-btn {
      padding: 5px 10px;
    }
  </style>
</head>
<body>
  <div id="conversation"></div>
  <input type="text" id="msg-input" placeholder="メッセージを入力">
  <button id="send-btn">送信</button>

// 会話メールの送受信を管理するクラス
    class Conversation {
      constructor() {
        this.conversationArea = document.getElementById('conversation');
        this.msgInput = document.getElementById('msg-input');
        this.sendBtn = document.getElementById('send-btn');
        this.sendBtn.addEventListener('click', this.sendMessage.bind(this));
      }

sendMessage() {
        const msg = this.msgInput.value;
        this.msgInput.value = '';

this.addMessage(msg, 'user');

// 1秒後に返信を表示する
        setTimeout(() => {
          const replyMsg = messages[Math.floor(Math.random() * messages.length)];
          this.addMessage(replyMsg, 'bot');
        }, 1000);
      }

addMessage(msg, sender) {
        const msgElement = document.createElement('div');
        msgElement.textContent = msg;
        msgElement.className = sender;

this.conversationArea.appendChild(msgElement);
        this.conversationArea.scrollTop = this.conversationArea.scrollHeight;
      }
    }

// 会話メールを初期化
    const conversation = new Conversation();
  </script>
</body>
</html>
```

このプログラムでは、ユーザーがテキストボックスにメッセージを入力し、送信ボタンを押すと、ランダムなメッセージがボットから返信されるような仕組みになっています。メッセージは送信者ごとに異なるスタイルで表示され、会話エリアは自動的に上にスクロールされるようになっています。

このHTMLファイルをブラウザで開くと、「ランダム会話メール」というタイトルのページが表示され、メッセージの入力と送信が行えます。