项目实战
一、受捐管理系统
1.功能需求
（1）实现页面渲染即可，不用考虑其他功能
（2）实现页面的数据渲染点击， 新增 实现新增一个记录
（3）点击 删改 实现删除对应的数据实现页面刷新后，数据还保留刷新前模样 （本地存储）
2.实现思路
（1）创建项目文件（html、css、js）后在html中写入对应js和css的路径，写出相关的静态页面
（2）js首先根据数组渲染数据表格
//根据数组渲染表格
function renderTableByArr() {
let html = ``;
for (let index = 0; index < arr.length; index++) {
html += `
<tr>
<td>${index + 1}</td>
<td>${arr[index].jz_person}</td>
<td>${arr[index].select_op}</td>
<td>${arr[index].sum}</td>
<td>${arr[index].sj_date}</td>
<td><a data-index="${index}" href="#">修改</a></td>
</tr>
`;
}
tbody.innerHTML = html;
}
（3）按钮注册点击事件（创建新对象、给数组插入新的元素、数组转字符串便于储存、调用数组渲染表格函数、清空表格数据）
// 注册事件类型
btn.addEventListener("click", function () {
// 创建新对象，将表单数据合并到对象
const data = {
num: i,
jz_person: jz_person.value,
select_op: select_op.value,
sum: sum.value,
sj_date: sj_date.value,
};
//给数组插入新的元素
arr.push(data);
// 把数组转成字符串
const strArr = JSON.stringify(arr);
// 存储到本地存储中
localStorage.setItem("arr", strArr);
//数组发生改变 重新调用函数
renderTableByArr();
// 表单数据清空
jz_person.value = "";
select_op.value = "";
sum.value = "";
sj_date.value = "";
});
（4）tbody绑定点击事件 判断是否修改
// tbody绑定点击事件 判断是否修改
tbody.addEventListener("click", function (event) {
//判断是否点击的a标签
if (event.target.nodeName === "A") {
// 获取a标签存放的index
const index = event.target.dataset.idnex;
//执行删除数组元素
arr.splice(index, 1);
// 把数组转成字符串
const strArr = JSON.stringify(arr);
// 存储到本地存储中
localStorage.setItem("arr", strArr);
//数组发生改变 重新调用函数
renderTableByArr();
}
});
二、打地鼠
1.功能需求
①点击 按钮 START 地鼠随机的在6个洞中缓慢出现
②点击地鼠时，分数在原有基础上加一
2.实现思路
（1）创建项目文件（html、css、js）后在html中写入对应js和css的路径，写出相关的静态页面
（2）注册按钮点击事件
①开启定时器，用Math.round和Math.random获取随机数，通过添加类实现地鼠出现
②通过第一种延时器，实现地鼠隐藏效果
③设置第二种延时器，实现定时器取消
button.addEventListener("click", function () {
button.disabled = true;
// 设置一个变量 计算地鼠出现的次数
// 开启定时器
const timeId = setInterval(function () {
// 获取 0- 5 随机数
const randomIndex = Math.round(Math.random() * (moles.length - 1));
// 设置 地鼠出现
moles[randomIndex].classList.add("active");
setTimeout(function () {
// 一会之后 让它隐藏
moles[randomIndex].classList.remove("active");
}, 1200); // 过渡时间是设置了1s种，设置一会 1200 停留了200毫秒了 才让地鼠开始隐藏
}, 1000);
// 开启一个延时器 设置多少时间后 让定时器取消
setTimeout(function () {
clearInterval(timeId);
button.disabled = false;
}, 1000 * 10);
});
（3）给地鼠设定绑定事件
ul.addEventListener("click", function (event) {
console.log(event.target.className);
// 所看见的地鼠 类 其实是有两个 mole active
// 只要有active ，表示 这个地鼠正常冒头显示
// 也解决了 同一个地鼠点击多次的问题
if (event.target.className === "mole active") {
// 点击的是地鼠
span.innerText++;
// 点击中了地鼠 设置地鼠隐藏
event.target.classList.remove("active");
}
});
三、点名器
1.功能需求
①点击按钮 开始 ，实现随机显示 同学名单
②一段时间后，将选中的同学名单 显示在 页面的大标题上
③继续点击时，在剩下的同学名单中继续 随机抽取
2.实现思路
（1）创建项目文件（html、css、js）后在html中写入对应js和css的路径，写出相关的静态页面
（2）获取名单
（3）通过.split(' '); // 真正的数组 获取dom元素的数组 是伪数组 有些数组的方法不能使用
（4）负责将数组渲染到页面上
// 负责将数组渲染到页面上
function render() {
let html = ``;
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
html += `<li>${arr[index]}</li>`;
}
ul.innerHTML = html;
}
（5）定义一个函数 负责将伪数组 转成真正的数组
// 定义一个函数 负责将伪数组 转成真正的数组
function domToArr(domList) {
// 定义一个空数组
const arr = [];
// 对伪数组 进行遍历
for (let index = 0; index < domList.length; index++) {
arr.push(domList[index]); // 把dom元素取出来 装到真正的数组中
}
return arr;
}
（6）钮绑定点击事件
// 给按钮绑定点击事件
button.addEventListener("click", function () {
// 设置一个全局变量 记录随机选中的同学的索引
let randomIndex; //
// 开启定时器
const timeId = setInterval(function () {
// 直接获取之前选中（class=active）了的元素，移除active 这个元素可能为空
const beforeActive = document.querySelector("li.active");
// 不能直接移除 因为 第一次 这个标签没有active
if (beforeActive) {
// 这个标签存在了 获取到了 我才去执行 移除这个active代码
beforeActive.classList.remove("active");
}
// 获取随机数
randomIndex = Math.round(Math.random() * (arr.length - 1));
// 设置随机数对应的li标签 激活显示
lis[randomIndex].classList.add("active");
}, 100);
（7）开启延时器
// 开启延时器
setTimeout(function () {
clearInterval(timeId);
h1.innerText += " " + arr[randomIndex];
// 要给最终选中的 li标签 添加一个 select
lis[randomIndex].classList.add("select");
// arr中删除掉 选中的同学
arr.splice(randomIndex, 1);
// 让li数组也删除掉被选中的那位同学
lis.splice(randomIndex, 1);
// 删除真正的dom元素
// lis[randomIndex].remove();
}, 3000); // 10s
});
四、待办列表
1.功能需求
①输入框中 按下 回车键 将数据生成到 列表种
②点击 列表中的删除 实现删除数据功能
③点击 列表中的 复选框 实现 该列表显示删除线 如 事项三
④根据列表状态，计算出 底部的 未完成 和 已完成
2.实现思路
（1）创建项目文件（html、css、js）后在html中写入对应js和css的路径，写出相关的静态页面
（2）将输入的文字通过函数函数把数组数据渲染在页面上
// 函数负责把数组数据渲染在页面上
function render() {
let html = ``;
for (let index = 0; index < arr.length; index++) {
// checked属性要不要写，取决于 当前被遍历的元素的chekced属性
// 要根据 当前元素的checked属性来决定要不要设置 checked 标签上
// const renderChecked="checked";
const renderChecked = arr[index].checked ? "checked" : "";
html += `
<li>
<div><input data-index="${index}" type="checkbox" class="chk" ${renderChecked} /><span class="false">${arr[index].text}</span></div>
<button data-index="${index}">X</button>
</li>
`;
}
ul.innerHTML = html;
// 存一数据到本地存储中
localStorage.setItem("todo", JSON.stringify(arr));
// 开始统计
statistics();
}
（3）实现第一个功能:绑定键盘按下事件
// 绑定键盘按下事件
input.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
// input.value
arr.push({
text: input.value,
checked: false,
});
render();
input.value = "";
}
});
（4）通过委托事件className判断点击对象的类名，实现复选框和删除按钮功能
// 事件委托
ul.addEventListener("click", function (event) {
// 获取到复选框对应数组的下标
const index = event.target.dataset.index;
// 点击的是复选框
if (event.target.className === "chk") {
// 修改数组中元素的选中状态
arr[index].checked = !arr[index].checked;
// 重新渲染页面
render();
}
// 点击的是删除按钮
else if (event.target.nodeName === "BUTTON") {
// 数组删除元素
arr.splice(index, 1);
// 重新渲染页面
render();
}
});
（5）计算完成和未完成的数量
// 计算完成的和未完成的
function statistics() {
// 未完成
let unFinishNums = 0;
// 已完成
let finishNums = 0;
for (let index = 0; index < arr.length; index++) {
if (arr[index].checked) {
// 找到了一个已经完成
finishNums++;
} else {
unFinishNums++;
}
}
// 分布设置到对应的标签上
// 设置未完成
unFinishSpan.innerText = unFinishNums + " 未完成";
// 设置已完成
finishA.innerText = finishNums;
}
（6）实现清空按钮功能
// 清理已经完成
a.addEventListener("click", function () {
// 留下未完成的
let newArr = [];
for (let index = 0; index < arr.length; index++) {
if (!arr[index].checked) {
// 没有选中 没有完成 我要
newArr.push(arr[index]);
}
}
// 把未完成的，重新赋值给旧数组即可
arr = newArr;
// 重新渲染页面
render();
});
