请用JavaScript写一个表白网站
时间: 2023-03-21 13:03:51 浏览: 80
好的,以下是一个简单的用JavaScript编写的表白网站示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表白网站</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #ff69b4;
}
input[type="text"] {
padding: 10px;
border-radius: 5px;
border: none;
font-size: 20px;
margin-bottom: 20px;
}
button {
background-color: #ff69b4;
border-radius: 5px;
border: none;
padding: 10px;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.message {
display: none;
margin-top: 20px;
}
.message.show {
display: block;
}
</style>
</head>
<body>
<h1>我想对你说...</h1>
<input type="text" id="message-input" placeholder="请输入你要说的话">
<br>
<button id="submit-btn">表白</button>
<div class="message" id="message">
<p id="message-text"></p>
</div>
<script src="app.js"></script>
</body>
</html>
```
JavaScript代码:
```
const submitBtn = document.getElementById('submit-btn');
const messageInput = document.getElementById('message-input');
const message = document.getElementById('message');
const messageText = document.getElementById('message-text');
submitBtn.addEventListener('click', function() {
const messageContent = messageInput.value;
messageText.textContent = messageContent;
message.classList.add('show');
});
```
该表白网站包含一个输入框和一个提交按钮。当用户输入表白的内容并点击提交按钮时,JavaScript代码会获取输入框的内容并将其显示在页面上。在页面上方会有一个标题,下方会显示用户输入的内容。
阅读全文