完整的TodoList界面（练习JS以及本地存储）

最新推荐文章于 2022-07-21 19:36:11 发布

Gelxgx

最新推荐文章于 2022-07-21 19:36:11 发布

阅读量851

点赞数

文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/Gelxgx/article/details/105446203

版权

这篇博客详细介绍了如何构建一个TodoList界面，涵盖了HTML布局、CSS样式设计以及JavaScript的功能实现，包括利用localStorage进行数据存储。CSS部分加载了图标作为删除按钮，JS部分讨论了localStorage对字符串和对象的转换技巧。

摘要由CSDN通过智能技术生成

HTML部分

为了构造一个粉嫩的布局
在这里插入图片描述
首先需要设置好标签

<div class="main">
    <div class="top">
      <div class="logo">ToDoList</div>
      <input type="text" id="input" placeholder="请输入待办事件">
    </div>
    <div class="Doing todo">
      <h3><span class="title">正在进行</span><span class="num">0</span></h3>
      <div class="list">
        <div class="todoItem">
          <input type="checkbox">
          <div class="content">示例便签</div>
          <div class="del"></div>
        </div>
      </div>
    </div>
    <div class="Done todo">