多特蒙德主題本地我的任務清單小demo，你值得嘗試！

時間  2019-11-10
標籤 多特蒙德 主題 本地 我的 任務 清單 demo 值得 嘗試 简体版
原文   原文鏈接

一，demo背景：

  • 1，能夠熟悉原生jsjavascript

  • 2，平時不知道本身學完js要作些什麼東西的小夥伴css

  • 3，本身寫的，能夠當作本身的做品html

  • 4，爲廣大想練習練習原生js的貢獻一個素材java

二，實現功能：

  • 1，新建/刪除任務功能數組

  • 2，設置/取消星標任務功能this

  • 3，設置/取消任務完成功能url

  • 4，過時任務自動刪除功能（本例期限設置爲了2天）spa

  • 5，任務超時後禁止操做功能3d

三， 邏輯實現：

把新建的一個任務就抽象成一個對象，該對象裏面有本身的建立時間，內容，結束事件，是否爲星標任務等等。而後這個對象字符串化存放到localStorage裏，每次在要數據時，都從localStorage裏面取出數據。最後就是用各類的數據進行If..else判斷，渲染Dom。（過程當中用到了不少字符串，數組方法，能夠增長你對這些方法的熟練度）code

四，demo效果展現：

完成了的任務：

圖片描述

星標任務：

圖片描述

五，代碼展現：

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LocalNotepad</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="m-hidden"></div>
<div id="pub-box">
    <textarea class="content" placeholder="爲你添加新的任務"></textarea>
    <div class="but-box">
        <div class="time-box">
            <p class="static">任務起始時間 ：</p>
            <p class="time-begin">
                <input type="text" class="t-b-year" placeholder=""><time>年</time>
                <input type="text" class="t-b-mon" placeholder=""><time>月</time>
                <input type="text" class="t-b-day" placeholder=""><time>日</time>
            </p>
            <p class="static">務結束時間 ：</p>
            <p class="time-end">
                <input type="text" class="t-b-year"><time>年</time>
                <input type="text" class="t-b-mon"><time>月</time>
                <input type="text" class="t-b-day"><time>日</time>
            </p>
        </div>
        <div class="btn">
            <button class="reset">重置</button>
            <button class="add">添加</button>
        </div>
    </div>
</div>
<div id="content">
</div>
<script type="text/javascript" src="js/Tool.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

css:

* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei"
}
html,body {
    height: 100%;
}
body {
    background: #fafc2a;
    background: url('../images/1.jpg') no-repeat 0 -50px;
    background-size: 100%;
    background-attachment: fixed;
}
a {text-decotation: none;}
strong {font-weight: normal;}
i,b {font-style: none;}

/*樣式開始*/
#m-hidden {
    height: 1px;
    background: transparent;
}
#pub-box {
    width: 1000px;
    height: 220px;
    background: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px;
    margin-top: -140px;
    transition: .6s;
}
#pub-box:hover {
    margin-top: -1px;
    transition: .6s;
}
#pub-box .content {
    width: 100%;
    height: 120px;
    background: rgba(246, 248, 41, 0.5);
    resize: none;
    outline: none;
    border: none;
    box-sizing: border-box;
    padding: 10px;
}
#pub-box .but-box:after {
    content:'';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
#pub-box .but-box .time-box{
    float: left;
}
#pub-box .but-box .time-box:after {
    content:'';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
#pub-box .but-box .time-box p {
    float: left;
    margin-top: 25px;
    color: #fafc2a;
}
#pub-box .but-box .time-box .time-begin{}
#pub-box .but-box .time-box .time-end{}
#pub-box .but-box .time-box .time-begin,
#pub-box .but-box .time-box .time-end {
    margin-right: 30px;
}
#pub-box .but-box .time-box .time-begin input,
#pub-box .but-box .time-box .time-end input,
#pub-box .but-box .time-box .time-begin time,
#pub-box .but-box .time-box .time-end time {
    float: left;
    margin: 0 3px;
}
#pub-box .but-box .time-box .time-begin input,
#pub-box .but-box .time-box .time-end input {
    display: block;
    width: 40px;
    height: 22px;
    text-align: center;
    outline: none;
    background: rgba(246, 248, 41, 0.3);
    border: none;
    color: #000;
}
#pub-box .but-box .btn {
    float: right;
}
#pub-box .but-box button {
    display: block;
    float: right;
    width: 70px;
    height: 30px;
    outline: none;
    border: none;
    margin-top: 20px;
    margin-left: 20px;
    letter-spacing: 2px;
    background: #fafc2a;
    color: #000;
}
#pub-box .but-box button:hover {
    background: #f8fa5b;
    color: #555;
}
#content {
    width: 1000px;
    height: auto;
    margin: 50px auto 0 auto;
}
#content .c-b{
    position: relative;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 20px;
    color: #fafc2a;
}
#content .red-star {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    left: 0px;
    text-align: center;
    line-height: 23px;
}
#content .fa-star {
    color: #fafc2a;
}
#content .ms-cont-b {
    width: 100%;
}
#content .ms-cont-b:after {
    content:'';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
#content .ms-cont-b .ms-cont {
    float: left;
    max-width: 700px;
    word-break: break-all;
    font-size: 18px;
    letter-spacing: 1px;
}
#content .ms-icon {
    float: right;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 80px;
    line-height: 80px;
    /*color: #d71d2e;*/
    color: #fafc2a;
}
#content .ms-b {
    width: 100%;
    margin-top: 20px;
}
#content .ms-b:after {
    content:'';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
#content .ms-b .ms-time {
    width: 600px;
    float: left;
    margin-top: 25px;
}
#content .ms-b .ms-time:after{
    content:'';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
#content .ms-b .ms-btn {
    float: right;
    // display: none;
}
#content .ms-b .ms-time .create-t {
    float: left;
}
#content .ms-b .ms-time .set-t{
    float:left;
    margin-left: 50px;
}
#content .ms-b .ms-btn button{
    display: block;
    float: right;
    width: 70px;
    height: 30px;
    outline: none;
    border: none;
    margin-top: 20px;
    margin-left: 20px;
    letter-spacing: 2px;
}
#content .ms-b .ms-btn button.star {
    width: 120px;
    background: #fafc2a;
    color: #000;
}
#content .ms-b .ms-btn button.del {
    background: #fafc2a;
    color: #000;
}
#content .ms-b .ms-btn button.finished {
    width: 100px;
    background: #fafc2a;
    color: #000;
}
#content .ms-b .ms-btn button.del:hover {
    background: #f0f204;
}
#content .ms-b .ms-btn button.star:hover {
    background: #f0f204;
}
#content .ms-b .ms-btn button.finished:hover {
    background: #f0f204;
}

js:

(function() {
  var textContent = document.querySelector('#pub-box .content'),
      beginTimes = document.querySelectorAll('#pub-box .time-begin input'),
      endTimes = document.querySelectorAll('#pub-box .time-end input'),
      reset = document.querySelector('#pub-box .btn .reset'),
      add = document.querySelector('#pub-box .btn .add'),
      content = document.querySelector('#content'),
      temp = localStorage.getItem('D'),
      id,
      data,
      lcdata;
      
  if (!temp) {
    data = [];
  } else {
    data = JSON.parse(temp);
  }

  /*插入任務*/
  function createAriticle(id, text, createTime, msTime) {
    var str = '<article class="c-b" data-id="' + id + '">' +
                '<div class="red-star"></div>' +
                '<div class="ms-cont-b">' +
                    '<div class="ms-cont">' + text + '</div>' +
                    '<div class="ms-icon"></div>' + 
                '</div>' + 
                '<div class="ms-b">' +
                    '<div class="ms-time">' +
                        '<p class="create-t">建立於：<span>' + createTime + '</span></p>' +
                        '<p class="set-t">' + msTime +'</p>' +
                    '</div>' +
                    '<div class="ms-btn">' +
                        '<button class="del" onclick="deletArticle(this)">刪除</button>' +
                        '<button class="star" onclick="addRedStar(this)">設爲星標任務</button>' +
                        '<button class="finished" onclick="isFinish(this)">確認完成</button>' +
                    '</div>' +
                '</div>' +
            '</article>'
    content.innerHTML = str + content.innerHTML;
  }
  /*刪除任務*/
  function deletArticle(self) {
    var id = self.parentNode.parentNode.parentNode.getAttribute('data-id');
    var parent = self.parentNode.parentNode.parentNode.parentNode;
    var arts = document.querySelectorAll('.c-b');
    var s;
    for (var i = 0; i < arts.length; i++) {
      if (arts[i].getAttribute('data-id') == id) {
        parent.removeChild(arts[i]);
        for (var j = 0; j < data.length; j++) {
          if (data[j].id == id) {
            data.splice(j,1);
          }
        }
      }
    }
    s = JSON.stringify(data);
    localStorage.setItem('D', s);
  }
  window.deletArticle = deletArticle;
  /*添加星標任務*/
  function addRedStar(self) {
    var id = self.parentNode.parentNode.parentNode.getAttribute('data-id');
    var str;
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        if (!data[i].star) {
          self.parentNode.parentNode.parentNode.children[0].className = 'red-star fa fa-star';
          self.innerHTML = "取消星標任務";
          data[i].star = true;
        } else {
          self.parentNode.parentNode.parentNode.children[0].className = 'red-star';
          self.innerHTML = "設爲星標任務";
          data[i].star = false;
        }
      }
    }
    str = JSON.stringify(data);
    localStorage.setItem('D', str);
  }
  window.addRedStar = addRedStar;
 /*確認任務完成操做*/
  function isFinish(self) {
    var id = self.parentNode.parentNode.parentNode.getAttribute('data-id');
    var str;
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        if (data[i].finished == 0) {
          self.parentNode.parentNode.previousSibling.children[1].className = 'ms-icon fa fa-check';
          self.innerHTML = "取消完成";
          data[i].finished = 1;
        } else if (data[i].finished == 1) {
          self.parentNode.parentNode.previousSibling.children[1].className = 'ms-icon';
          self.innerHTML = "確認完成";
          data[i].finished = 0;
        } else {
          return;
        }
      }
    }
    str = JSON.stringify(data);
    localStorage.setItem('D', str);
  }
  window.isFinish = isFinish;
  /*頁面加載完，向頁面加載默認任務起始時間*/
  function addDefaultTime() {
    var date = new Date();
    beginTimes[0].placeholder = date.getFullYear();
    beginTimes[1].placeholder = date.getMonth() + 1;
    beginTimes[2].placeholder = date.getDate();
  }
  addDefaultTime();
  /*加載任務*/
  function loadThing() {
    var arr,
        length,
        sets,
        finishs,
        arts,
        stars,
        now = new Date().getTime(),
        d = localStorage.getItem('D');
    if (!d) {
      console.log(d);
      return;
    }
    arr = JSON.parse(d);
    length = arr.length;
    for (var m = 0; m < length; m++) {
      if ((now - arr[m].id) > 259200000) {
        arr.splice(m, 1);
      }
    }
    if (!arr.length) {
      return;
    }
    for (var i = 0; i < length; i++) {
      createAriticle(arr[i].id, arr[i].text, arr[i].createTime, arr[i].msTime);
    }
    arts = document.querySelectorAll('.c-b');
    finishs = document.querySelectorAll('.finished');
    for (var i = 0; i < length; i++) {
      if (arr[i].star) {
        for (var j = 0; j < arts.length; j++) {
          if (arts[j].getAttribute('data-id') == arr[i].id) {
            arts[j].children[0].className = 'red-star fa fa-star';
            arts[j].getElementsByClassName('star')[0].innerHTML = '取消星標任務';
          }
        }
      }
      if ((arr[i].em - arr[i].bm) < 0) {
        arr[i].finished = 2;
      } 
      if (arr[i].finished == 0) {
        for (var k = 0; k < arts.length; k++) {
          if (arts[k].getAttribute('data-id') == arr[i].id) {
            arts[k].getElementsByClassName('ms-icon')[0].className = 'ms-icon';
            arts[k].getElementsByClassName('finished')[0].innerHTML = '確認完成';
          }
        }
      } else if (arr[i].finished == 1) {
        for (var t = 0; t < arts.length; t++) {
          if (arts[t].getAttribute('data-id') == arr[i].id) {
            arts[t].getElementsByClassName('ms-icon')[0].className = 'ms-icon fa fa-check';
            arts[t].getElementsByClassName('finished')[0].innerHTML = '取消完成';
          }
        }
      } else if (arr[i].finished == 2) {
        for (var n = 0; n < arts.length; n++) {
          if (arts[n].getAttribute('data-id') == arr[i].id) {
            arts[n].getElementsByClassName('ms-icon')[0].className = 'ms-icon fa fa-close';
            arts[n].getElementsByClassName('finished')[0].style.display = 'none';
            arts[n].getElementsByClassName('star')[0].style.display = 'none';
          }
        }
      }
    }
  }
  loadThing();
  /*重置按鈕*/
  function resetContent() {
    var length = endTimes.length;
    textContent.value = "";
    for (var i = 0; i < length; i++) {
      beginTimes[i].value = "";
      endTimes[i].value = "";
    }
  }
  reset.addEventListener('click', function(ev){
    var ev = ev || event;
    ev.stopPropagation();
    resetContent();
  }, false);
  /*添加任務*/
  add.addEventListener('click', function(ev){
    var ev = ev || event;
    ev.stopPropagation();
    var date = new Date(); 
    var createTime,
        beginTime,
        contText,
        endTime,
        defY,
        defM,
        defD, 
        msTime,
        em,
        bm,
        c,
        id = new Date().getTime();
    if (textContent.value == "") {
      alert('輸入不能爲空');
      return;
    }
    if (endTimes[0].value == "" || endTimes[1].value == "" || endTimes[2].value == "") {
      alert('結束時間不能留空');
      return;
    }  
    if (beginTimes[0].value == "") {
      defY = beginTimes[0].placeholder;
    } else {
      defY = beginTimes[0].value;
    }
    if (beginTimes[1].value == "") {
      defM = beginTimes[1].placeholder;
    } else {
      defM = beginTimes[1].value;
    }
    if (beginTimes[2].value == "") {
      defD = beginTimes[2].placeholder;
    } else {
      defD = beginTimes[2].value;
    }
    c = id - new Date(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()).getTime();
    createTime = date.getFullYear() + '年' +
                  (date.getMonth() + 1) + '月' +
                  date.getDate() + '日';

    endTime = {
      year: endTimes[0].value,
      month: endTimes[1].value,
      day: endTimes[2].value
    }
    em = new Date(endTime.year + '/' + endTime.month + '/' + endTime.day).getTime() + c;
    beginTime = {
      year: defY,
      month: defM,
      day: defD
    }
    bm = new Date(beginTime.year + '/' + beginTime.month + '/' + beginTime.day).getTime() + c;
    msTime = '任務有效期：' + beginTime.year + '年' + beginTime.month + '月' + 
              beginTime.day + '日  至 ' + endTime.year + '年' + endTime.month + '月' + 
              endTime.day + '日';
    /*一個文章的總體數據*/
    var contText = {
      text: textContent.value,
      createTime: createTime,
      beginTime: beginTime,
      endTime: endTime,
      star: false,
      finished: 0,
      msTime: msTime,
      id: id,
      bm: bm,
      em: em
    }
    data.push(contText);
    lcdata = JSON.stringify(data);
    localStorage.setItem('D', lcdata);
    createAriticle(contText.id, contText.text, contText.createTime, contText.msTime);
    resetContent();
  }, false);
})()

六，不足之處：

1，在輸入日期的時候沒有過濾掉非法日期，這裏最好能用一個日曆組件進行選擇日期，能保證日期的準確性。不然任務的完成時間會出錯，致使頁面渲染錯誤。（組件正在開發中，後期會分享）
2，缺乏彈窗提示，這裏的操做動做不少，徹底能夠開發一個彈窗組件，方便用。體驗比較好。（組件正在開發中，後期會分享）
3，建立後的任務不能更改任務內容是個缺陷。

demo分享到此結束，筆者有什麼地方錯誤或者理解不到位的地方還請你們指出來。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程