前端实例练习 - 任务清单 To do list

honmaple 发布于2019-08-29 12:13 / 2177人阅读

摘要：学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。希望能够与大家互相分享，共同进步。

提示框

代码储存在Github
效果预览

初衷：很多人在初学前端的时候都会问，“如何入门前端？”
同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享，共同进步。

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

HTML 部分

    
    
        任务清单
        
        添加
    
    
    
    
        七点半起床
        洗漱
        去上班
        完成报表
        和小明吃午饭
        去超市

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: #ffffd;
}

/* 当被选中，文字中加横线 */
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

GPU云服务器云服务器 web前端开发项目实例练习练习代码 css练习

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

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

前端实例练习 - 任务清单 To do list

摘要：学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。希望能够与大家互相分享，共同进步。提示框代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上...

muddyway 2019-08-20 15:06 评论0 收藏0
前端实例练习 - 任务清单 To do list

摘要：学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。希望能够与大家互相分享，共同进步。提示框代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上...

Worktile 2019-08-01 16:29 评论0 收藏0
Spring Cloud Ribbon负载均衡策略

摘要：当为空时，会使用线性轮询策略，当有时，会通过遍历负载均衡器中维护的所有服务实例，会过滤掉故障的实例，并找出并发请求数最小的一个。客户端负载均衡Spring Cloud Ribbon Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具，基于Netflix Ribbon实现。目录客户端负载均衡源码分析负载均衡器负载均衡策略(本文重点) 配置...

endless_road 2019-08-19 10:57 评论0 收藏0
Spring Cloud Ribbon负载均衡器

摘要：代码如下定义了用来存储负载均衡器各服务实例属性和统计信息的对象。下面看一下负载均衡器增加了哪些内容。客户端负载均衡Spring Cloud Ribbon Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具，基于Netflix Ribbon实现。目录客户端负载均衡源码分析负载均衡器(本文重点) 负载均衡策略配置详解自动化配置客户端负...

y1chuan 2019-08-19 10:57 评论0 收藏0
实现一个稍微复杂的simplelist

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

solocoder 2019-08-20 11:17 评论0 收藏0