项目实战总结
打地鼠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-打地鼠.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 1200px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
li {
width: 400px;
height: 300px;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
img {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}
.dirt {
z-index: 100;
background-image: linear-gradient(
to bottom,
transparent 50%,
#fff 50%,
#fff 100%
);
}
.mole {
transform: translate(-50%, 100%);
transition:transform 1s;
}
.active {
transform: translate(-50%, 0);
background-color: yellow;
}
h1 {
text-align: center;
}
button {
width: 100px;
height: 40px;
border-radius: 20px;
background-color: #fec600;
font-size: 18px;
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<h1>打地鼠游戏 : <span>0</span></h1>
<button>开始</button>
<ul>
<li>
<img class="dirt" src="./images/dirt.svg" alt="" />
<img class="mole" src="./images/mole.svg" alt="" />
</li>
<li>
<img class="dirt" src="./images/dirt.svg" alt="" />
<img class="mole" src="./images/mole.svg" alt="" />
</li>
<li>
<img class="dirt" src="./images/dirt.svg" alt="" />
<img class="mole" src="./images/mole.svg" alt="" />
</li>
<li>
<img class="dirt" src="./images/dirt.svg" alt="" />
<img class="mole" src="./images/mole.svg" alt="" />
</li>
<li>
<img class="dirt" src="./images/dirt.svg" alt="" />
<img class="mole" src="./images/mole.svg" alt="" />
</li>
<li>
<img class="dirt" src="./images/dirt.svg" alt="" />
<img class="mole" src="./images/mole.svg" alt="" />
</li>
</ul>
<script>
const ul = document.querySelector('ul');
const span = document.querySelector('span');
const button = document.querySelector('button');
const moles = document.querySelectorAll('.mole');
button.addEventListener('click',function(){
button.disabled = true
const timeId = setInterval(function(){
const randomIndex = Math.round(Math.random()*(moles.length-1))
moles[randomIndex].classList.add('active')
setTimeout(function(){
moles[randomIndex].classList.remove('active')
},1500)
},1000)
setTimeout(function(){
clearInterval(timeId)
button.disabled =false
},1000*10)
})
ul.addEventListener('click',function(event){
if(event.target.className ==-'mole active'){
span.innerText++;
event.target.classList.remove('active')
}
})
</script>
</body>
</html>
今日待办
<!--
数据驱动视图
0 根据页面的需求 和 老师的多年开发经验 我决定这个数组 格式要这么定义
arr = [ {text:"每一个列表要显示的文字",checked:false } ]
1 输入框绑定键盘按下事件
1 判断用户按下的是不是回车键
2 获取输入框值
3 把它插入到数组中 (格式是强调)
4 封装一个函数 负责把数组的数据渲染到页面上
1 原生的checkbox只要你写了checked属性，它就一定会被选中
不会去管你 checked等于什么值！
2 实现点击复选框 功能
1 哪个复选框被勾选中，对应的文字 显示 中划线
1 css中兄弟选择器 +
2 伪类选择器 :checked
2 复选框的选中状态发生改变，也要去修改数组中对应的元素的状态跟着发生改变
给每一个复选框绑定点击事件 事件触发了 获取对应复选框的下标 自定义属性
然后数组根据下标修改 状态
arr[index].checked = !arr[index].checked;
3 重新调用render函数 显示最新的页面
3 点击删除按钮
1 事件触发了 获取按钮上的自定义属性index
2 执行数组删除元素
3 重新调用 函数渲染最新的数据
4 统计功能
封装一个函数来遍历 数组 根据checked属性true和false的数量来计算
1 一个未完成
2 一个已完成
3 这个函数需要放在render中，因为rende作用是渲染页面 重新显示完成的数量 也是渲染页面中的一环
5 a标签 清理选中
1 绑定点击事件
2 移除掉那些已经完成的 留下没有完成
定义一个新数组
遍历旧数组
判断元素 的checked 如果checked属性=false 表示未完成
把当前元素 添加到新的数组中
把新的数组赋值给旧数组
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-待办列表.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ccc;
}
ul {
list-style: none;
}
li {
padding: 20px;
text-align: left;
font-size: 30px;
border-bottom: 1px dashed #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
li input {
margin-right: 10px;
}
li button {
display: none;
padding: 5px;
}
li:hover button {
display: inline-block;
cursor: pointer;
}
/* 当复选框被勾选了的时候 选中它的兄弟标签 span */
/* + 小弟选择器 它可以选中紧挨着的下一个标签 兄弟关系 */
.chk:checked + span {
/* 中划线 */
text-decoration: line-through;
}
/* 选中了勾选了的复选框 */
/* .chk:checked{ */
/* width: 100px;background-color: black; */
/* 表示选择复选框 */
/* } */
h1 {
margin-bottom: 10px;
}
.chk + span {
/* 只选择中了span标签 */
/* background-color: black; */
}
.box {
background-color: #fff;
width: 60vw;
padding: 20px 20px 0;
margin: 50px auto;
}
.box .tool input {
width: 100%;
height: 50px;
text-indent: 20px;
font-size: 20px;
font-style: italic;
color: #666;
font-weight: 700;
}
section {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
a {
text-decoration-color: #666;
color: inherit;
}
</style>
</head>
<body>
<div id="app" data-v-app="">
<div class="box">
<h1>待办列表</h1>
<div class="tool">
<input autofocus="" type="text" placeholder="请输入代办事项" />
</div>
<ul>
<li></li>
</ul>
<section>
<span>1 未完成</span><a href="#">清理 <b>0</b> 已完成</a>
</section>
</div>
</div>
<script>
const text = document.querySelector('.tool input') //输入框
const ul = document.querySelector('ul') //ul
const span = document.querySelector('section span') //未完成
const b = document.querySelector('section a b ') //已完成
const link = document.querySelector('section a')
let arr =[]
const newStr = localStorage.getItem('todo')
if(newStr){
arr=JSON.parse(newStr)
}
reader()
// 点击绑定事件
text.addEventListener('keydown',function(event){
// 判断用户enter事件
if(event.key ==="Enter"){
arr.push({
checked:false,
text:text.value,
})
reader();
text.value =''
}
})
// 选中复选框
ul.addEventListener('click',function(event){
const index = event.target.dataset.index
// 复选框
if(event.target.className ==='chk'){
arr[index].checked = !arr[index].checked
reader();
}else if(event.target.nodeName ==='BUTTON'){
arr.splice(index,1)
reader();
}
})
function reader(){
let html =``
for(let index =0 ;index < arr.length;index++){
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))
static()
}
//统计功能
function static(){
let num1 = 0;
let num2 = 0;
for(let index =0;index< arr.length;index++){
if(arr[index].checked){
num1++
}else{
num2++
}
}
span.innerHTML= num1
b.innerHTML = num2
}
// 点击
link.addEventListener('click',function(){
let newArr= []
for(let index =0;index< arr.length;index++){
if(!arr[index].checked){
newArr.push(arr[index])
}
}
arr=newArr;
reader()
})
</script>
</body>
</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>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h3{
margin:50px;
text-align: center;
}
.main{
width: 1000px;
margin: 0 auto;
}
form{
border: 1px solid #000;
padding:5px;
}
table{
width: 100%;
border-collapse: collapse;
text-align: center;
}
thead{
background-color: #337ab7;
color: #fff;
}
td,
th{
padding: 10px 50px;
white-space: nowrap;
}
</style>
</head>
<body>
<h3>捐赠管理</h3>
<div class="main">
<form action="">
<label for=""> 捐赠人</label>
<input type="text" class="person">
<label for="">受捐单位</label>
<select name="" id="" class="unit">
<option value="1">1dsf</option>
<option value="2">2sfss</option>
<option value="3">3sff</option>
</select>
<label for=""> 金额</label>
<input type="text" class="money">
<label for="">受捐日期</label>
<input type="date" class="date">
<button type="button"> 新增</button>
</form>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>捐赠人</th>
<th>收捐单位</th>
<th>金额</th>
<th>收捐日期</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script>
const dataStr = localStorage.getItem('data')
let arr=[];
if(dataStr){
arr=JSON.parse(dataStr)
}
const tbody =document.querySelector('tbody')
const button = document.querySelector('button')
const personDom = document.querySelector('.person')
const unitDom = document.querySelector('.unit')
const moneyDom = document.querySelector('.money')
const dateDom = document.querySelector('.date')
button.addEventListener('click',function(){
const person = personDom.value;
const unit = unitDom.value;
const money = moneyDom.value;
const date = dateDom.value;
const id = Date.now();
const data ={
person:person,
unit:unit,
money:money,
date:date,
id:id,
};
arr.push(data)
reader()
})
tbody.addEventListener('click',function(event){
if(event.target.className === 'del'){
const index = event.target.index
arr.splice(index,1);
reader()
}
})
function reader(){
let html =``
for (let index = 0; index < arr.length; index++) {
html+=`
<tr>
<td>${arr[index].id}</td>
<td>${arr[index].person}</td>
<td>${arr[index].unit}</td>
<td>${arr[index].money}</td>
<td>${arr[index].date}</td>
<td>
<a data-index="${index}" href="#" class="del">删</a>
<a href="#" class="update">改</a>
</td>
</tr>
`;
}
tbody.innerHTML = html;
const strArr =JSON.stringify(arr)
localStorage.setItem('data',strArr)
}
reader()
</script>
</body>
</html>
<!--
1 先实现静态结构
2 点击开始按钮，随机显示同学
1 开启定时器
2 根据数组长度，获取随机数 -随机的显示同学的名称 去控制对应的li标签 选中
3 一旦开始选其他同学了，需要把之前选中的同学的active样式 移除掉！！
1 排他 （获取所有的li标签，遍历他们，挨个移除选中的类 active）
2 最后 再根据随机的索引来设置 li标签 添加active
1 直接获取之前选中（class=active）了的元素，移除active
1 第一次点击的时候 没有li标签 被添加过 active 获取它可能为空，第二次再去获取就可以了
2 再针对 随机数来来控制li标签 添加active
3 一段时间后，把最终确定同学名单显示在页面的大标题上
1 点击按钮的同时也可以开启一个延时器
1 控制定时器结束
2 可以知道当前你选中了的同学的名称（获取你的索引就可以了）（在一个延时器内想要获取一个定时器中的变量-全局变量）
3 把这个同学的名字设置到 标题标签上即可
4 再次点击按钮，又可以重新点名（在剩下的同学名单中）
1 上一个被选中的同学， 它名字要一直高亮 不应该被取消掉
多定义一个类就可以了
active 表示 在抽奖过程中的 选中
select 表示 最终被选中的同学
2 解决同学被重复点名的问题
1 原因（一直都是在一个大大的数组中来随机抽取）
1 完整同学名单的arr数组 [钟贵辉 聂成林 朱鑫]
2 完整同学名单的li数组
2 思考 能不能 每抽取一位同学 聂成林被抽中了
1 arr数组中 不要它 （容易实现 数组删除元素！！ splice）
arr=[钟贵辉,朱鑫]
2 li数组中 不要它 (如何实现 li数组中不要出现 聂成林同学 )
li数组 也使用 splice 跟着你一起去删除元素就可以了
把 伪数组转成真正的数组
3 真正的公司年会上 来抽奖
1 li数组 只是每一个同事的名单而已
2 难道 我把名单上的名字去掉 对应的那个同事 下地狱
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-点名系统.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
}
h1 {
padding: 10px;
background-color: #9acd32;
color: purple;
margin: 10px 0;
}
button {
width: 100px;
height: 50px;
border-radius: 25px;
background-color: #9acd32;
color: #fff;
border: none;
font-size: 20px;
}
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
li {
width: 100px;
height: 40px;
background-color: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
/* 在随机抽取的过程中被选中的 */
.active {
background-color: #9acd32;
color: #fff;
}
/* 确定下来了 最终被选中 */
.select {
background-color: palevioletred;
color: #fff;
}
</style>
</head>
<body>
<h1>被选中的小伙伴们:</h1>
<button>开始</button>
<ul></ul>
<script>
// 获取同学名单
const arr =
`王恒达 陈德明 吴佩阳 卢增年 周裕腾 李树鹏 巫斌斌 冯禹锋 黄伟轩 张永豪 何磊 黄润杰 尹可怡 林艳平 李超龙 黄东军 胡镇涛 李斌 曾林尉 刘洪盛 彭彪歌 宋家贵 苏家兴 谢自强 王润青 叶晓银 洪伟锋 陈婉桦 叶远航 罗锦活 肖坚镝 梁祺星 王佳丽 邱烽城 黄梓栋 连梓豪 聂嘉宏 黎子弘 刘毓湖 肖耀 彭炎 罗健法 张莹莹 黎金 陈实 陈爽爽 符群望 王淇 张观乐 谭嘉萌 李家豪 曾最祥 朱万旺 李耿佳 陈来弟 刘岩 陈柏荣 郑杰滨 史洁祥 宋紫凝 罗雅淇 王文倩 曹佳 余先城 柯庆翔 陈守驰 陈曜 陈东燕 张福民 陈达雄 诸俊洋 谷彦豪 区纪浩 陈观炎 房瞬峰 王治平 丘益振 吴泰琼 余佳龙 林观信 温永芳 李伟锋 彭垚 廖湘 冯祥标 庾荣发 崔福满 陈丹霞 苏文元 翁燕虹 漆天文 刘水兵 高航 钟贵辉 聂成林 朱鑫`.split(
' '
);
// const arr = `钟贵辉 聂成林 朱鑫`.split(' '); // 真正的数组 获取dom元素的数组 是伪数组 有些数组的方法不能使用
const ul = document.querySelector('ul')
const h1 = document.querySelector('h1')
reader()
let lis = document.querySelectorAll('li')
const button = document.querySelector('button')
button.addEventListener('click',function(){
let index; //数组索引
let selectList; //选中的颜色
const timeId = setInterval(function(){
selectList = document.querySelectorAll('li:not(.select)')
const beforeActive = document.querySelector('li.active')
if(beforeActive){
beforeActive.classList.remove('active')
}
index = Math.round(Math.random() * (selectList.length-1))
selectList[index].classList.add('active')
},300)
setTimeout(function(){
clearInterval(timeId)
selectList[index].classList.add('active')
h1.innerText +=`` +selectList[index].innerText
},5000)
})
function reader(){
let html = ``;
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
html += `<li>${arr[index]}</li>`;
}
ul.innerHTML = html;
}
</script>
</body>
</html>
数据渲染
// let html = ``;
// for (let index = 0; index < arr.length; index++) {
// html += `
// <tr>
// <td>${arr[index].id}</td>
// <td>${arr[index].person}</td>
// <td>${arr[index].unit}</td>
// <td>${arr[index].money}</td>
// <td>${arr[index].date}</td>
// <td>
// <a href="#" class="del">删</a>
// <a href="#" class="update">改</a>
// </td>
// </tr>
// `;
// }
