在前端实现七夕表白的代码可以如下:
HTML部分:
<!DOCTYPE html>
<html>
<head>
<title>七夕表白</title>
<style>
#message-container {
margin-top: 150px;
text-align: center;
}
#message {
font-size: 30px;
}
#input-container {
margin-top: 50px;
text-align: center;
}
#input {
width: 300px;
height: 30px;
font-size: 20px;
}
#submit {
margin-top: 20px;
width: 100px;
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="message-container">
<p id="message"></p>
</div>
<div id="input-container">
<input type="text" id="input" placeholder="请输入您要表白的话">
<button id="submit">提交</button>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript部分(script.js文件):
window.onload = function() {
var messageEl = document.getElementById('message');
var inputEl = document.getElementById('input');
var submitBtn = document.getElementById('submit');
submitBtn.addEventListener('click', function() {
var message = inputEl.value;
if (message.length > 0) {
messageEl.innerHTML = '我想对你说:' + message;
} else {
messageEl.innerHTML = '请输入您要表白的话';
}
inputEl.value = '';
});
}
以上代码实现了一个简单的七夕表白页面,用户可以在输入框中输入表白的话,点击提交按钮后会在页面上显示表白的话语。