前端经典——todolist(html+javascript)_前端todolist

作者：Gausst松鼠会 | 2024-05-29 05:35:47

踩

前端todolist

todolist项目可谓是前端学员的一个必修项目，各式各样的前端框架都可以从这个简单的小项目练起，在使用框架开发两年的时间呢，最近感觉对原生js的一些用法生疏的很，便借用这个基础小项目复习了一下js语言，同时也适用于刚接触前端的同学，下面就是一些示例图和代码，感兴趣的小伙伴来看看吧。
vue3.0 版本todo list案例点此查看
已完成
添加待办
添加事项不可为空
空状态
倒序添加待办

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ToDoList</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
    }
    #listArea {
      width: 300px;
      height: max-content;
      margin: 10px auto;
    }
    li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border: 3px dotted skyblue;
      margin-bottom: 10px;
      padding-left: 10px;
      color: blue;
      display: flex;
      align-items: center;
    }
    .text {
      margin-left: 10px;
    }
    .userInput {
      width: max-content;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .noData {
      width: 300px;
      height: 300px;
      line-height: 300px;
      margin: 10px auto;
      border: 3px dotted skyblue;
      text-align: center;
      font-size: 20px;
      color:rgb(220, 167, 241);
    }
    .active {
      color: red;
    }
    #inputBox {
      width: 300px;
      margin: auto;
      display: block;
      margin-right: 10px;
    }
    h1 {
      text-align: center;
      margin: auto;
      color: aqua;
    }
  </style>
</head>
<body>
  <h1>茜氏男友出品</h1>
  <div class="userInput">
    <input type="text" id="inputBox" placeholder="请输入待办事项" ref="inpRef">
    <button>添加</button>
  </div>
  <ul id="listArea">
  </ul>
  <script>

    const listArea = document.getElementById('listArea') // 列表容器
    const inputBox = document.getElementById('inputBox') // 输入框

    let listData = [] // 列表


    // 页面加载完成
    window.onload = () => {
      listArea && renderList()
    }

    // 页面点击事件
    window.addEventListener('click',(e) => {
      if(e.target.nodeName === 'BUTTON') {
        inputWrite()
        return
      }
      if(e.target.type === 'checkbox') {
        checkItem(e.target.parentNode.getAttribute('key'))
      }
    })

    // 渲染列表
    function renderList() {
      listArea.innerHTML = ''
      if(listData.length > 0) {
        listData.forEach((item, index) => {
          let LI = document.createElement('li')
          LI.setAttribute('key',item.id)
          LI.setAttribute('class',item.is_finish ? 'active' : '')
          LI.innerHTML = `
          <input type="checkbox" ${item.is_finish && 'checked'}  />
          <p class="text">${index+1}、${item.text}  ${item.is_finish ? '已完成' : '待办'}</p>`
          listArea.appendChild(LI)
        })
        return
      }
      listArea.innerHTML = '<div class="noData">今日小目标，记录一下吧</div>'
    }

    // 输入待办事项
    function inputWrite() {
      if(inputBox.value.trim() === '') {
        alert('输入不可为空')
        inputBox.value = ''
        return
      }
      let obj = {
        id: new Date().getTime(),
        text: inputBox.value,
        is_finish: false
      }
      listData.unshift(obj)
      inputBox.value = ''
      renderList()
    }

    // 选中状态
    function checkItem(id) {
      const ind = listData.findIndex(item => item.id === Number(id))
      if(ind !== -1) {
        listData[ind].is_finish = !listData[ind].is_finish
        renderList()
      }
    }

  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/640789