html编程,要求:底部是输入框,输入一些文字确定后,上面显示出来,要求显示格式为:先是复选框,接着是文字,接着是删除按钮,要求点击删除按钮能删除输入的文字和复选框
时间: 2024-04-17 16:27:02 浏览: 14
你可以使用以下的HTML代码来实现你的要求:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.message {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.checkbox {
margin-right: 10px;
}
.delete-button {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="messageContainer"></div>
<input type="text" id="inputBox" placeholder="输入文字">
<button onclick="displayMessage()">确定</button>
<script>
function displayMessage() {
var inputText = document.getElementById("inputBox").value;
var messageContainer = document.getElementById("messageContainer");
var message = document.createElement("div");
message.classList.add("message");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.classList.add("checkbox");
var text = document.createElement("div");
text.textContent = inputText;
var deleteButton = document.createElement("button");
deleteButton.textContent = "删除";
deleteButton.classList.add("delete-button");
deleteButton.onclick = function() {
messageContainer.removeChild(message);
};
message.appendChild(checkbox);
message.appendChild(text);
message.appendChild(deleteButton);
messageContainer.appendChild(message);
}
</script>
</body>
</html>
```
这段代码创建了一个包含输入框和确定按钮的页面。当点击确定按钮后,会将输入框中的文本以指定的格式显示在页面上。每条消息由一个复选框、一个文本和一个删除按钮组成。点击删除按钮会从页面上删除对应的消息,包括文本和复选框。