目录
一、表单输入搜索查询
需求：用户可以通过输入框，搜索与输入内容对应的内容
分析：
1、用到表单和表格标签
2、需要使用到数组对象存储值
3、封装一个渲染的函数
4、在封装函数中循环形参，把表单渲染出来，添加到table表区域
5、然后初始化渲染数据要先调用一次函数，把数组对象作为实参先渲染一次
6、然后编写点击事件，点击事件内用一个新的空数组
7、去循环原先的数组对象
8、在数组对象里面判定name属性有没有包含match()到value值： arrObj.match(input.value)
9、如果有，就把当前索引上的对象push给新的数组
10、然后在点击事件内调用封装好的函数，把新数组作为传参即可
CSS
<style>
td {
text-align: center;
}
</style>HTML
搜索：<input type="text" value=""><button style="margin-left: 5px;">🔍</button>
<table border="1" height="30" width="200"></table>JS
<script>
//实现通过搜索内容，去显示对应的内容
//1、获取到元素
const input = document.querySelector('input') //表单
const btn = document.querySelector('button') //按钮
const table = document.querySelector('table')
//2、需要一个数组来对表格的内容进行渲染,使用：数组对象
const arrObj = [
{
name: 'C语言入门',
price: 39.9
},
{
name: 'Java从入门到精通',
price: 49.9
},
{
name: 'HTML5与CSS3入门',
price: 35.5
},
{
name: 'Vue2+Vue3框架入门到精通',
price: 59.9
},
{
name: 'Ajax与Git入门',
price: 25.9
}
]
/*实现表单的搜索*/
//1、我们需要先把数组对象给初始化渲染到页面中
function getData(...arr) {
//1.1 str变量作为一个标签的拼接
let str = `<tr><td>书名</td><td>价钱</td></tr>` //拼接出固定的表头
//1.2 循环形参arr,然后去拼接数组中的属性
arr.forEach(item => {
str += `<tr><td>${item.name}</td><td>${item.price}</td></tr>`
})
//1.3 然后我们要把 str 渲染到页面中，也就是 table表格的范围
return table.innerHTML = str
}
//2、调用函数，初始化渲染数据
getData(...arrObj)
//3、初始化渲染结束，给查询按钮绑定点击事件
btn.addEventListener('click', () => {
const newArr = [] //新数组用来存放满足条件的值
//3.1 循环数组
arrObj.forEach(item => {
//3.2 判定有没有包含:match()
if (item.name.match(input.value))
newArr.push(item)
})
//3.2 添加满足的条件以后，就调用函数，把newArr作为实参
getData(...newArr)
})
</script>二、自动计时器（启动、暂停、清空）
需求：需求：点击按钮，开始计时，点击暂停，停止计时，点击重置，清空计时器
(HTML实在写得有点丑还有点烂，就将就用了)
HTML
<div class="box">
<div class="top">
<h1>0</h1>
</div>
<div class="btnBox">
<button class="go">开始</button>
<button class="stop">暂停</button>
<button class="reset">清空</button>
</div>
</div>CSS
<style>
.box {
margin: 100px auto;
width: 500px;
height: 200px;
}
.box .top {
width: 500px;
height: 100px;
background-color: aqua;
border-radius: 30px;
}
.box .top h1 {
padding-top: 30px;
text-align: center;
font-size: 30px;
}
.box .btnBox {
width: 100%;
height: 100px;
}
.box .btnBox button {
margin-top: 10px;
margin-left: 70px;
font-size: 20px;
}
</style>JS
<script>
//1、获取元素
const date = document.querySelector('h1') //获取到要显示计时的标签
const go = document.querySelector('.btnBox .go') //开始
const stop = document.querySelector('.btnBox .stop') //暂停
const reset = document.querySelector('.btnBox .reset') //清空
//2、定义变量
let i = 0; //i作为控制定时器的控制量
//3、在点击开始前，暂停和清空两个按钮我们给他禁用
stop.disabled = true
reset.disabled = true
//4、当点击开始，触发定时器
go.addEventListener('click', function () {
const stopDate = setInterval(function () {
i++
//把i渲染到date中
date.innerHTML = i
//同时打开暂停按钮
stop.disabled = false
//判定如果清空处于不禁用的情况下，在开启的时候禁用掉清空
//因为点击暂停后，清空按钮就打开了，然后再点开始，清空按钮是可用的
//为了防止开启后暂停，再开启时，清空可用，判定清空按钮禁用即可
if (reset.disabled == false) {
reset.disabled = true
}
//5、当点击暂停按钮，停止定时器
stop.addEventListener('click', function () {
clearInterval(stopDate)
//暂停以后，打开清空的按钮
reset.disabled = false
//6、然后开启清空的事件
reset.addEventListener('click', function () {
i = 0 //重新赋值i
date.innerHTML = i
//当清空了以后，就需要重新禁用掉暂停和清空
stop.disabled = true
reset.disabled = true
})
})
}, 1000)
})
</script>三、点击按钮变化随机颜色
需求：点击更换颜色的按钮时，随机更改div中的颜色
HTML
<div class="box"></div>
<button>换个颜色试试</button>CSS
<style>
.box {
width: 200px;
height: 200px;
background-color: hotpink;
}
</style>
JS
<script>
//1、获取元素
const box = document.querySelector('.box') //改颜色的盒子
const btn = document.querySelector('button') //按钮
//2、随机修改颜色，需要随机数，区间是 0 - 15
//2.1 封装一个随机数的函数，待会在循环中调用
const getRandom = (Max, Min) => Math.floor(Math.random() * (Max - Min + 1)) + Min
//3、
const getColor = () => {
//3.1 一个字符串 用来拼接十六进制
let color = '#' //十六进制色是#开头的
//3.2 一个数组
const arrColor = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'] //数组存放十六进制的字符
//3.3因为十六进制字符串是：# + 6个字符，所以我们要循环六次
for (let i = 0; i < 6; i++) {
//3.4 获取到随机数
const random = getRandom(0, arrColor.length)
console.log(random) //测试一下随机数
//3.5 把随机数拼接给字符串 color
color += arrColor[random]
}
//3.6 把十六进制字符串返回出去
return color
}
//4、触发btn的点击事件，给div的背景色样式调用随机颜色函数
btn.addEventListener('click', () => {
box.style.background = getColor()
})
</script>1、十六进制从：0~9，A、B、C、D、E、F 组成（大小写均可）
2、修改颜色的十六进制字符串是由 ： # 开头
3、获取的随机数区间在0-15之间即可
4、因为16进制的颜色字符串由6个字符组成，所以循环六次，通过获取六次随机数来当作数组索引，然后获取索引上的值对字符串变量做一个拼接
5、结束时候返回字符串
6、在触发点击事件时，是给要变色盒子的背景色修改样式，为其调用函数
四、随机点名案例
需求：点击开始按钮，开始随机点名，点击结束，显示名字
HTML
<div class="box">
<h2>随机点名</h2>
<span>抽到你啦</span>
<div class="qs">
<h2>这里显示姓名</h2>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end" disabled="true">结束</button>
</div>
</div>CSS
<style>
.box {
border-radius: 10px;
margin: 0 auto;
width: 600px;
height: 200px;
background-color: pink;
}
.box h2 {
text-align: center;
}
.box span {
margin-left: 45%;
}
.qs {
text-align: center;
}
.btns {
margin-left: 43%;
}JS
<script>
//1、获取元素
const name = document.querySelector('.qs h2') //获取显示名字
const go = document.querySelector('.btns .start') //开始按钮
const end = document.querySelector('.btns .end') //结束按钮
//2、设置变量
//一个数组存储人员名单
const arr = ['刘备', '关羽', '张飞', '马超', '黄忠', '曹操', '孙权', '诸葛亮']
let endDate = 0 //把控制定时器的变量设为全局变量
let random = 0; //为了在结束事件和随机数不冲突，把随机数也设为全局变量
// random和endDate的值是会不断变化的，全局变量要改为let
//3、封装随机数
const getRandom = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
//4、当点击开始按钮
go.addEventListener('click', () => {
//4.1打开定时器，打开结束的禁用按钮，再禁用开始按钮
end.disabled = false
go.disabled = true
endDate = setInterval(() => {
//4.2 不断的获取随机数
random = getRandom(0, arr.length - 1)
// console.log(random);
//4.3 把数组[random]渲染给name
name.innerHTML = arr[random]
}, 100)
})
//5、绑定结束事件
end.addEventListener('click', () => {
//5.1、关闭定时器
clearInterval(endDate)
//5.2 把抽到的名字从数组中删掉
arr.splice(random, 1)
console.log(arr);
//5.3结束以后，打开开始按钮，禁用结束按钮
end.disabled = true
go.disabled = false
//5.4 结束点击以后，需要判定（如果数组中已经没人了，就不打开开始按钮了)
if (arr.length <= 0) {
go.disabled = end.disabled = true
}
})
</script>
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
