<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
h2 {
text-align: center;
margin-top: 100px;
}
body {
text-align: center;
}
input {
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 16px;
padding-left: 10px;
outline: none;
border: 1px solid #000;
}
button {
width: 32px;
height: 32px;
border-radius: 5px;
box-shadow: none;
border: none;
font-size: 21px;
cursor: pointer;
}
p {
color: #aaa;
}
.items {
list-style: none;
padding: 0;
width: 350px;
margin: 20px auto;
}
.items .item {
font-size: 16px;
line-height: 32px;
text-align: left;
cursor: pointer;
border-bottom: 1px solid #eee;
}
button.sub {
width: 25px;
height: 25px;
font-size: 12px;
float: right;
margin-top: 5px;
}
button.sub:hover {
color: red;
}
</style>
</head>
<body>
<!-- 模板 -->
<div id="app">
<h2>小黑记事本</h2>
<!-- 输入非空的内容,点击+按钮后,如果内容不为空,则将新的记录添加到列表中,同时清空当前输入的内容 -->
<input type="text" placeholder="请输入非空内容,点击加号记录" />
<button class="add"> +</button>
<!-- 显示用户待办事项的列表,双击当前列表项或者点击X按钮后,删除当前记录 -->
<ul class='items'>
<!-- <li class="item">
吃饭
<button class="sub">X</button>
</li> -->
</ul>
<p>双击栏目删除对应数据</p>
</div>
<script>
// 页面进来就要给+绑定点击事件
(function () {
$('.add').addEventListener('click', clickHandler);
// 使用事件委托,将删除操作绑定给ul
$('ul').addEventListener('click', delHandler);
})();
let todos = [];
function clickHandler() {
// console.log(this);
// 获取input中的value
let input = $('input[type=text]');
let val = input.value.trim();
// console.log(val);
// 为空结束代码执行
if (!val) return;
// 将数据添加到任务列表中
todos.push(val)
// 清空input
input.value = '';
render();
}
// 渲染到页面中
// function render() {
// // console.log(todos);
// // 追加之前先清空
// $('.items').innerHTML = '';
// todos.forEach((v, k) => {
// let li = document.createElement('li');
// li.className = 'item';
// li.innerHTML = v;
// // 将索引设置到li标签的自定义属性上
// li.dataset.key = k;
// let btn = document.createElement('button');
// btn.className = 'sub';
// btn.innerHTML = 'X';
// li.appendChild(btn);
// // console.log(li);
// $('.items').appendChild(li)
// })
// }
function render() {
// console.log(todos);
// 追加之前先清空
$('.items').innerHTML = '';
todos.forEach((v, k) => {
let li = createEle('li', {
className: 'item',
innerHTML: v,
});
li.dataset.key = k;
let btn = createEle('button', {
innerHTML: 'X',
className: 'sub'
});
// console.log(btn);
// 将btn追加到li中
li.appendChild(btn)
$('.items').appendChild(li)
})
}
//创建节点的函数
function createEle(nodeName, obj) {
let newEle = document.createElement(nodeName);
// 创建完成要设置属性
Object.assign(newEle, obj);
// console.log(newEle);
return newEle
}
// 将所有li的点击事件都委托给ul处理,判断事件源
function delHandler(eve) {
// console.log(eve.target);
// console.log(eve.target.nodeName);
// 判断点击的是否为button按钮
if (eve.target.nodeName == 'BUTTON') {
// 获取其父级节点
let li = eve.target.parentNode;
// console.log(li);
li.remove();
// console.log(todos);
// 获取元素对应的缩索引
let index = li.dataset.key;
// console.log(index);
// 根据索引删除数组一个元素
todos.splice(index, 1)
}
}
// 获取的方法
function $(ele) {
// 如果获取的结果只有一个元素 则返回该元素
// 如果获取的结果是有多个元素组成的伪数组,则返回该伪数组
let res = document.querySelectorAll(ele);
// console.log(res);
return res.length == 1 ? res[0] : res;
}
// console.log($('li'));
// console.log($('.items'));
</script>
</body>
</html>
用js写小黑记事本
最新推荐文章于 2024-06-11 20:56:20 发布