web前端留言板代码是什么 • Worktile社区

worktile

Worktile官方账号

Web前端留言板的代码可以包括HTML、CSS和JavaScript。下面是一个简单的示例代码：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="message-board">
        <h1>留言板</h1>
        <form id="message-form">
            <input type="text" id="name" placeholder="请输入您的姓名" required>
            <textarea id="message" placeholder="请输入您的留言" required></textarea>
            <button type="submit">提交留言</button>
        </form>
        <ul id="message-list"></ul>
    </div>

    <script src="main.js"></script>
</body>
</html>

CSS部分（styles.css）：

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

#message-board {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    margin-top: 0;
}

form input,
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

JavaScript部分（main.js）：

const messageForm = document.getElementById('message-form');
const messageList = document.getElementById('message-list');

messageForm.addEventListener('submit', function(e) {
    e.preventDefault();

    const nameInput = document.getElementById('name');
    const messageInput = document.getElementById('message');

    const name = nameInput.value;
    const message = messageInput.value;

    if (name.trim() === '' || message.trim() === '') {
        return;
    }

    const li = document.createElement('li');
    li.textContent = `${name}: ${message}`;
    messageList.appendChild(li);

    nameInput.value = '';
    messageInput.value = '';
});

上述代码实现了一个简单的留言板功能。用户可以在留言板中输入自己的姓名和留言，点击提交按钮后，留言会以姓名: 留言的形式显示在留言列表中。同时，留言会进行基本的校验，如果姓名或留言内容为空，将不会提交留言。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Web前端留言板的代码包括HTML、CSS和JavaScript，下面是一个示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>留言板</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>留言板</h1>
  <form id="messageForm">
    <label for="nameInput">姓名:</label>
    <input type="text" id="nameInput" required><br>
    <label for="messageInput">留言内容:</label>
    <textarea id="messageInput" required></textarea><br>
    <button type="submit">提交</button>
  </form>
  <div id="messages"></div>

  <script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

h1 {
  text-align: center;
}

form {
  margin-bottom: 20px;
}

#messages {
  border: 1px solid black;
  padding: 10px;
  height: 200px;
  overflow-y: scroll;
}

JavaScript代码（script.js）：

const messageForm = document.getElementById("messageForm");
const messagesContainer = document.getElementById("messages");

messageForm.addEventListener("submit", function(event) {
  event.preventDefault();

  const nameInput = document.getElementById("nameInput");
  const messageInput = document.getElementById("messageInput");

  const name = nameInput.value;
  const message = messageInput.value;

  const messageElement = document.createElement("div");
  messageElement.innerHTML = "<strong>" + name + ":</strong> " + message;
  messagesContainer.appendChild(messageElement);

  nameInput.value = "";
  messageInput.value = "";
});

以上代码实现了一个简单的留言板，用户可以输入姓名和留言内容，然后点击提交按钮提交留言。留言会以形式"姓名: 留言内容"的格式显示在留言容器中。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Web前端留言板是一个常见的功能，可以让用户在线留言并展示留言列表。下面是一个简单的Web前端留言板的代码示例。

HTML 结构

首先，需要创建一个HTML文件，来定义留言板的结构。

<!DOCTYPE html>
<html>
<head>
    <title>Web前端留言板</title>
</head>
<body>
    <h1>Web前端留言板</h1>
    <form id="message-form">
        <label for="name">姓名：</label>
        <input type="text" id="name" required>
        <br>
        <label for="message">留言内容：</label>
        <textarea id="message" required></textarea>
        <br>
        <button type="submit">提交留言</button>
    </form>
    <ul id="message-list">
        <!-- 留言列表将被动态地添加到这里 -->
    </ul>

    <!-- 引入脚本文件 -->
    <script src="script.js"></script>
</body>
</html>

上述代码中，包含了一个标题（<h1>），一个表单（<form>）用于留言输入，一个按钮（<button>）用于提交留言，以及一个空的无序列表（<ul>）用于展示留言。

JavaScript 代码

接下来，需要编写JavaScript代码，实现留言板的功能。

// 获取表单元素
const messageForm = document.getElementById('message-form');
const nameInput = document.getElementById('name');
const messageInput = document.getElementById('message');

// 获取留言列表元素
const messageList = document.getElementById('message-list');

// 提交留言的事件处理函数
const submitMessage = (e) => {
    e.preventDefault(); // 阻止表单提交的默认行为

    // 获取用户输入的姓名和留言内容
    const name = nameInput.value;
    const message = messageInput.value;

    // 创建一个新的留言元素
    const li = document.createElement('li');
    li.textContent = `${name}: ${message}`;

    // 添加到留言列表中
    messageList.appendChild(li);

    // 清空输入框
    nameInput.value = '';
    messageInput.value = '';
};

// 监听表单的提交事件
messageForm.addEventListener('submit', submitMessage);

上述代码中，首先通过document.getElementById方法获取相关的HTML元素。然后，定义了一个submitMessage函数作为提交留言的事件处理程序。在该函数中，获取了用户输入的姓名和留言内容，并创建了一个新的<li>元素，将其内容设置为${name}: ${message}。接着，将该新元素添加到留言列表中，并清空输入框的内容。最后，通过addEventListener方法，将submitMessage函数绑定到表单的提交事件上。

CSS 样式

最后，可以添加一些基本的CSS样式来美化留言板。

body {
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
}

form {
    margin-bottom: 20px;
}

label, input, textarea {
    display: block;
    margin-bottom: 10px;
}

button {
    margin-top: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

上述代码中，定义了一些通用的样式，如字体、标题、表单、按钮等。留言列表每个留言之间通过边框分隔。

这样，一个简单的Web前端留言板就完成了。用户可以通过表单输入姓名和留言内容，并点击提交按钮，留言将会被添加到留言列表中。

1年前 0条评论