Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:做得很好
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单的留言板功能</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
height: 98.5vh;
}
.container {
margin: 0 auto;
padding: 0 20px;
max-width: 1170px;
}
h1 {
margin: 15px 0;
}
textarea {
display: block;
width: 100%;
height: auto;
min-height: 300px;
line-height: 20px;
margin-bottom: 20px;
padding: 5px 10px;
border: 1px solid transparent;
border-radius: 2px;
transition: all .3s;
outline: 0;
resize: vertical;
}
textarea:focus {
border-color: #03a9f4 !important;
}
button {
min-width: 100px;
height: 38px;
line-height: 38px;
border: 1px solid #eaeaea;
color: #666;
padding: 0 18px;
background-color: #fff;
text-align: center;
font-size: 14px;
border-radius: 2px;
cursor: pointer;
transition: all .3s;
}
button:hover {
opacity: .8;
border-color: #03a9f4;
}
.list>li {
display: flex;
place-content: space-between;
background-color: #fff;
line-height: 36px;
margin-bottom: 5px;
border-radius: 5px;
padding: 0 8px;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center;">留言板</h1>
<div class="message" style="margin-bottom: 20px;">
<textarea placeholder="请输入留言内容, 也可以使用快捷键Ctrl+Enter提交"></textarea>
<div style="text-align: right;">
<button>提交</button>
</div>
</div>
<ul class="list">
</ul>
</div>
<script>
let text = document.querySelector("textarea");
let btn = document.querySelector("button");
let list = document.querySelector(".list");
// 监听提交快捷键: Ctrl+Enter
text.addEventListener('keypress', function (event) {
if (event.key == "\n") {
btn.click();
}
})
// 监听点击提交按钮
btn.addEventListener('click', function (event) {
submit();
})
function submit() {
if (text.value.length === 0) {
alert('留言不能为空');
text.focus();
return false;
}
let itemsView = `
<li>
<div>${text.value}</div>
<div>${getDate()}</div>
</li>
`;
list.insertAdjacentHTML("afterbegin", itemsView);
text.value = '';
alert('提交成功');
}
function getDate() {
let date = new Date();
return date.getFullYear() + '-' + date.getMonth() + '-' + date.getDay() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}
</script>
</body>
</html>