任意选题自由发挥,提交一份完整的作品。作品需jquery知识点为主
时间: 2023-08-26 08:21:05 浏览: 59
题目:使用jQuery实现一个简单的待办事项列表应用
作品要求:
1. 有一个输入框和一个添加按钮,用户可以在输入框中输入待办事项,并点击添加按钮将其添加到列表中。
2. 列表中的每个待办事项应该包含一个复选框和一个删除按钮,用户可以通过勾选复选框来标记已完成的事项,也可以通过点击删除按钮来删除事项。
3. 用户关闭浏览器之后重新打开应用,之前添加的待办事项应该仍然存在。
实现思路:
1. 使用localStorage来存储待办事项列表,每次打开应用时从localStorage中读取数据并渲染到页面上。
2. 使用jQuery的事件委托机制来处理复选框和删除按钮的点击事件。
实现代码:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<input type="text" id="new-todo" placeholder="Add New Todo">
<ul id="todo-list"></ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS部分:
```css
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
#new-todo {
width: 100%;
height: 40px;
font-size: 24px;
padding: 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
#todo-list {
list-style: none;
padding: 0;
margin: 0;
}
#todo-list li {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 5px;
}
#todo-list li label {
flex-grow: 1;
margin-right: 20px;
}
#todo-list li input[type="checkbox"] {
margin-right: 10px;
}
#todo-list li button {
background-color: #f44336;
color: white;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
```
JavaScript部分:
```javascript
$(function() {
// 从localStorage中读取待办事项列表
var todos = JSON.parse(localStorage.getItem('todos')) || [];
// 将待办事项列表渲染到页面上
render();
// 添加新的待办事项
$('#new-todo').on('keyup', function(event) {
if (event.keyCode === 13) {
var todoText = $(this).val();
if (todoText) {
todos.push({text: todoText, completed: false});
$(this).val('');
render();
}
}
});
// 标记已完成的待办事项
$('#todo-list').on('change', 'input[type="checkbox"]', function() {
var index = $(this).parent().index();
todos[index].completed = $(this).is(':checked');
save();
});
// 删除待办事项
$('#todo-list').on('click', 'button', function() {
var index = $(this).parent().index();
todos.splice(index, 1);
render();
});
// 渲染待办事项列表
function render() {
$('#todo-list').empty();
for (var i = 0; i < todos.length; i++) {
var todo = todos[i];
var $li = $('<li>');
var $label = $('<label>').text(todo.text);
var $checkbox = $('<input>').attr('type', 'checkbox').prop('checked', todo.completed);
var $button = $('<button>').text('Delete');
$li.append($checkbox).append($label).append($button);
$('#todo-list').append($li);
}
save();
}
// 将待办事项列表保存到localStorage中
function save() {
localStorage.setItem('todos', JSON.stringify(todos));
}
});
```
完整的应用代码已经实现了一个简单的待办事项列表应用,用户可以在输入框中输入待办事项并添加到列表中,也可以标记已完成的事项和删除事项。并且用户关闭浏览器之后重新打开应用,之前添加的待办事项会仍然存在。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)