利用JavaScript书写代码并用HTML格式:制作一个简易留言板
时间: 2024-01-20 11:04:27 浏览: 25
以下是一个简单的JavaScript代码和HTML结构,用于制作一个简易留言板:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea><br>
<button type="button" onclick="addMessage()">提交</button>
</form>
<h2>留言列表</h2>
<ul id="messageList">
</ul>
<script>
function addMessage() {
var nameInput = document.getElementById("name");
var messageInput = document.getElementById("message");
var list = document.getElementById("messageList");
var name = nameInput.value;
var message = messageInput.value;
var li = document.createElement("li");
li.innerHTML = "<b>" + name + "</b>: " + message;
list.appendChild(li);
nameInput.value = "";
messageInput.value = "";
}
</script>
</body>
</html>
```
这个留言板包含一个表单,用户可以输入他们的姓名和留言。提交表单会触发`addMessage()`函数,该函数将姓名和留言添加到一个`<ul>`元素中,以显示留言列表。每个留言都会包含一个加粗的姓名和留言内容。