原生js实现一个带分类的待办事宜todolist效果代码
代码语言:html
所属分类:布局界面
代码描述:原生js实现一个带分类的待办事宜todolist效果代码
代码标签: 一个 带 分类 的 待办 事宜 todolist 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap"); * { box-sizing: border-box; outline: 0; } :root { --font: "DM Sans", sans-serif; } body { background-image: linear-gradient(102.7deg, #fddaff 8.2%, #dfadfc 19.6%, #adcdfc 36.8%, #adfcf4 73.2%, #caf8d0 90.9%); background-attachment: fixed; display: flex; flex-direction: column; background-repeat: no-repeat; background-size: cover; padding: 20px; height: 100vh; overflow: hidden; } .app { max-width: 400px; width: 100%; margin: auto; background-color: #fff; font-family: var(--font); border-radius: 16px; font-size: 15px; overflow: hidden; color: #455963; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.3); } .task-list { max-height: 60vh; overflow: auto; } .task-status { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer; border: 2px solid #bbbdc7; border-radius: 50%; background-color: #fff; margin-right: 10px; position: relative; } .task-status:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='405.272' height='405.272'%3e%3cpath d='M393.401 124.425L179.603 338.208c-15.832 15.835-41.514 15.835-57.361 0L11.878 227.836c-15.838-15.835-15.838-41.52 0-57.358 15.841-15.841 41.521-15.841 57.355-.006l81.698 81.699L336.037 67.064c15.841-15.841 41.523-15.829 57.358 0 15.835 15.838 15.835 41.514.006 57.361z' fill='%23fff'/%3e%3c/svg%3e"); background-size: 10px; background-color: #4acea3; border-color: #38bb90; background-repeat: no-repeat; background-position: center; } .task-delete { margin-left: 10px; } .task-item { display: flex; flex-wrap: wrap; align-items: center; padding: 12px 20px; } .task-item + .task-item { border-top: 1px solid #eef0f5; } .task-item:hover { background-color: #f6fbff; } .task-name { margin-right: auto; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task-item.is-completed > .task-name { -webkit-text-decoration: line-through wavy rgba(0, 0, 0, 0.3); text-decoration: line-through wavy rgba(0, 0, 0, 0.3); } .task-item.is-completed { background-color: rgba(74, 206, 163, 0.1); } .task-header-title { margin: 0; font-size: 20px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0