收藏
批改状态：未批改
老师批语：
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
