[JavaScript实例解析]简易TODO List，web软件开发

My To Do List

Add

• Hit the gym
• Pay bills
• Meet George
• Buy eggs
• Read a book
• Organize office

• CSS：

  body {

  margin: 0;/清除默认外边距/

  min-width: 250px;/设置一个最小宽度/

  }

  • {

  box-sizing: border-box;/采用怪异盒模型/

  }

  ul {/清除默认内外边距/

  margin: 0;

  padding: 0;

  }

  ul li {

  cursor: pointer;/鼠标移上时变成手/

  position: relative;/相对于父级元素进行定位/

  padding: 12px 8px 12px 40px;/内边距/

  background: #eee;/背景颜色/

  font-size: 18px;/文字大小/

  transition: 0.2s;

  /下面四个是一个意思，使元素及子元素的文本不可选中/

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  }

  ul li:nth-child(odd) {/odd是奇数，这里是为了把奇偶项的背景颜色不同/

  background: #f9f9f9;

  }

  ul li:hover {/鼠标移上的项变色/

  background: #ddd;

  }

  ul li.checked {/已经做完的项/

  background: #888;/背景颜色/

  color: #fff;/文本颜色/

  text-decoration: line-through;/删除线/

  }

  ul li.checked::before {/伪元素/

  content: ‘’;/不写内容伪元素无法生效/

  position: absolute;/绝对定位，定位依据是li/

  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%;/宽度为父级的75%/

  padding: 10px;/内边距/

  float: left;/左浮动/

  font-size: 16px;/字体大小/

  }

  .addBtn {/定义添加按钮样式/

  padding: 9px;

  width: 25%;

  background: #d9d9d9;

  color: #555;

  float: left;

  text-align: center;

  font-size: 16px;

  cursor: pointer;/鼠标变成手/

  transition: 0.3s;

  }

  .addBtn:hover {

  background-color: #bbb;/鼠标移上时/

  }

  JavaScript：

  // Create a “close” button and append it to each list item

  var myNodelist = document.getElementsByTagName(“LI”);

  var i;

  for (i = 0; i < myNodelist.length; i++) {

  var span = document.createElement(“SPAN”);

  var txt = document.createTextNode(“\u00D7”);

  span.className = “close”;

  span.appendChild(txt);

  myNodelist[i].appendChild(span);

  }

  // Click on a close button to hide the current list item

  var close = document.getElementsByClassName(“close”);

  var i;

  for (i = 0; i < close.length; i++) {

  close[i].onclick = function() {

  var div = this.parentElement;

  div.style.display = “none”;

  }

  }

  // Add a “checked” symbol when clicking on a list item

  var list = document.querySelector(‘ul’);

  list.addEventListener(‘click’, function(ev) {

  if (ev.target.tagName === ‘LI’) {

  ev.target.classList.toggle(‘checked’);

  }

  }, false);

  // Create a new list item when clicking on the “Add” button

  function newElement() {

  var li = document.createElement(“li”);

  var inputValue = document.getElementById(“myInput”).value;

  var t = document.createTextNode(inputValue);

  li.appendChild(t);

  if (inputValue === ‘’) {

  alert(“You must write something!”);

  } else {

  document.getElementById(“myUL”).appendChild(li);

  }

  document.getElementById(“myInput”).value = “”;

  var span = document.createElement(“SPAN”);

  var txt = document.createTextNode(“\u00D7”);

  span.className = “close”;

  span.appendChild(txt);

  li.appendChild(span);

  for (i = 0; i < close.length; i++) {

  close[i].onclick = function() {

  var div = this.parentElement;

  div.style.display = “none”;

  }

  }

  }

  实例演示

  ---

  页面加载后显示TODO List的页面

  

  点击可以把列表的某一项会自动用删除线标识，表示事情已经做完了

  

  点击每一项的最右边有删除事项的“叉叉”，点击可以删除事项

  

  最后在最上方的输入框输入事项的内容，然后点击右侧的Add按钮，可以把事项内容增加到下方列表中

  

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  后记

  ---

  总结一下这三次面试下来我的经验是：

  1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

  2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

  3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

  4. 多刷面经！

  我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】免费获取。祝大家早日拿到自己心怡的工作！

  篇幅有限，仅展示部分内容

  
  
  

  试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

  4. 多刷面经！

  我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】免费获取。祝大家早日拿到自己心怡的工作！

  篇幅有限，仅展示部分内容