一个简单好看的备忘录

首先上图

增删改查都已经通过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.parentNodelistItem.classList.add('finished')})list.lastElementChild.querySelector('.edit').addEventListener('click', function() {var listItem = this.parentNode.parentNodelistItem.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.parentNodelistItem.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;
}

一个简单好看的备忘录相关推荐

分享一个简单好看的科技公司官网模板-纯HTML+CSS
分享一个简单好看的科技公司官网模板-纯HTML+CSS 首页: 首页的HTML源码部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
一个html写的app首页,如何快速开发一个简单好看的APP控制页面
原标题:如何快速开发一个简单好看的APP控制页面导读机智云开源框架为了让开发者快速开发APP,已将用户登录,设备发现,设备配网等功能做成了各个标准模块,仅保留控制页面让开发者自行开发设计,节省了开 ...
分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
想写一个很普通的那种像word文档样式的table,发现网上很多都是什么教程,没有合适的,我只想要一个拿来就能用的html的table(非专业前端),没有什么别的依赖,而且样式要很普通的简单的表格.既 ...
用HTML+CSS做一个简单好看的环保网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 环境保护 | 保护地球 | 校园环保 | 垃圾分类 | 绿色家 ...
用HTML+CSS做一个简单好看的校园社团网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 ...
用Vue写一个简单好看的菜单组件（Vue实战系列）
一.需求实现一个左边栏菜单,菜单只包括两层: 点击出现水波纹效果: 激活效果:有一个绿球小点,标识激活的菜单,顶层菜单被激活时左边出现浅色激活标志: 二.实现新建一个菜单组件whrmenu pro ...
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页浮动布局
用HTML+CSS做一个简单好看的汽车网页
使用localStorage写一个简单的备忘录
使用html+js实现一个简单的备忘录,主要体会一下localStorage的用法. 先看看效果图: 在输入框中输入文字,点击保存按钮,文本内容会在下放展示出来, 然后刷新下浏览器,会发现文本内容不会 ...

一个简单好看的备忘录

首先上图

源码index.html

todolist.css代码

一个简单好看的备忘录相关推荐

最新文章

热门文章