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

資訊專欄INFORMATION COLUMN

前端實(shí)例練習(xí) - 任務(wù)清單 To do list

honmaple / 2049人閱讀

摘要：學(xué)習(xí)一門新知識，實(shí)例是尤其重要的。在這里本人整理了目前頁面上常見功能實(shí)現(xiàn)的具體實(shí)例。愿能為大家提供一些幫助。希望能夠與大家互相分享，共同進(jìn)步。

提示框

代碼儲存在Github
效果預(yù)覽

初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，“如何入門前端？”
同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的 “入門級” 的教材并不太滿意。學(xué)習(xí)一門新知識，實(shí)例是尤其重要的。在這里本人整理了目前頁面上常見功能實(shí)現(xiàn)的具體實(shí)例。愿能為大家提供一些幫助。
希望能夠與大家互相分享，共同進(jìn)步。

效果預(yù)覽
GIF圖太大，請點(diǎn)擊鏈接

HTML 部分 
    
    

        
任務(wù)清單

        
        添加
    

    
    
    
    
        
  • 七點(diǎn)半起床
    • 
        
  • 洗漱
    • 
        
  • 去上班
    • 
        
  • 完成報(bào)表
    • 
        
  • 和小明吃午飯
    • 
        
  • 去超市
    •
CSS 部分 
/*  把padding和border算入寬度 */
* {
    box-sizing: border-box;
}

/* 消除List里的margin和padding */
ul {
    margin: 0;
    padding: 0;
}

/* 設(shè)置li樣式 */
ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
    user-select: none; /*用戶不能文本選中*/
}

/* 奇數(shù)li顏色不同，為了美觀 */
ul li:nth-child(odd) {
    background: #f9f9f9;
}

/* hover時(shí)背景色改變 */
ul li:hover {
    background: #ffffd;
}

/* 當(dāng)被選中，文字中加橫線 */
ul li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}

/* 為被選中的li增加 “對勾” 圖標(biāo) */
ul li.checked::before {
    content: "";
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}

/* 關(guān)閉按鈕樣式 */
.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px
}

.close:hover {
    background-color: #f44336;
    color: white;
}

/* 頭部樣式 */
.header {
    background-color: #f44336;
    padding: 30px 40px;
    color: white;
    text-align: center;
}

/* 清除浮動(dòng) */
.header:after {
    content: "";
    display: table;
    clear: both;
}

/* 輸入框樣式 */
input {
    border: none;
    width: 75%;
    padding: 10px;
    float: left;
    font-size: 16px;
    outline: 0;
}

/* “添加”按鈕樣式 */
.addBtn {
    padding: 9px 10px 8px;
    width: 25%;
    background: #d9d9d9;
    color: #555;
    float: left;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.addBtn:hover {
    background-color: #bbb;
}
JavaScript 部分 
(function() {
  var i; /*index*/
  
  /*為每個(gè)li后面加上關(guān)閉按鈕*/
  function closeBtn() {
    var myNodelist = document.getElementsByTagName("li");
    for (i = 0; i < myNodelist.length; i++) {
      var span = document.createElement("span");
      var txt = document.createTextNode("u00D7"); /*unicode代碼*/
      span.className = "close";
      span.appendChild(txt);
      myNodelist[i].appendChild(span);
    }
  }

  /*點(diǎn)擊關(guān)閉按鈕，隱藏當(dāng)前l(fā)i*/
  function closeElement() {
    var close = document.getElementsByClassName("close");
    for (i = 0; i < close.length; i++) {
      close[i].onclick = function() {
        var div = this.parentElement; /*關(guān)閉按鈕的父元素 - li*/
        div.style.display = "none";
      }
    }
  }

  /*點(diǎn)擊li的時(shí)候，加上.checked，再點(diǎn)擊則取消*/
  function ifChecked() {
    var list = document.querySelector("ul");
    list.onclick = function(ev) {
      if (ev.target.tagName === "LI") {
        ev.target.classList.toggle("checked");
      }
    }
  }

  /*點(diǎn)擊添加時(shí)，創(chuàng)建一個(gè)新的ul*/
  function newElement() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === "") {
      alert("請先輸入一個(gè)具體任務(wù)。");
    } else {
      document.getElementById("myUL").appendChild(li);
    }
    document.getElementById("myInput").value = ""; /*清空輸入*/
  }
   
  /*初始化list*/
  function initList() {   
    closeBtn();
    closeElement();
    ifChecked();
  }
  
  /*初始化*/
  function init() {
    var addButton = document.getElementById("addButton"); 
    initList();

    /*添加按鈕點(diǎn)擊時(shí)執(zhí)行*/
    addButton.onclick = function() {
      newElement();
      initList();
    }

    /*按回車時(shí)亦執(zhí)行*/
    document.onkeydown = function(event) {
      if(event.keyCode == 13) {
        newElement();
        initList();
      }
    }
  }

  init();

})();

好啦，現(xiàn)在所有的代碼都寫完啦！

趕快打開瀏覽器，看看效果吧！

在這里，只是給大家提供一種思路，參考。
具體的實(shí)現(xiàn)，每個(gè)人都可以有不同的方法。
請大家趕快發(fā)揮想象，把你最想實(shí)現(xiàn)的功能，在電腦敲出來吧！

參考自w3cschools

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111749.html

相關(guān)文章

  • 前端實(shí)例練習(xí) - 任務(wù)清單 To do list

    摘要：學(xué)習(xí)一門新知識，實(shí)例是尤其重要的。在這里本人整理了目前頁面上常見功能實(shí)現(xiàn)的具體實(shí)例。愿能為大家提供一些幫助。希望能夠與大家互相分享，共同進(jìn)步。 提示框 代碼儲存在Github效果預(yù)覽 初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的 入門級 的教材并不太滿意。學(xué)習(xí)一門新知識，實(shí)例是尤其重要的。在這里本人整理了目前頁面上...

    muddyway 評論0 收藏0

  • 前端實(shí)例練習(xí) - 任務(wù)清單 To do list

    摘要：學(xué)習(xí)一門新知識，實(shí)例是尤其重要的。在這里本人整理了目前頁面上常見功能實(shí)現(xiàn)的具體實(shí)例。愿能為大家提供一些幫助。希望能夠與大家互相分享，共同進(jìn)步。 提示框 代碼儲存在Github效果預(yù)覽 初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的 入門級 的教材并不太滿意。學(xué)習(xí)一門新知識，實(shí)例是尤其重要的。在這里本人整理了目前頁面上...

    Worktile 評論0 收藏0

  • Spring Cloud Ribbon負(fù)載均衡策略

    摘要：當(dāng)為空時(shí)，會(huì)使用線性輪詢策略，當(dāng)有時(shí)，會(huì)通過遍歷負(fù)載均衡器中維護(hù)的所有服務(wù)實(shí)例，會(huì)過濾掉故障的實(shí)例，并找出并發(fā)請求數(shù)最小的一個(gè)。 客戶端負(fù)載均衡Spring Cloud Ribbon ?Spring Cloud Ribbon是一個(gè)基于HTTP和TCP的客戶端負(fù)載均衡工具，基于Netflix Ribbon實(shí)現(xiàn)。 目錄 客戶端負(fù)載均衡 源碼分析 負(fù)載均衡器 負(fù)載均衡策略(本文重點(diǎn)) 配置...

    endless_road 評論0 收藏0

  • Spring Cloud Ribbon負(fù)載均衡器

    摘要：代碼如下定義了用來存儲負(fù)載均衡器各服務(wù)實(shí)例屬性和統(tǒng)計(jì)信息的對象。下面看一下負(fù)載均衡器增加了哪些內(nèi)容。 客戶端負(fù)載均衡Spring Cloud Ribbon ?Spring Cloud Ribbon是一個(gè)基于HTTP和TCP的客戶端負(fù)載均衡工具，基于Netflix Ribbon實(shí)現(xiàn)。 目錄 客戶端負(fù)載均衡 源碼分析 負(fù)載均衡器(本文重點(diǎn)) 負(fù)載均衡策略 配置詳解 自動(dòng)化配置 客戶端負(fù)...

    y1chuan 評論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è)清單，有唯一的清單。說到這，一個(gè)復(fù)雜的的基本結(jié)構(gòu)和功能已經(jīng)出現(xiàn)了。 使用過一些清單類的應(yīng)用程序，像 WunderList, Google Keep等，用來記錄一些計(jì)劃和安排，也試著將自己的計(jì)劃安排同筆記一起整理在 Evernote 中，但是無論哪種方式用起來總覺得少了點(diǎn)什么，如果兩者的一些功...

    solocoder 評論0 收藏0

發(fā)表評論

0條評論

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