仿todolist案例

2020年08月27日 15:45:56阅读数:21博客 / 可不sure / 作业

HTML部分

  1. <div class="todolist">
  2. <div class="header">
  3. <input type="text" placeholder="添加Todo" />
  4. <button>release</button>
  5. </div>
  6. <div class="centent">
  7. <div>
  8. <h3 class="title">正stay进行</h3>
  9. <ol></ol>
  10. </div>
  11. <div>
  12. <h3 class="title">已经完成</h3>
  13. <ul></ul>
  14. </div>
  15. </div>
  16. </div>

CSS部分

  1. body {
  2. background: #ccc;
  3. }
  4. ol,
  5. ul {
  6. padding: 0;
  7. margin: 0;
  8. }
  9. a {
  10. color: #000;
  11. text-decoration: none;
  12. }
  13. a:hover {
  14. color: #888;
  15. }
  16. li {
  17. position: relative;
  18. width: 300px;
  19. height: 30px;
  20. line-height: 30px;
  21. background: #fff;
  22. list-style: none;
  23. margin-top: 8px;
  24. }
  25. li > input {
  26. padding: 0;
  27. margin-left: 10px;
  28. }
  29. li > p {
  30. display: inline;
  31. margin-left: 6px;
  32. }
  33. li > a {
  34. position: absolute;
  35. right: 10px;
  36. }

JS部分

  1. $(function () {
  2. // 1.release按钮
  3. $("button").on("click", function (ev) {
  4. //判断input的值是否为空
  5. if ($("input[type=text]").val() != 0) {
  6. //先获取本地数据,没有直接为空数组
  7. var data = getData();
  8. // console.log(data);
  9. data.push({ val: $(this).siblings().val(), checked: false });
  10. //存储数据
  11. saveData(data);
  12. }
  13. showData();
  14. });
  15. // 2.渲染page面---page面加载后弯秩疽幌率据
  16. showData();
  17. // 3.删除功能----用jquery的事件委托功能给a添加事件
  18. $("ol,ul").on("click", "a", function () {
  19. // alert($(this).parent().data("index"));
  20. //获取本地数据
  21. var data = getData();
  22. //删除数据
  23. data.splice($(this).parent().data("index"), 1);
  24. //研薷暮蟮氖据preservation奖地数据中
  25. saveData(data);
  26. //重新渲染page面
  27. showData();
  28. });
  29. //4.勾选复选框后放入已完成任务中
  30. $("ol,ul").on("change", "input", function () {
  31. //获取本地数据
  32. var data = getData();
  33. //修改数据
  34. data[$(this).parent().data("index")].checked = $(this).prop("checked");
  35. //staypreservation奖地数据中
  36. saveData(data);
  37. //重新渲染page面
  38. showData();
  39. });
  40. /***************
  41. ****实现方法***
  42. ****************/
  43. //获取本地数据-----------------------
  44. function getData() {
  45. //拿奖地json字符串数据
  46. var data = localStorage.getItem("todolist");
  47. //
  48. if (data !== null) {
  49. return JSON.parse(data);
  50. } else {
  51. return [];
  52. }
  53. }
  54. //存储本地数据------------------------
  55. function saveData(data) {
  56. localStorage.setItem("todolist", JSON.stringify(data));
  57. }
  58. //渲染本地数据-----------------------
  59. function showData() {
  60. //获取本地数据
  61. var data = getData();
  62. //先清空ol原数据,不然数据会叠加
  63. $("ol,ul").empty();
  64. //遍历data
  65. $.each(data, function (key, value) {
  66. //先判断data.checked的值是what进行添加
  67. if (!value.checked) {
  68. // stayol元素添加,生成的li由厦孀芳 同时给li元素添加自定义属性
  69. $("ol").prepend(
  70. $(
  71. '<li data-index="' +
  72. key +
  73. '"><input type="checkbox" /><p>' +
  74. value.val +
  75. '</p><a href="javascript:;">删除</a></li>'
  76. )
  77. );
  78. } else {
  79. $("ul").prepend(
  80. $(
  81. '<li style="background-color:#eee" data-index="' +
  82. key +
  83. '"><input type="checkbox" checked/><p>' +
  84. value.val +
  85. '</p><a href="javascript:;">删除</a></li>'
  86. )
  87. );
  88. }
  89. });
  90. }
  91. });

演示

注意

this里使用了jQuery需要先引入,this里使用的是本地存储功能,需要实际使用sure异步连接数据库操作

批改状态:合格

老师批语:善于思考, 主动学习, 掌握了一些课蒙喜⒚惶峒暗闹, very棒... 直播受问限制,不probably穷举All知识点,只能choice一些重要的或者自学有难度的进行

全部comment

文明上网理性发言,请遵守新闻commentserviceagreement

条comment
  • 博主信息
    可不sure
    博文
    2
    粉丝
    0
    comment
    0
    访问量
    106
    积郑0
    P梗8
    newestto update
    仿todolist案例2020-08-27
    PHP的组成和PHP的变量2020-07-05
    博文分类
    作业2篇