国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

多特蒙德主題本地個(gè)人任務(wù)清單小demo，你值得嘗試！

Big_fat_cat / 2926人閱讀

摘要：最后就是用各種的數(shù)據(jù)進(jìn)行判斷，渲染。否則任務(wù)的完成時(shí)間會(huì)出錯(cuò)，導(dǎo)致頁(yè)面渲染錯(cuò)誤。組件正在開(kāi)發(fā)中，后期會(huì)分享，缺少?gòu)棿疤崾荆@里的操作動(dòng)作很多，完全可以開(kāi)發(fā)一個(gè)彈窗組件，方便用。

一，demo背景：

1，可以熟悉原生js

2，平時(shí)不知道自己學(xué)完js要做些什么東西的小伙伴

3，自己寫的，可以當(dāng)做自己的作品

4，為廣大想練習(xí)練習(xí)原生js的貢獻(xiàn)一個(gè)素材

二，實(shí)現(xiàn)功能：

1，新建/刪除任務(wù)功能

2，設(shè)置/取消星標(biāo)任務(wù)功能

3，設(shè)置/取消任務(wù)完成功能

4，過(guò)期任務(wù)自動(dòng)刪除功能（本例期限設(shè)置為了2天）

5，任務(wù)超時(shí)后禁止操作功能

三， 邏輯實(shí)現(xiàn)：

把新建的一個(gè)任務(wù)就抽象成一個(gè)對(duì)象，該對(duì)象里面有自己的創(chuàng)建時(shí)間，內(nèi)容，結(jié)束事件，是否為星標(biāo)任務(wù)等等。然后這個(gè)對(duì)象字符串化存放到localStorage里，每次在要數(shù)據(jù)時(shí)，都從localStorage里面取出數(shù)據(jù)。最后就是用各種的數(shù)據(jù)進(jìn)行If..else判斷，渲染Dom。（過(guò)程中用到了很多字符串，數(shù)組方法，可以增加你對(duì)這些方法的熟練度）

四，demo效果展示：

完成了的任務(wù)：

星標(biāo)任務(wù)：

五，代碼展示：

html：




    
    LocalNotepad
    
    






    
    

        

            
任務(wù)起始時(shí)間 ：

            

                
                
                
            

            
務(wù)結(jié)束時(shí)間 ：

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;}

/*樣式開(kāi)始*/
#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);
  }

  /*插入任務(wù)*/
  function createAriticle(id, text, createTime, msTime) {
    var str = "
" +
                "
" +
                "
" +
                    "
" + text + "
" +
                    "
" + 
                "
" + 
                "
" +
                    "
" +
                        "
創(chuàng)建于：" + createTime + "
" +
                        "
" + msTime +"
" +
                    "
" +
                    "
" +
                        "" +
                        "" +
                        "" +
                    "
" +
                "
" +
            "
"
    content.innerHTML = str + content.innerHTML;
  }
  /*刪除任務(wù)*/
  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;
  /*添加星標(biāo)任務(wù)*/
  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 = "取消星標(biāo)任務(wù)";
          data[i].star = true;
        } else {
          self.parentNode.parentNode.parentNode.children[0].className = "red-star";
          self.innerHTML = "設(shè)為星標(biāo)任務(wù)";
          data[i].star = false;
        }
      }
    }
    str = JSON.stringify(data);
    localStorage.setItem("D", str);
  }
  window.addRedStar = addRedStar;
 /*確認(rèn)任務(wù)完成操作*/
  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 = "確認(rèn)完成";
          data[i].finished = 0;
        } else {
          return;
        }
      }
    }
    str = JSON.stringify(data);
    localStorage.setItem("D", str);
  }
  window.isFinish = isFinish;
  /*頁(yè)面加載完，向頁(yè)面加載默認(rèn)任務(wù)起始時(shí)間*/
  function addDefaultTime() {
    var date = new Date();
    beginTimes[0].placeholder = date.getFullYear();
    beginTimes[1].placeholder = date.getMonth() + 1;
    beginTimes[2].placeholder = date.getDate();
  }
  addDefaultTime();
  /*加載任務(wù)*/
  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 = "取消星標(biāo)任務(wù)";
          }
        }
      }
      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 = "確認(rèn)完成";
          }
        }
      } 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);
  /*添加任務(wù)*/
  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("結(jié)束時(shí)間不能留空");
      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 = "任務(wù)有效期：" + beginTime.year + "年" + beginTime.month + "月" + 
              beginTime.day + "日  至 " + endTime.year + "年" + endTime.month + "月" + 
              endTime.day + "日";
    /*一個(gè)文章的整體數(shù)據(jù)*/
    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，在輸入日期的時(shí)候沒(méi)有過(guò)濾掉非法日期，這里最好能用一個(gè)日歷組件進(jìn)行選擇日期，能保證日期的準(zhǔn)確性。否則任務(wù)的完成時(shí)間會(huì)出錯(cuò)，導(dǎo)致頁(yè)面渲染錯(cuò)誤。（組件正在開(kāi)發(fā)中，后期會(huì)分享）
2，缺少?gòu)棿疤崾荆@里的操作動(dòng)作很多，完全可以開(kāi)發(fā)一個(gè)彈窗組件，方便用。體驗(yàn)比較好。（組件正在開(kāi)發(fā)中，后期會(huì)分享）
3，創(chuàng)建后的任務(wù)不能更改任務(wù)內(nèi)容是個(gè)缺陷。

demo分享到此結(jié)束，筆者有什么地方錯(cuò)誤或者理解不到位的地方還請(qǐng)大家指出來(lái)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83969.html

相關(guān)文章

  • 多特蒙德主題本地個(gè)人任務(wù)清單小demo，你值得嘗試！

    摘要：最后就是用各種的數(shù)據(jù)進(jìn)行判斷，渲染。否則任務(wù)的完成時(shí)間會(huì)出錯(cuò)，導(dǎo)致頁(yè)面渲染錯(cuò)誤。組件正在開(kāi)發(fā)中，后期會(huì)分享，缺少?gòu)棿疤崾荆@里的操作動(dòng)作很多，完全可以開(kāi)發(fā)一個(gè)彈窗組件，方便用。 一，demo背景： 1，可以熟悉原生js 2，平時(shí)不知道自己學(xué)完js要做些什么東西的小伙伴 3，自己寫的，可以當(dāng)做自己的作品 4，為廣大想練習(xí)練習(xí)原生js的貢獻(xiàn)一個(gè)素材 二，實(shí)現(xiàn)功能： 1，新建/刪除任務(wù)...

    wuaiqiu 評(píng)論0 收藏0

  • 多特蒙德主題本地個(gè)人任務(wù)清單小demo，你值得嘗試！

    摘要：最后就是用各種的數(shù)據(jù)進(jìn)行判斷，渲染。否則任務(wù)的完成時(shí)間會(huì)出錯(cuò)，導(dǎo)致頁(yè)面渲染錯(cuò)誤。組件正在開(kāi)發(fā)中，后期會(huì)分享，缺少?gòu)棿疤崾荆@里的操作動(dòng)作很多，完全可以開(kāi)發(fā)一個(gè)彈窗組件，方便用。 一，demo背景： 1，可以熟悉原生js 2，平時(shí)不知道自己學(xué)完js要做些什么東西的小伙伴 3，自己寫的，可以當(dāng)做自己的作品 4，為廣大想練習(xí)練習(xí)原生js的貢獻(xiàn)一個(gè)素材 二，實(shí)現(xiàn)功能： 1，新建/刪除任務(wù)...

    FullStackDeveloper 評(píng)論0 收藏0

  • 實(shí)現(xiàn)一個(gè)稍微復(fù)雜的simplelist

    摘要：是一個(gè)專門為應(yīng)用所設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。此時(shí)可以幫助我們實(shí)現(xiàn)狀態(tài)的管理。每個(gè)任務(wù)都?xì)w屬于一個(gè)清單，有唯一的清單。說(shuō)到這，一個(gè)復(fù)雜的的基本結(jié)構(gòu)和功能已經(jīng)出現(xiàn)了。 使用過(guò)一些清單類的應(yīng)用程序，像 WunderList, Google Keep等，用來(lái)記錄一些計(jì)劃和安排，也試著將自己的計(jì)劃安排同筆記一起整理在 Evernote 中，但是無(wú)論哪種方式用起來(lái)總覺(jué)得少了點(diǎn)什么，如果兩者的一些功...

    solocoder 評(píng)論0 收藏0

  • 當(dāng)我們?cè)谡f(shuō)“并發(fā)、多線程”，說(shuō)的是什么？

    摘要：兜底任務(wù)，處理數(shù)據(jù)不一致?tīng)顟B(tài)的任務(wù)。什么是多線程多線程是并發(fā)的一種重要形式。通過(guò)具體的多線程問(wèn)題引出多線程編程中的關(guān)鍵點(diǎn)和對(duì)應(yīng)的工具與知識(shí)點(diǎn)，輕松學(xué)會(huì)多線程編程。 這篇文章的目的并不是想教你如何造火箭（面試造火箭，工作擰螺絲），而是想通過(guò)對(duì)原理和應(yīng)用案例的有限度剖析來(lái)協(xié)助你構(gòu)建起并發(fā)的思維，并將操作系統(tǒng)的理論知識(shí)與工程實(shí)踐結(jié)合起來(lái)，貫穿從學(xué)到會(huì)的全過(guò)程。當(dāng)然，雖然我們是從實(shí)用角度出發(fā)，...

    sf_wangchong 評(píng)論0 收藏0

  • 上線清單 —— 20 個(gè) Laravel 應(yīng)用性能優(yōu)化項(xiàng)

    摘要：此問(wèn)題稱為查詢問(wèn)題。您將只執(zhí)行兩個(gè)查詢而不是這是巨大的性能提升。這項(xiàng)工作是通過(guò)從數(shù)據(jù)庫(kù)中執(zhí)行查詢完成的查詢可能涉及到表以及其他的一些表。比如查詢，視圖，時(shí)間等等另一個(gè)非常酷的工具是，對(duì)應(yīng)用，有優(yōu)雅的調(diào)試助手的美稱。 showImg(https://segmentfault.com/img/remote/1460000018339917?w=1280&h=722); 讓我們開(kāi)始吧！假若你...

    MadPecker 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Big_fat_cat

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<