5月9日作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单留言表小案例</title>
</head>
<style>

button{
background-color: cornflowerblue;
border-radius: 10%;
}

#comment{
height: 50px;
}
</style>
<body>

<div class="wk">
<form action="#" method="get" name="STYLE-NAME">
<h1>Contact Form
<span>添加留言</span>
</h1>

<label class="box2" for="comment">请输入留言 :</label>
<input type="text" id="comment" onkeydown="addComment( this)" placeholder="请输入留言内容" autofocus>
<span id="comment-tips">*</span>
</form>

<ul id="list"></ul>
</div>

<script>
function addComment(comment) {
if (event.keyCode === 13) {
var item = document.createElement('li');
item.innerHTML = comment.value;
item.innerHTML += '  <button onclick="del(this)">删除</button>';

// 将留言添加到列表中
var list = document.querySelector('#list');
if (list.childElementCount === 0){
list.append(item);
} else{
// 如果已经有留言内容了
var first = list.firstElementChild;
list.insertBefore(item,first);
}
// 清空留言内容
comment.value = '';
}
}

// 删除按钮函数
function del(ele) {
confirm('是否删除') ? ele.parentElement.remove() : false;
}
</script>

</body>
</html>

相关文章