一个简单好看的备忘录

首先上图

增删改查都已经通过js实现

源码index.html

<!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>
  <link rel="stylesheet" href="todolist.css">
</head>
<body>
  <div class="todo">
    <div class="box">
      <!-- 标题 -->
      <p class="tit">备忘录：</p>
      <!-- 添加按钮及其输入框 -->
      <div class="action">
        <input type="text" name="task" placeholder="请填写内容">
        <button class="add">添加</button>
      </div>
      <!-- 备忘录列表 -->
      <ul class="list">
        <li class="item">
          <span class="info">周一早上例会</span>
          <div class="control">
            <button class="edit">编辑</button>
            <button class="finish">完成</button>
            <button class="delete">删除</button>
          </div>
        </li>
        <li class="item">
          <span class="info">周二晚上加班</span>
          <div class="control">
            <button class="edit">编辑</button>
            <button class="finish">完成</button>
            <button class="delete">删除</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
<script>
  // 添加
  var input = document.querySelector('.action input') // 获取第一个元素
  var addBtn = document.querySelector('.add')
  var list = document.querySelector('.list')

  addBtn.addEventListener('click', function() {
    list.insertAdjacentHTML('beforeend', `
    <li class="item">
          <span class="info">${input.value}</span>
          <div class="control">
            <button class="edit">编辑</button>
            <button class="finish">完成</button>
            <button class="delete">删除</button>
          </div>
        </li>
    `)
    list.lastElementChild.querySelector('.delete').addEventListener('click', function() {
      list.removeChild(this.parentNode.parentNode)
    })
    list.lastElementChild.querySelector('.finish').addEventListener('click', function() {
      var listItem = this.parentNode.parentNode
      listItem.classList.add('finished')
    })
    list.lastElementChild.querySelector('.edit').addEventListener('click', function() {
      var listItem = this.parentNode.parentNode
      listItem.querySelector('.info').innerText = prompt('请输入修改内容')
    })
  })

  // 删除
  var delBtns = document.querySelectorAll('.delete') // 获取元素集合
  // 完成
  var finishBtns = document.querySelectorAll('.finish')
  // 编辑
  var editBtns = document.querySelectorAll('.edit')

  for (var idx = 0; idx < delBtns.length; idx++) {
    // 删除动作
    delBtns[idx].addEventListener('click', function() {
      list.removeChild(this.parentNode.parentNode)
    })
    // 完成动作
    finishBtns[idx].addEventListener('click', function() {
      var listItem = this.parentNode.parentNode
      // style对象
      // listItem.style.backgroundColor = '#a5f1b8'
      // classList对象
      listItem.classList.add('finished')
    })
    // 编辑动作
    editBtns[idx].addEventListener('click', function() {
      var listItem = this.parentNode.parentNode
      listItem.querySelector('.info').innerText = prompt('请输入修改内容')
    })
  }
</script>
</html>

todolist.css代码

* {
  margin: 0;
  padding: 0;
}
div, ul, li, p, span {
  box-sizing: border-box;
}
li {
  list-style: none;
}
button {
  border: none;
  background-color: transparent;
  outline: none;
}
input{  
  background:none;  
  outline:none;  
  border:none;
}
body {
  background-color: #111;
}
.box {
  padding: 19px;
  margin: 20px auto;
  min-height: 20px;
  width: 540px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgb(0, 0, 0, 5%);
  background-color: skyblue;
}
.box>.tit {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.list {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.list>.item {
  padding: 10px 15px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list>.item:first-of-type {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top: 0;
}
.list>.item:last-of-type {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.item>.info {
  color: #666;
  font-size: 14px;
}
.control>button {
  cursor: pointer;
  padding: 6px 12px;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
}
.edit {
  background-color: #337ab7;;
}
.finish {
  background-color: #20c248;
}
.delete {
  background-color: #d9534f;
}

.list>.finished {
  background-color: #a5f1b8;
}
.finished>.info {
  text-decoration: line-through;
}

.action {
  margin-top: 40px;
  display: flex;
  align-items: center;
}
.action>span {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.action>input {
  width: 300px;
  height: 30px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 5px;
  text-indent: 20px;
}
.action>button {
  cursor: pointer;
  margin-left: 20px;
  padding: 6px 12px;
  background-color: #ffffff;
  color: #333;
  border: 1px solid #666;
  border-radius: 5px;
  font-size: 14px;
}

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/81091.html

一个简单好看的备忘录

首先上图

源码index.html

todolist.css代码

相关推荐

分享到: