提示框

代码储存在Github
结果预览

初志：许多人在初学前端的时刻都邑问，“怎样入门前端？”
同为在前端进修道路上，奋力追逐的一员，本人关于如今收集上所能看到的 “入门级” 的课本并不太惬意。进修一门新知识，实例是特别主要的。在这里本人整理了如今页面上罕见功用完成的详细实例。愿能为人人供应一些协助。
愿望可以与人人相互分享，共同进步。

结果预览
GIF图太大，请点击链接

HTML 部份

    <!-- 使命输入框 -->
    <div id="myDIV" class="header">
        <h2>使命清单</h2>
        <input type="text" id="myInput" placeholder="请输入使命">
        <span id="addButton" class="addBtn">增添</span>
    </div>
    
    <!-- 使命列表 -->
    <ul id="myUL">
        <li>七点半起床</li>
        <li class="checked">洗漱</li>
        <li>去上班</li>
        <li>完成报表</li>
        <li>和小明吃午餐</li>
        <li>去超市</li>
    </ul>

CSS 部份

/*  把padding和border算入宽度 */
* {
    box-sizing: border-box;
}

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

/* 设置li款式 */
ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
    user-select: none; /*用户不能文本选中*/
}

/* 奇数li色彩差别，为了雅观 */
ul li:nth-child(odd) {
    background: #f9f9f9;
}

/* hover时背景色转变 */
ul li:hover {
    background: #ddd;
}

/* 当被选中，笔墨中加横线 */
ul li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}

/* 为被选中的li增添 “对勾” 图标 */
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;
}

/* 封闭按钮款式 */
.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;
}

/* 消灭浮动 */
.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*/
  
  /*为每一个li背面加上封闭按钮*/
  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);
    }
  }

  /*点击封闭按钮，隐蔽当前li*/
  function closeElement() {
    var close = document.getElementsByClassName("close");
    for (i = 0; i < close.length; i++) {
      close[i].onclick = function() {
        var div = this.parentElement; /*封闭按钮的父元素 - li*/
        div.style.display = "none";
      }
    }
  }

  /*点击li的时刻，加上.checked，再点击则作废*/
  function ifChecked() {
    var list = document.querySelector('ul');
    list.onclick = function(ev) {
      if (ev.target.tagName === 'LI') {
        ev.target.classList.toggle('checked');
      }
    }
  }

  /*点击增添时，建立一个新的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("请先输入一个详细使命。");
    } else {
      document.getElementById("myUL").appendChild(li);
    }
    document.getElementById("myInput").value = ""; /*清空输入*/
  }
   
  /*初始化list*/
  function initList() {   
    closeBtn();
    closeElement();
    ifChecked();
  }
  
  /*初始化*/
  function init() {
    var addButton = document.getElementById("addButton"); 
    initList();

    /*增添按钮点击时实行*/
    addButton.onclick = function() {
      newElement();
      initList();
    }

    /*按回车时亦实行*/
    document.onkeydown = function(event) {
      if(event.keyCode == 13) {
        newElement();
        initList();
      }
    }
  }

  init();

})();

好啦，如今一切的代码都写完啦！

连忙翻开浏览器，看看结果吧！

在这里，只是给人人供应一种思绪，参考。
详细的完成，每一个人都可以有差别的要领。
请人人连忙发挥设想，把你最想完成的功用，在电脑敲出来吧！

参考自w3cschools