请根据以下要求,使用JavaScript和 jQuery 编写一个简单的网页。 1.创建一个包含一个按钮和一个文本框的表单。 2.当用户点击按钮时,将文本框内的内容追加在页面上,最终以列表形式展示历史输入内容 3.当用户点击列表内容的某条记录时,使用动画效果删除该记录
时间: 2024-03-16 09:42:46 浏览: 24
可以使用以下代码实现:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>历史输入</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="inputForm">
<input type="text" id="inputField" placeholder="请输入内容">
<button type="button" id="submitButton">提交</button>
</form>
<ul id="historyList"></ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</body>
</html>
```
JavaScript/jQuery 代码:
```
$(function() {
// 获取表单元素和历史记录列表元素
var inputForm = $('#inputForm');
var inputField = $('#inputField');
var submitButton = $('#submitButton');
var historyList = $('#historyList');
// 点击提交按钮时,将文本框内的内容追加在页面上
submitButton.click(function() {
var inputText = inputField.val();
if (inputText) {
var listItem = $('<li>').text(inputText);
historyList.append(listItem);
inputField.val('');
}
});
// 点击列表中的某条记录时,使用动画效果删除该记录
historyList.on('click', 'li', function() {
$(this).fadeOut(500, function() {
$(this).remove();
});
});
});
```
CSS 代码:
```
ul {
list-style-type: none;
padding: 0;
}
li {
cursor: pointer;
}
```
在这个例子中,我们使用了 jQuery 库来简化 JavaScript 代码。当用户点击提交按钮时,我们将文本框内的内容转化为一个列表项,并将其添加到历史记录列表中。当用户点击列表中的某条记录时,我们使用动画效果将其删除。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)