526互联

toDO记事本

发布时间 2023-06-30 10:50:34作者: 蜡笔没有小心眼子
<body>
<div class="container">
  <h1 class="header">Todo List</h1>
  <form class="todo-form" id="todoForm">
    <input type="text" class="todo-input" placeholder="Add a new todo" id="todoInput">
    <button type="submit" class="todo-button">Add</button>
  </form>
  <ul class="todo-list" id="todoList"></ul>

</div>
</body>
body方面的内容通过设置form表单来设置主体的主要内容

css样式
body {
  background-color: #f6f6f6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  color: #3f51b5;
}

.todo-form {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.todo-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #3f51b5;
  color: #fff;
  cursor: pointer;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: #e8e8e8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.todo-item:last-child {
  margin-bottom: 0;
}

.todo-item-checkbox {
  margin-right: 10px;
}

.todo-item-text {
  flex: 1;
  color: #3f51b5;
  font-weight: bold;
}

.todo-item-delete {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #ff6b6b;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.todo-item-delete:hover {
  background-color: #ff4f4f;
}
通过每一步的设置来规定相应的body中的样式

设置一个script标签来引用js格式
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

主体script部分
$(function () {//用function函数开始调用
    $('#todoForm').submit(event => {
$todoForm获取body中的属性.sumbit按钮事件开始调用
      event.preventDefault()
      $('#todoList').append(`
      <li class="todo-item">
      <input type="checkbox" class="todo-item-checkbox">

　　　　获取todoInput文本框中输入的值
      <span class="todo-item-text">${$('#todoInput').val().trim()}</span>

　　　　设置删除按钮
      <button class="todo-item-delete">Delete</button>
      </li>

`)
      $('#todoInput').val('')
    })
  })
  $('#todoList').on('click','.todo-item-delete',function (){
    if (confirm('Are you sure you want to delete?')){
      $(this).parent().remove()
    }
  })