zoukankan html css js c++ java

添加功能todolist练习

css

  1 /*base*/
  2 body {
  3   background: #fff;
  4 }
  5 
  6 .btn {
  7   display: inline-block;
  8   padding: 4px 12px;
  9   margin-bottom: 0;
 10   font-size: 14px;
 11   line-height: 20px;
 12   text-align: center;
 13   vertical-align: middle;
 14   cursor: pointer;
 15   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 16   border-radius: 4px;
 17 }
 18 
 19 .btn-danger {
 20   color: #fff;
 21   background-color: #da4f49;
 22   border: 1px solid #bd362f;
 23 }
 24 
 25 .btn-danger:hover {
 26   color: #fff;
 27   background-color: #bd362f;
 28 }
 29 
 30 .btn:focus {
 31   outline: none;
 32 }
 33 
 34 
 35 /*app*/
 36 .todo-container {
 37    600px;
 38   margin: 0 auto;
 39 }
 40 .todo-container .todo-wrap {
 41   padding: 10px;
 42   border: 1px solid #ddd;
 43   border-radius: 5px;
 44 }
 45 
 46 /*header*/
 47 .todo-header input {
 48    560px;
 49   height: 28px;
 50   font-size: 14px;
 51   border: 1px solid #ccc;
 52   border-radius: 4px;
 53   padding: 4px 7px;
 54 }
 55 
 56 .todo-header input:focus {
 57   outline: none;
 58   border-color: rgba(82, 168, 236, 0.8);
 59   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 60 }
 61 
 62 /*main*/
 63 .todo-main {
 64   margin-left: 0px;
 65   border: 1px solid #ddd;
 66   border-radius: 2px;
 67   padding: 0px;
 68 }
 69 
 70 .todo-empty {
 71   height: 40px;
 72   line-height: 40px;
 73   border: 1px solid #ddd;
 74   border-radius: 2px;
 75   padding-left: 5px;
 76   margin-top: 10px;
 77 }
 78 /*item*/
 79 li {
 80   list-style: none;
 81   height: 36px;
 82   line-height: 36px;
 83   padding: 0 5px;
 84   border-bottom: 1px solid #ddd;
 85 }
 86 
 87 li label {
 88   float: left;
 89   cursor: pointer;
 90 }
 91 
 92 li label li input {
 93   vertical-align: middle;
 94   margin-right: 6px;
 95   position: relative;
 96   top: -1px;
 97 }
 98 
 99 li button {
100   float: right;
101   display: none;
102   margin-top: 3px;
103 }
104 
105 li:before {
106   content: initial;
107 }
108 
109 li:last-child {
110   border-bottom: none;
111 }
112 
113 /*footer*/
114 .todo-footer {
115   height: 40px;
116   line-height: 40px;
117   padding-left: 6px;
118   margin-top: 5px;
119 }
120 
121 .todo-footer label {
122   display: inline-block;
123   margin-right: 20px;
124   cursor: pointer;
125 }
126 
127 .todo-footer label input {
128   position: relative;
129   top: -1px;
130   vertical-align: middle;
131   margin-right: 5px;
132 }
133 
134 .todo-footer button {
135   float: right;
136   margin-top: 5px;
137 }

  1 <!doctype html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="utf-8">
  5         <title>未完成版</title>
  6         <link rel="stylesheet" href="index.css">
  7         <style>
  8             .todo-main li button {
  9                 display: none;
 10             }
 11         </style>
 12         <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
 13         <script type="text/javascript">
 14             $(function () {
 15 //              模拟数据    实际的开发当中 根据后台接口来的
 16                 var dataJson = [{
 17                     'content':'唱歌'
 18                 },{
 19                     'content':'滑雪'
 20                 },{
 21                     'content':'遛狗'
 22                 }];
 23 //                获取ul元素
 24                 var $todoMain = $('.todo-main');
 25 //                获取全选按钮
 26                 var $checkAll = $('#checkAll');
 27                 
 28 //                数据绑定  1.页面初始化
 29                 function bindData(data) {
 30 //                    循环拼装节点
 31                     for (var i = 0; i < data.length; i++) {
 32                         $todoMain.append('<li class="todoItem" style="background: rgb(255, 255, 255);"><label>' +
 33                             '<input type="checkbox"><span>'+data[i].content+'</span></label>' +
 34                             '<button class="btn btn-danger" style="display: none;">删除</button></li>')
 35                     }
 36 //                    更新任务总数
 37                     allTodos();
 38                 }
 39                 bindData(dataJson);
 40                 
 41 //                更新任务总数，用的次数多，用函数封装
 42                 function allTodos() {
 43 //                  ul当中有多少个li 就有多少个任务 所以直接使用li的长度即可
 44                     $('#allTodos').html($todoMain.children('li').length)
 45                 }
 46                 
 47 //                更新已完成任务数，用的次数多，用函数封装
 48                 function allCompletedTodos() {
 49 //                  当前已经选中多少个复选框 就有多少个已完成任务
 50                     $('#allCompletedTodos').html($todoMain.find(':checkbox:checked').length)
 51                 }
 52                 
 53 //                复选框单击事件
 54                 $('.todoItem input').click(function () {
 55 //                  更新已完成任务数
 56                     allCompletedTodos();
 57 //                判断所有的任务都被选中了
 58                     $checkAll.prop('checked',$todoMain.find(':checkbox:not(:checked)').length === 0);
 59 //                    $checkAll.prop('checked',$('#allTodos').html() == $('#allCompletedTodos').html())
 60                 })
 61                 
 62 //                全选按钮
 63                 $checkAll.click(function () {
 64 //                  让所有的复选框 与全选按钮的checked状态保持一致
 65                     $todoMain.find(':checkbox').prop('checked',this.checked)
 66 //                    更新已完成任务数
 67                     allCompletedTodos();
 68                 });
 69                 
 70 // //                移入移出li
 71 //                 $('.todoItem').hover(function () {
 72 //                     //颜色背景变化
 73 //                     $(this).css('background','#ccc');
 74 //                     //删除按钮出现
 75 //                     $(this).children('button').show();
 76 //                 },function () {
 77 //                     $(this).css('background','#fff');
 78 //                     $(this).children('button').hide();
 79 //                 });
 80                 
 81                 // 给父元素绑定,事件委派 $('.todoItem')
 82                 // 第一个参数;选择器字符窜
 83                  $todoMain.delegate(('.todoItem'), 'mouseover' ,function(){
 84                      //移入事件，颜色变化，删除按钮出来
 85                      $(this).css('background','pink')
 86                      // $(this).children('.btn-danger').css('display','block')
 87                      $(this).children('.btn-danger').show()
 88                      
 89                  })
 90                  
 91                  $todoMain.delegate(('.todoItem'), 'mouseout' ,function(){
 92                       //移出事件，颜色消失，删除按钮消失
 93                       $(this).css('background','#fff')
 94                       $(this).children('.btn-danger').hide()                 
 95                                       
 96                  })
 97                 
 98 //                删除按钮
 99                 $('.todoItem>button').click(function () {
100 //                    点击删除按钮 删除的是当前这个按钮的父元素li
101                     $(this).parent().remove();
102 //                    更新任务总数
103                     allTodos();
104 //                    更新已完成任务数
105                     allCompletedTodos();
106 //                    如果删除某几个任务时 剩余的任务全都选中 全选的状态需要更新
107 //                    需要确定当前任务列表当中还存在任务  全选才可以被选中
108                     $checkAll.prop('checked',$todoMain.children('li').length!=0 &&
109                         $todoMain.find(':checkbox:not(:checked)').length === 0)
110                 })
111                 
112                 
113                 //                清除已完成任务按钮
114                                 $('#removeAllCompleted').click(function () {
115                                   $todoMain.find(':checkbox:checked').parent().parent().remove();
116                 //                  更新任务总数
117                                     allTodos();
118                 //                    更新已完成任务数
119                                     allCompletedTodos();
120                 //                    全选按钮只能是false状态
121                 //                    点击这个按钮之后  只有两种情况
122                 //                    1.删除所有选中的  留下一些 没有被选中的   这个时候全选不需要被选中
123                 //                    2.所有任务都被选中了 直接清空了所有任务  这个时候全选也不需要被选中
124                                     $checkAll.prop('checked',false);
125                                 })
126                                 
127                                 
128                 //                根据输入的值 创建新的任务
129                                 $('#newTodo').keyup(function (event) {
130                 //                  所有创建相关的逻辑 都要在按下回车的前提下执行
131                                     if(event.keyCode == 13){
132                 //                      判断输入的值 去除空格后是否为空
133                                         if($.trim($(this).val())){
134                 //                          输入有效
135                 //                            根据当前输入框的value  执行创建逻辑
136                                             var newData = [{
137                                                 'content':$(this).val()
138                                             }];
139                                             bindData(newData);
140                 //                        更新全选状态 因为新增的任务一定是未完成状态 所以需要更新 且一定为false
141                                             $checkAll.prop('checked',false);
142                                         }else{
143                 //                            输入无效
144                                             alert('请不要输入空信息')
145                                         }
146                 //                        清空输入框
147                                         $(this).val('');
148                                     }
149                                 })
150 
151             })
152         </script>
153     </head>
154 
155     <body>
156         <div id="root">
157             <div class="todo-container">
158                 <div class="todo-wrap">
159                     <div class="todo-header">
160                         <input id="newTodo" type="text" placeholder="请输入你的任务名称，按回车键确认" />
161                     </div>
162                     <ul class="todo-main">
163 
164                     </ul>
165                     <div class="todo-footer">
166                         <label>
167           <input id="checkAll" type="checkbox"/>
168         </label>
169                         <span>
170           已完成<span id="allCompletedTodos">0</span> / 全部<span id="allTodos">2</span>
171                         </span>
172                         <button id="removeAllCompleted" class="btn btn-danger">清除已完成任务</button>
173                     </div>
174                 </div>
175             </div>
176         </div>
177     </body>
178 
179 </html>

查看全文

相关阅读:
模糊化控制
 第8章控制对象的访问（setter、getter、proxy）
第7章面向对象与原型
 Termux键盘配置
 在md里画流程图
 设置浏览器不缓存文件
 安卓手机使用Termux及搭建FTP服务器
 第6章未来的函数：生成器和promise
第5章精通函数：闭包和作用域
 第4章函数进阶：理解函数调用

原文地址：https://www.cnblogs.com/fsg6/p/12952518.html