帮我写一个在线学习系统讨论区的前端代码
时间: 2024-06-13 12:05:17 浏览: 11
以下是一个简单的在线学习系统讨论区的前端代码,使用了HTML、CSS和JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>在线学习系统讨论区</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
margin: 0;
}
main {
display: flex;
flex-direction: column;
margin: 10px;
}
form {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
label {
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"], textarea {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
margin-bottom: 10px;
}
button {
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
article {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
article h2 {
margin-top: 0;
}
article p {
margin-top: 0;
}
</style>
</head>
<body>
<header>
<h1>在线学习系统讨论区</h1>
</header>
<main>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="message">留言:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">提交</button>
</form>
<div id="messages"></div>
</main>
<script>
// JavaScript代码
const form = document.querySelector('form');
const messagesDiv = document.querySelector('#messages');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单提交
// 获取表单数据
const name = form.elements.name.value;
const message = form.elements.message.value;
// 创建新的留言
const article = document.createElement('article');
const h2 = document.createElement('h2');
h2.textContent = name;
const p = document.createElement('p');
p.textContent = message;
article.appendChild(h2);
article.appendChild(p);
// 添加到页面中
messagesDiv.appendChild(article);
// 清空表单
form.reset();
});
</script>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)