实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.main {
padding: 40px;
max-width: 400px;
margin: 100px auto;
border: 10px solid #2e4988;
background-color: #54cbf9;
color: white;
border-radius: 25px;
font-size: 20px;
text-align: center;
}
.detail {
margin-bottom: 20px;
}
label {
font-size: 24px;
}
label, .comment-block {
display: block;
margin-bottom: 10px;
}
#username{
line-height: 20px;
padding: 5px;
}
textarea {
min-width: 300px;
height: 150px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #00a3d9;
color: white;
text-transform: uppercase;
border: none;
margin-bottom: 30px;
}
button:hover {
background-color: #34bd38;
}
p {
font-size: 28px;
line-height: 28px;
border-bottom: 2px solid #2e4988;
}
li {
list-style: none;
padding: 20px 0;
border-bottom: 1px solid blue;
}
li span {
display: inline-block;
margin-bottom: 15px;
padding-right: 20px;
}
</style>
</head>
<body>
<form class="main" action="index.html">
<div class="detail">
<label for="username">Please enter your username and gender:</label>
<input type="text" id="username" autofocus placeholder="Username" required>
<input type="radio" class="gender" value="Male" name="gender" checked>Male
<input type="radio" class="gender" value="Female" name="gender">Female
</div>
<label for="comment-block">Comment Block</label>
<textarea class="comment-block" id="comment-block" placeholder="leave your message here:"></textarea>
<button type="submit" class="submit">Submit</button>
<button type="reset">Reset</button>
<p>Comment List</p>
<ul class="comment-list"></ul>
</form>
<script>
//find comment block
var comment = document.querySelector(".comment-block");
//find username
var userName = document.querySelector("#username");
//find gender
var userGender = document.querySelector(".gender");
//find message area
var list = document.querySelector(".comment-list");
//find submit Button
var submitBtn = document.querySelector(".submit");
submitBtn.addEventListener('click', addComment, false);
function addComment(evt) {
console.log(evt);
//Create a li element
var items = document.createElement('li');
//get comment text and input to the list
items.innerHTML = '<div>' +
'<span>User:' + userName.value + '</span>' +
'<span>Gender:' + userGender.value + '</span>' +
'<div>Comment:' + comment.value + '</div>' +
'</div>' +
'<button style="margin-top: 20px;margin-bottom:0">Delete</button>';
//Append text to li list beginning
if (list.childElementCount === 0) {
list.appendChild(items);
} else {
list.insertBefore(items, list.firstElementChild);
}
evt.preventDefault();
//clear form value
userName.value = '';
userGender.value = '';
comment.value = '';
}
//delete comment
list.addEventListener('click', delComment, false);
function delComment(evt) {
var confirmMsg = confirm('Are you sure to delete this comment?');
if (confirmMsg === true) {
console.log(this);
console.log(evt.target);
this.removeChild(evt.target.parentElement);
} else {
evt.preventDefault();
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例