jQuery实现todo及轮播图

内容：

1.todo程序

2.轮播图

1.todo程序

需求：

实现一个todo程序，可以添加数据，可以删除数据，可以修改数据，可以查看所有数据

另外实现自己的一系列弹窗：用于提示用户的提示框、用于警告的提示框、用于输入信息的输入框、用于选择多个选项中的一个选择框

实现效果：

页面：

jQuery实现todo及轮播图

添加 - 在输入框输入后点击添加如下所示：

jQuery实现todo及轮播图

删除 - 点击每一条todo的删除如下所示：

jQuery实现todo及轮播图

编辑 - 点击每一条todo的编辑如下所示：

jQuery实现todo及轮播图

完成 - 点击每一条todo的完成如下所示：

jQuery实现todo及轮播图

代码：

HTML:

 1 <!-- author: wyb -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>jQuery实现todo程序</title>
 7     <style>
 8         .container{
 9             width: 80%;
10             margin: 0 auto;
11         }
12         .complete{
13             text-decoration: line-through;
14             color: red;
15         }
16         .todo-cell{
17             margin: 5px 0;
18         }
19         .todo-content{
20             display: inline-block;
21             padding: 3px 5px;
22             border: 1px solid lightblue;
23         }
24         .todo-ct{
25             display: inline-block;
26             padding: 3px 5px;
27             border: 1px solid lightblue;
28         }
29         button.indent{
30             margin-right: 12px;
31         }
32 
33     </style>
34 
35 </head>
36 <body>
37 
38 <div class="container">
39     <div class="input-form">
40         <input type="text" id="id-todo-input">
41         <button type="button" id="id-button-add">添加</button>
42     </div>
43     <div id="todo-list"></div>
44 </div>
45 
46 
47 
48 
49 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
50 <script src="myAlert.js"></script>
51 <script src="jQuery_todo.js"></script>
52 
53 
54 </body>
55 </html>

todo程序的HTML