资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/多特蒙德主题本地个人任务清单小demo，你值得尝试！

多特蒙德主题本地个人任务清单小demo，你值得尝试！

wuaiqiu / 1509人阅读

摘要：最后就是用各种的数据进行判断，渲染。否则任务的完成时间会出错，导致页面渲染错误。组件正在开发中，后期会分享，缺少弹窗提示，这里的操作动作很多，完全可以开发一个弹窗组件，方便用。

一，demo背景：

1，可以熟悉原生js

2，平时不知道自己学完js要做些什么东西的小伙伴

3，自己写的，可以当做自己的作品

4，为广大想练习练习原生js的贡献一个素材

二，实现功能：

1，新建/删除任务功能

2，设置/取消星标任务功能

3，设置/取消任务完成功能

4，过期任务自动删除功能（本例期限设置为了2天）

5，任务超时后禁止操作功能

三， 逻辑实现：

把新建的一个任务就抽象成一个对象，该对象里面有自己的创建时间，内容，结束事件，是否为星标任务等等。然后这个对象字符串化存放到localStorage里，每次在要数据时，都从localStorage里面取出数据。最后就是用各种的数据进行If..else判断，渲染Dom。（过程中用到了很多字符串，数组方法，可以增加你对这些方法的熟练度）

四，demo效果展示：

完成了的任务：

星标任务：

五，代码展示：

html：

</>复制代码 
  2.     
  3.     LocalNotepad
  4.     
  5.     
  8.     
  9.     
  10.         
  11.             
    任务起始时间 ：
  12.             
  13.                 
  14.                 
  15.                 
  16.             
  17.             
    务结束时间 ：
  18.             
  19.                 
  20.                 
  21.                 
  22.             
  23.         
  24.         
  25.             
  26.             
  27.         
  28.

css:

</>复制代码 
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     font-family: "Microsoft YaHei"
  5. }
  6. html,body {
  7.     height: 100%;
  8. }
  9. body {
  10.     background: #fafc2a;
  11.     background: url("../images/1.jpg") no-repeat 0 -50px;
  12.     background-size: 100%;
  13.     background-attachment: fixed;
  14. }
  15. a {text-decotation: none;}
  16. strong {font-weight: normal;}
  17. i,b {font-style: none;}
  18. /*样式开始*/
  19. #m-hidden {
  20.     height: 1px;
  21.     background: transparent;
  22. }
  23. #pub-box {
  24.     width: 1000px;
  25.     height: 220px;
  26.     background: rgba(0, 0, 0, 0.5);
  27.     box-sizing: border-box;
  28.     margin: 0 auto;
  29.     padding: 20px;
  30.     margin-top: -140px;
  31.     transition: .6s;
  32. }
  33. #pub-box:hover {
  34.     margin-top: -1px;
  35.     transition: .6s;
  36. }
  37. #pub-box .content {
  38.     width: 100%;
  39.     height: 120px;
  40.     background: rgba(246, 248, 41, 0.5);
  41.     resize: none;
  42.     outline: none;
  43.     border: none;
  44.     box-sizing: border-box;
  45.     padding: 10px;
  46. }
  47. #pub-box .but-box:after {
  48.     content:"";
  49.     display: block;
  50.     width: 0;
  51.     height: 0;
  52.     clear: both;
  53. }
  54. #pub-box .but-box .time-box{
  55.     float: left;
  56. }
  57. #pub-box .but-box .time-box:after {
  58.     content:"";
  59.     display: block;
  60.     width: 0;
  61.     height: 0;
  62.     clear: both;
  63. }
  64. #pub-box .but-box .time-box p {
  65.     float: left;
  66.     margin-top: 25px;
  67.     color: #fafc2a;
  68. }
  69. #pub-box .but-box .time-box .time-begin{}
  70. #pub-box .but-box .time-box .time-end{}
  71. #pub-box .but-box .time-box .time-begin,
  72. #pub-box .but-box .time-box .time-end {
  73.     margin-right: 30px;
  74. }
  75. #pub-box .but-box .time-box .time-begin input,
  76. #pub-box .but-box .time-box .time-end input,
  77. #pub-box .but-box .time-box .time-begin time,
  78. #pub-box .but-box .time-box .time-end time {
  79.     float: left;
  80.     margin: 0 3px;
  81. }
  82. #pub-box .but-box .time-box .time-begin input,
  83. #pub-box .but-box .time-box .time-end input {
  84.     display: block;
  85.     width: 40px;
  86.     height: 22px;
  87.     text-align: center;
  88.     outline: none;
  89.     background: rgba(246, 248, 41, 0.3);
  90.     border: none;
  91.     color: #000;
  92. }
  93. #pub-box .but-box .btn {
  94.     float: right;
  95. }
  96. #pub-box .but-box button {
  97.     display: block;
  98.     float: right;
  99.     width: 70px;
  100.     height: 30px;
  101.     outline: none;
  102.     border: none;
  103.     margin-top: 20px;
  104.     margin-left: 20px;
  105.     letter-spacing: 2px;
  106.     background: #fafc2a;
  107.     color: #000;
  108. }
  109. #pub-box .but-box button:hover {
  110.     background: #f8fa5b;
  111.     color: #555;
  112. }
  113. #content {
  114.     width: 1000px;
  115.     height: auto;
  116.     margin: 50px auto 0 auto;
  117. }
  118. #content .c-b{
  119.     position: relative;
  120.     width: 100%;
  121.     background: rgba(0, 0, 0, 0.5);
  122.     margin-bottom: 20px;
  123.     box-sizing: border-box;
  124.     padding: 20px;
  125.     color: #fafc2a;
  126. }
  127. #content .red-star {
  128.     position: absolute;
  129.     width: 20px;
  130.     height: 20px;
  131.     top: 0px;
  132.     left: 0px;
  133.     text-align: center;
  134.     line-height: 23px;
  135. }
  136. #content .fa-star {
  137.     color: #fafc2a;
  138. }
  139. #content .ms-cont-b {
  140.     width: 100%;
  141. }
  142. #content .ms-cont-b:after {
  143.     content:"";
  144.     display: block;
  145.     width: 0;
  146.     height: 0;
  147.     clear: both;
  148. }
  149. #content .ms-cont-b .ms-cont {
  150.     float: left;
  151.     max-width: 700px;
  152.     word-break: break-all;
  153.     font-size: 18px;
  154.     letter-spacing: 1px;
  155. }
  156. #content .ms-icon {
  157.     float: right;
  158.     width: 80px;
  159.     height: 80px;
  160.     text-align: center;
  161.     font-size: 80px;
  162.     line-height: 80px;
  163.     /*color: #d71d2e;*/
  164.     color: #fafc2a;
  165. }
  166. #content .ms-b {
  167.     width: 100%;
  168.     margin-top: 20px;
  169. }
  170. #content .ms-b:after {
  171.     content:"";
  172.     display: block;
  173.     width: 0;
  174.     height: 0;
  175.     clear: both;
  176. }
  177. #content .ms-b .ms-time {
  178.     width: 600px;
  179.     float: left;
  180.     margin-top: 25px;
  181. }
  182. #content .ms-b .ms-time:after{
  183.     content:"";
  184.     display: block;
  185.     width: 0;
  186.     height: 0;
  187.     clear: both;
  188. }
  189. #content .ms-b .ms-btn {
  190.     float: right;
  191.     // display: none;
  192. }
  193. #content .ms-b .ms-time .create-t {
  194.     float: left;
  195. }
  196. #content .ms-b .ms-time .set-t{
  197.     float:left;
  198.     margin-left: 50px;
  199. }
  200. #content .ms-b .ms-btn button{
  201.     display: block;
  202.     float: right;
  203.     width: 70px;
  204.     height: 30px;
  205.     outline: none;
  206.     border: none;
  207.     margin-top: 20px;
  208.     margin-left: 20px;
  209.     letter-spacing: 2px;
  210. }
  211. #content .ms-b .ms-btn button.star {
  212.     width: 120px;
  213.     background: #fafc2a;
  214.     color: #000;
  215. }
  216. #content .ms-b .ms-btn button.del {
  217.     background: #fafc2a;
  218.     color: #000;
  219. }
  220. #content .ms-b .ms-btn button.finished {
  221.     width: 100px;
  222.     background: #fafc2a;
  223.     color: #000;
  224. }
  225. #content .ms-b .ms-btn button.del:hover {
  226.     background: #f0f204;
  227. }
  228. #content .ms-b .ms-btn button.star:hover {
  229.     background: #f0f204;
  230. }
  231. #content .ms-b .ms-btn button.finished:hover {
  232.     background: #f0f204;
  233. }

js:

</>复制代码 
  1. (function() {
  2.   var textContent = document.querySelector("#pub-box .content"),
  3.       beginTimes = document.querySelectorAll("#pub-box .time-begin input"),
  4.       endTimes = document.querySelectorAll("#pub-box .time-end input"),
  5.       reset = document.querySelector("#pub-box .btn .reset"),
  6.       add = document.querySelector("#pub-box .btn .add"),
  7.       content = document.querySelector("#content"),
  8.       temp = localStorage.getItem("D"),
  9.       id,
  10.       data,
  11.       lcdata;
  12.       
  13.   if (!temp) {
  14.     data = [];
  15.   } else {
  16.     data = JSON.parse(temp);
  17.   }
  18.   /*插入任务*/
  19.   function createAriticle(id, text, createTime, msTime) {
  20.     var str = "
    " +
  21.                 "
    " +
  22.                 "
    " +
  23.                     "
    " + text + "
    " +
  24.                     "
    " + 
  25.                 "" + 
  26.                 "
    " +
  27.                     "
    " +
  28.                         "
    创建于：" + createTime + "
    " +
  29.                         "
    " + msTime +"
    " +
  30.                     "" +
  31.                     "
    " +
  32.                         "" +
  33.                         "" +
  34.                         "" +
  35.                     "" +
  36.                 "" +
  37.             ""
  38.     content.innerHTML = str + content.innerHTML;
  39.   }
  40.   /*删除任务*/
  41.   function deletArticle(self) {
  42.     var id = self.parentNode.parentNode.parentNode.getAttribute("data-id");
  43.     var parent = self.parentNode.parentNode.parentNode.parentNode;
  44.     var arts = document.querySelectorAll(".c-b");
  45.     var s;
  46.     for (var i = 0; i < arts.length; i++) {
  47.       if (arts[i].getAttribute("data-id") == id) {
  48.         parent.removeChild(arts[i]);
  49.         for (var j = 0; j < data.length; j++) {
  50.           if (data[j].id == id) {
  51.             data.splice(j,1);
  52.           }
  53.         }
  54.       }
  55.     }
  56.     s = JSON.stringify(data);
  57.     localStorage.setItem("D", s);
  58.   }
  59.   window.deletArticle = deletArticle;
  60.   /*添加星标任务*/
  61.   function addRedStar(self) {
  62.     var id = self.parentNode.parentNode.parentNode.getAttribute("data-id");
  63.     var str;
  64.     for (var i = 0; i < data.length; i++) {
  65.       if (data[i].id == id) {
  66.         if (!data[i].star) {
  67.           self.parentNode.parentNode.parentNode.children[0].className = "red-star fa fa-star";
  68.           self.innerHTML = "取消星标任务";
  69.           data[i].star = true;
  70.         } else {
  71.           self.parentNode.parentNode.parentNode.children[0].className = "red-star";
  72.           self.innerHTML = "设为星标任务";
  73.           data[i].star = false;
  74.         }
  75.       }
  76.     }
  77.     str = JSON.stringify(data);
  78.     localStorage.setItem("D", str);
  79.   }
  80.   window.addRedStar = addRedStar;
  81.  /*确认任务完成操作*/
  82.   function isFinish(self) {
  83.     var id = self.parentNode.parentNode.parentNode.getAttribute("data-id");
  84.     var str;
  85.     for (var i = 0; i < data.length; i++) {
  86.       if (data[i].id == id) {
  87.         if (data[i].finished == 0) {
  88.           self.parentNode.parentNode.previousSibling.children[1].className = "ms-icon fa fa-check";
  89.           self.innerHTML = "取消完成";
  90.           data[i].finished = 1;
  91.         } else if (data[i].finished == 1) {
  92.           self.parentNode.parentNode.previousSibling.children[1].className = "ms-icon";
  93.           self.innerHTML = "确认完成";
  94.           data[i].finished = 0;
  95.         } else {
  96.           return;
  97.         }
  98.       }
  99.     }
  100.     str = JSON.stringify(data);
  101.     localStorage.setItem("D", str);
  102.   }
  103.   window.isFinish = isFinish;
  104.   /*页面加载完，向页面加载默认任务起始时间*/
  105.   function addDefaultTime() {
  106.     var date = new Date();
  107.     beginTimes[0].placeholder = date.getFullYear();
  108.     beginTimes[1].placeholder = date.getMonth() + 1;
  109.     beginTimes[2].placeholder = date.getDate();
  110.   }
  111.   addDefaultTime();
  112.   /*加载任务*/
  113.   function loadThing() {
  114.     var arr,
  115.         length,
  116.         sets,
  117.         finishs,
  118.         arts,
  119.         stars,
  120.         now = new Date().getTime(),
  121.         d = localStorage.getItem("D");
  122.     if (!d) {
  123.       console.log(d);
  124.       return;
  125.     }
  126.     arr = JSON.parse(d);
  127.     length = arr.length;
  128.     for (var m = 0; m < length; m++) {
  129.       if ((now - arr[m].id) > 259200000) {
  130.         arr.splice(m, 1);
  131.       }
  132.     }
  133.     if (!arr.length) {
  134.       return;
  135.     }
  136.     for (var i = 0; i < length; i++) {
  137.       createAriticle(arr[i].id, arr[i].text, arr[i].createTime, arr[i].msTime);
  138.     }
  139.     arts = document.querySelectorAll(".c-b");
  140.     finishs = document.querySelectorAll(".finished");
  141.     for (var i = 0; i < length; i++) {
  142.       if (arr[i].star) {
  143.         for (var j = 0; j < arts.length; j++) {
  144.           if (arts[j].getAttribute("data-id") == arr[i].id) {
  145.             arts[j].children[0].className = "red-star fa fa-star";
  146.             arts[j].getElementsByClassName("star")[0].innerHTML = "取消星标任务";
  147.           }
  148.         }
  149.       }
  150.       if ((arr[i].em - arr[i].bm) < 0) {
  151.         arr[i].finished = 2;
  152.       } 
  153.       if (arr[i].finished == 0) {
  154.         for (var k = 0; k < arts.length; k++) {
  155.           if (arts[k].getAttribute("data-id") == arr[i].id) {
  156.             arts[k].getElementsByClassName("ms-icon")[0].className = "ms-icon";
  157.             arts[k].getElementsByClassName("finished")[0].innerHTML = "确认完成";
  158.           }
  159.         }
  160.       } else if (arr[i].finished == 1) {
  161.         for (var t = 0; t < arts.length; t++) {
  162.           if (arts[t].getAttribute("data-id") == arr[i].id) {
  163.             arts[t].getElementsByClassName("ms-icon")[0].className = "ms-icon fa fa-check";
  164.             arts[t].getElementsByClassName("finished")[0].innerHTML = "取消完成";
  165.           }
  166.         }
  167.       } else if (arr[i].finished == 2) {
  168.         for (var n = 0; n < arts.length; n++) {
  169.           if (arts[n].getAttribute("data-id") == arr[i].id) {
  170.             arts[n].getElementsByClassName("ms-icon")[0].className = "ms-icon fa fa-close";
  171.             arts[n].getElementsByClassName("finished")[0].style.display = "none";
  172.             arts[n].getElementsByClassName("star")[0].style.display = "none";
  173.           }
  174.         }
  175.       }
  176.     }
  177.   }
  178.   loadThing();
  179.   /*重置按钮*/
  180.   function resetContent() {
  181.     var length = endTimes.length;
  182.     textContent.value = "";
  183.     for (var i = 0; i < length; i++) {
  184.       beginTimes[i].value = "";
  185.       endTimes[i].value = "";
  186.     }
  187.   }
  188.   reset.addEventListener("click", function(ev){
  189.     var ev = ev || event;
  190.     ev.stopPropagation();
  191.     resetContent();
  192.   }, false);
  193.   /*添加任务*/
  194.   add.addEventListener("click", function(ev){
  195.     var ev = ev || event;
  196.     ev.stopPropagation();
  197.     var date = new Date(); 
  198.     var createTime,
  199.         beginTime,
  200.         contText,
  201.         endTime,
  202.         defY,
  203.         defM,
  204.         defD, 
  205.         msTime,
  206.         em,
  207.         bm,
  208.         c,
  209.         id = new Date().getTime();
  210.     if (textContent.value == "") {
  211.       alert("输入不能为空");
  212.       return;
  213.     }
  214.     if (endTimes[0].value == "" || endTimes[1].value == "" || endTimes[2].value == "") {
  215.       alert("结束时间不能留空");
  216.       return;
  217.     }  
  218.     if (beginTimes[0].value == "") {
  219.       defY = beginTimes[0].placeholder;
  220.     } else {
  221.       defY = beginTimes[0].value;
  222.     }
  223.     if (beginTimes[1].value == "") {
  224.       defM = beginTimes[1].placeholder;
  225.     } else {
  226.       defM = beginTimes[1].value;
  227.     }
  228.     if (beginTimes[2].value == "") {
  229.       defD = beginTimes[2].placeholder;
  230.     } else {
  231.       defD = beginTimes[2].value;
  232.     }
  233.     c = id - new Date(date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate()).getTime();
  234.     createTime = date.getFullYear() + "年" +
  235.                   (date.getMonth() + 1) + "月" +
  236.                   date.getDate() + "日";
  237.     endTime = {
  238.       year: endTimes[0].value,
  239.       month: endTimes[1].value,
  240.       day: endTimes[2].value
  241.     }
  242.     em = new Date(endTime.year + "/" + endTime.month + "/" + endTime.day).getTime() + c;
  243.     beginTime = {
  244.       year: defY,
  245.       month: defM,
  246.       day: defD
  247.     }
  248.     bm = new Date(beginTime.year + "/" + beginTime.month + "/" + beginTime.day).getTime() + c;
  249.     msTime = "任务有效期：" + beginTime.year + "年" + beginTime.month + "月" + 
  250.               beginTime.day + "日  至 " + endTime.year + "年" + endTime.month + "月" + 
  251.               endTime.day + "日";
  252.     /*一个文章的整体数据*/
  253.     var contText = {
  254.       text: textContent.value,
  255.       createTime: createTime,
  256.       beginTime: beginTime,
  257.       endTime: endTime,
  258.       star: false,
  259.       finished: 0,
  260.       msTime: msTime,
  261.       id: id,
  262.       bm: bm,
  263.       em: em
  264.     }
  265.     data.push(contText);
  266.     lcdata = JSON.stringify(data);
  267.     localStorage.setItem("D", lcdata);
  268.     createAriticle(contText.id, contText.text, contText.createTime, contText.msTime);
  269.     resetContent();
  270.   }, false);
  271. })()
六，不足之处：

1，在输入日期的时候没有过滤掉非法日期，这里最好能用一个日历组件进行选择日期，能保证日期的准确性。否则任务的完成时间会出错，导致页面渲染错误。（组件正在开发中，后期会分享）
2，缺少弹窗提示，这里的操作动作很多，完全可以开发一个弹窗组件，方便用。体验比较好。（组件正在开发中，后期会分享）
3，创建后的任务不能更改任务内容是个缺陷。

demo分享到此结束，笔者有什么地方错误或者理解不到位的地方还请大家指出来。

GPU云服务器 云服务器 云服务器怎么解决你正尝试从不属于 主题任务 小程序值得开发吗 个人服务器托管值不值得

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112250.html

相关文章

  • 多特蒙德主题本地个人任务清单小demo，你值得尝试！

    摘要：最后就是用各种的数据进行判断，渲染。否则任务的完成时间会出错，导致页面渲染错误。组件正在开发中，后期会分享，缺少弹窗提示，这里的操作动作很多，完全可以开发一个弹窗组件，方便用。 一，demo背景： 1，可以熟悉原生js 2，平时不知道自己学完js要做些什么东西的小伙伴 3，自己写的，可以当做自己的作品 4，为广大想练习练习原生js的贡献一个素材 二，实现功能： 1，新建/删除任务...

    Big_fat_cat 评论0 收藏0

  • 多特蒙德主题本地个人任务清单小demo，你值得尝试！

    摘要：最后就是用各种的数据进行判断，渲染。否则任务的完成时间会出错，导致页面渲染错误。组件正在开发中，后期会分享，缺少弹窗提示，这里的操作动作很多，完全可以开发一个弹窗组件，方便用。 一，demo背景： 1，可以熟悉原生js 2，平时不知道自己学完js要做些什么东西的小伙伴 3，自己写的，可以当做自己的作品 4，为广大想练习练习原生js的贡献一个素材 二，实现功能： 1，新建/删除任务...

    FullStackDeveloper 评论0 收藏0

  • 实现一个稍微复杂的simplelist

    摘要：是一个专门为应用所设计的集中式状态管理架构。此时可以帮助我们实现状态的管理。每个任务都归属于一个清单，有唯一的清单。说到这，一个复杂的的基本结构和功能已经出现了。 使用过一些清单类的应用程序，像 WunderList, Google Keep等，用来记录一些计划和安排，也试着将自己的计划安排同笔记一起整理在 Evernote 中，但是无论哪种方式用起来总觉得少了点什么，如果两者的一些功...

    solocoder 评论0 收藏0

  • 当我们在说“并发、多线程”，说的是什么？

    摘要：兜底任务，处理数据不一致状态的任务。什么是多线程多线程是并发的一种重要形式。通过具体的多线程问题引出多线程编程中的关键点和对应的工具与知识点，轻松学会多线程编程。 这篇文章的目的并不是想教你如何造火箭（面试造火箭，工作拧螺丝），而是想通过对原理和应用案例的有限度剖析来协助你构建起并发的思维，并将操作系统的理论知识与工程实践结合起来，贯穿从学到会的全过程。当然，虽然我们是从实用角度出发，...

    sf_wangchong 评论0 收藏0

  • 上线清单 —— 20 个 Laravel 应用性能优化项

    摘要：此问题称为查询问题。您将只执行两个查询而不是这是巨大的性能提升。这项工作是通过从数据库中执行查询完成的查询可能涉及到表以及其他的一些表。比如查询，视图，时间等等另一个非常酷的工具是，对应用，有优雅的调试助手的美称。 showImg(https://segmentfault.com/img/remote/1460000018339917?w=1280&h=722); 让我们开始吧！假若你...

    MadPecker 评论0 收藏0

发表评论

登陆后可评论

0条评论

wuaiqiu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<