1.随机抽取的名字显示到指定的标签内部
需求：将名字放入span 盒子内部 分析： ①：获取span 元素 ②：得到随机的名字 ③：通过innerText 或者 innerHTML 讲名字写入元素内部
let names = [‘aaa’,’bbb’]
// 前置知识：为按钮绑定单击事件：单击按钮之后再进行处理
let btn = document.querySelector('button')
let span = document.querySelector('span')
// 为btn添加单击（click)事件的监听，当用户单机之后，就调用你传入的回调函数进行处理
btn.addEventListener('click', function() {
// 单击按钮之后的业务处理
//生成一个随机索引
let index = parseInt(math.random()*names.length)
//根据索引获取姓名
let name = names[index]
//将姓名渲染到指定的元素中
span.innerText = name
2.页面刷新，图片随机更换
需求：当我们刷新页面，页面中的图片随机显示不同的图片
<button>单击随机显示图片</button>
<img src="" alt="" />
<script>
// 获取元素
let btn = document.querySelector('button')
let img = document.querySelector('img')
// 绑定单机按钮
btn.addEventListener('click', function () {
// 1-4的随机数
let imgName = parseInt(Math.random() * 4) + 1
// 生成路径
let path = `./images/${imgName}.jpg`
img.src = path
})
3.页面刷新,随机更换背景图片
需求：当我们刷新页面，页面中的背景图片随机显示不同的图片 分析： ①： 随机函数 ②： css页面背景图片 background-image ③： 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style
<body>
<div>
<img src="./images/b01.jpg" alt="" />
<p>第1张图片</p>
</div>
<script>
// 获取元素
// 设置src属性
let img = document.querySelector('img')
// 设置图片描述信息
let p = document.querySelector('p')
// 图片索引从1开始，后期根据索引生成路径
let index = 1
let timeId
// 封装函数
function startTime() {
// 开启定时器
timeId = setInterval(function () {
// 让索引自增
index++
// 判断索引的边界，上限，如果到10了，就应该重置到1
if (index === 10) {
index = 1
}
//根据索引 生成一个图片路径
let path = `./images/b0${index}.jpg`
// 将生成的路径赋值给img的src属性
img.src = path
//设置图片的描述信息
p.innerText = `第${index}张图片`
}, 1000)
}
startTime()
// 添加鼠标进入离开效果
let div =document.querySelector('div')
// 鼠标进入 mouseenter
div.addEventListener('mouseenter',function(){
clearInterval(timeId)
})
// 鼠标离开 mouseleava
div.addEventListener('mouseleave',function(){
startTime(timeId)
})
</script>
</body>
4.设置/修改 表单元素
（1）看到密码，本质是把表单类型转换为文本框
（2）复选框全选
1.获取全选复选框的状态：checked状态，它是一个内置属性
2.获取下面的所有复选框，获取的是一个伪数组，遍历为每一个复选框的checked设置为全选复选框的 状态值
<body>
<input type="password" class="username" />
<button class="changeType">变</button>
<br />
<input type="checkbox" class="chkAll" />全选
<div>
<input type="checkbox" />写代码 <input type="checkbox" />调bug
<input type="checkbox" />写文档
</div>
<button class="getChioce">获取用户选择</button>
<script>
// 1.密码边文本
// 获取元素
let changeType = document.querySelector('.changeType')
let username = document.querySelector('.username')
// 生成点击事件
changeType.addEventListener('click', function () {
// 获取当前输入框type值
let type = username.type
// 判断，当属性值等于密码框时，点击变更为文本框，否则变为密码框
if (type === 'password') {
username.type = 'text'
} else {
username.type = 'password'
}
// 方法二 三元 根据当前的type设置属性值
// username.type = username.type ==='password' ? 'text' :'password'
})
// 2.选中全选复选框
let chkAll = document.querySelector('.chkAll')
// 选中结构中的复选框
let chks = document.querySelectorAll('div input')
// 为全选复选框绑定单机事件
chkAll.addEventListener('click', function () {
// 获取全选复选框的状态，选中为True,否则为false
let state = chkAll.checked
// 遍历所有复选框，设置checked
for (let i = 0; i < chks.length; i++) {
chks[i].checked = state
console.log(chks, state);
}
})
</script>
</body>
5.获取验证码
倒计时五秒，禁用
// 获取当前元素
let btn = document.querySelector('button')
// 绑定单机按钮
btn.addEventListener('click', function () {
// 设置运行时间变量
let timeCount = 5
// 开启定时器
// timeId:就是创建这个定时器所返回的句柄，这个句柄与当前定时器无关款
let timeId = setInterval(function() {
timeCount--
// 设置元素内容
btn.innerText = `倒计时${timeCount}s`
// 设置元素属性 倒计时禁用
btn .disabled =true
// 判断时间是否失灵，如果是零就停止定时器--清除定时器 (轮询重复判断)
if (timeCount == -1){
// 清除定时器
clearInterval(timeId)
btn.disabled=false
btn.innerText = '获取验证码'
}
},1000)
})
6.倒计时效果
需求：按钮60秒之后才可以使用
1.有一个全局的索引 1-9
2.添加一个定时器，让索引值能够间隔某个时间从1变到9 3.要根据索引值生成一个路径 4.将路径赋值给img标签的src属性
<script>
// 获取元素
// 设置src属性
let img = document.querySelector('img')
// 设置图片描述信息
let p = document.querySelector('p')
// 图片索引从1开始，后期根据索引生成路径
let index =1
// 开启定时器
setInterval(function(){
// 让索引自增
index++
// 判断索引的边界，上限，如果到10了，就应该重置到1
if(index ===10){
index=1
}
//根据索引 生成一个图片路径
let path = `./images/b0${index}.jpg`
// 将生成的路径赋值给img的src属性
img.src=path
//设置图片的描述信息
p.innerText = `第${index}张图片`
},1000)
</script>
7.淘宝点击关闭二维码
需求：点击关闭之后，淘宝二维码关闭
1.获取至少两个元素： 关闭按钮 二维码元素 2.为关闭按钮绑定单击事件，在事件处理函数中 3.将二维码元素隐藏
// 获取元素
let span = document.querySelector('span')
let erweima = document.querySelector('.erweima')
// 为关闭按钮绑定单击事件
span.addEventListener('click',function(){
// 将二维码隐藏 通过设置样式可实现
erweima.style.display='none'
})
8.随机点名
需求：点击按钮之后，随机显示一个名字，如果没有显示则禁用按钮
// 生成模拟数据
let names = ['aaa','bbb','ccc','ddd','eee','fff']
// 获取元素
let p =document.querySelector('p')
let btn =document.querySelector('button')
// 绑定单击事件
btn.addEventListener('click',function(){
// 生成数组的索引 随机数
let index = parseInt(Math.random()*names.length)
// 获取索引对应的名字 赋值
let name = names[index]
// 将当前索引位置删除 选中的
names.splice(index,1)
// 将姓名填充到指定元素中
p.innerText = name
// 判断数组长度是否为0 ，为0说明删除了所有元素
if(names.length === 0){
btn.disabled=true
}
})
随机点名进阶版
1.单击开始之后，添加定时器，在定时器中随机获取姓名进行渲染 2.单击结束之后，清除定时器，获取最后一次所选中的姓名进行渲染`
// 生成模拟数据
let names = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff']
// 获取元素
let p = document.querySelector('p')
let start = document.querySelector('.start')
let end = document.querySelector('.end')
// 声明全局变量
let timeId
let index
// 开始 绑定单击事件
start.addEventListener('click', function () {
// 添加定时器
timeId = setInterval(function () {
// 生成一个随机suoyin
let index = parseInt(Math.random() * names.length)
// 根据索引获取名字
let name = names[index]
// 将获取的名字渲染添加到p 标签
p.innerText = name
}, 50)
})
// 结束 绑定单击事件
end.addEventListener('click', function () {
// 定时器结束
clearInterval = (timeId)
//删除选中的索引元素
names.splice(index, 1)
// 判断数组是否长度为0，为0禁用按钮
if (names.length === 0) {
start.disabled = true
}
console.log(names);
})
9.微博输入案例
需求：用户输入文字，可以计算用户输入的字数
分析： ①：判断用输入事件 input ②：不断取得文本框里面的字符长度 ③：把获得数字给下面文本框
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea
placeholder="说点什么吧..."
id="area"
cols="30"
rows="10"
maxlength="200"
></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul></ul>
</div>
</div>
<script>
// 获取元素
let textarea = document.querySelector('textarea')
let useCount = document.querySelector('.useCount')
// 为文本域添加内容监听input
textarea.addEventListener('input',function(){
// 获取用户输入内容的长度，赋值给useCount
useCount.innerText = textarea .value .trim().length
})
</script>
10.全选复选文本框案例
需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
分析： ①：全选复选框点击，可以得到当前按钮的 checked ②：把下面所有的小复选框状态checked，改为和全选复选框一致 ③：如果当前处于选中状态，则把文字改为取消， 否则反之
全选框
// 获取元素
let checkAll = document.querySelector('#checkAll')
let all = document.querySelector('.all')
let cks = document.querySelectorAll('.ck')
// console.log(checkAll,all,ck);
// 实现全选
// 用全选复选框的状态，赋值给下面所有的复选框
checkAll.addEventListener('click',function(){
// 获取当前全选框状态
let state = checkAll.checked
// 伪数组遍历，赋值给下面的复选框
cks.forEach(function(element,index) {
element.checked = state
})
})
复选框
方法一 一票否决法
下面的三个复选框的选中状态影响全选复选框的选中状态 1.设置全局变量，标记全选复选框的状态，默认为true 2.为下面的三个复选框添加单击事件 3.遍历三个复选框，判断是否有其中任何一个没有被选中，如果有一个没选，将标记设置为false 4.将标记值赋值给全选复选框
// 设置一个全局标记 标记去选复选框的状态
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click',function(){
// 判断当前遍历到的复选框的选中状态是否为 非选中
// 满足条件，说明有一个没有
let flag = true
cks.forEach(function(v,i){
if(v.checked == false){
flag = false
}
})
checkAll.checked = flag
})
}
方法二 判断获取当前被选中的复选框数量 与总数比较
1.在每个复选框单击之后，遍历获取当前被选中的复选框的数量， 2.如果数量 === 所有复选框的总数，说明 全部都被选中了，全选应该选中，否则取消选中
// 设置一个全局的标记
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click',function(){
// 设置一个数量
let count = 0
// 遍历所有复选框，判断复选框是否被选中，如果被选中，数量+1
cks.forEach(function(v){
if(v.checked == true){
count++
}
})
if(count == cks.length){
checkAll.checked = true
}else{
checkAll.checked = false
}
})
}
方法三 用伪类：checked直接获取选中复选框的数量
优化：添加全选和取消
<script>
// 获取元素
let checkAll = document.querySelector('#checkAll')
let all = document.querySelector('.all')
let cks = document.querySelectorAll('.ck')
// console.log(checkAll,all,ck);
// 实现全选
// 用全选复选框的状态，赋值给下面所有的复选框
checkAll.addEventListener('click',function(){
// 获取当前全选框状态
let state = checkAll.checked
// 伪数组遍历，赋值给下面的复选框
cks.forEach(function(element,index) {
element.checked = state
})
// 设置文本内容 如果是全选状态就是取消，否则就是全选
all.innerText = state? '取消' : '全选'
})
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click',function(){
// 让数量等于选中复选框数量
let count = document.querySelectorAll('.ck:checked').length
if(count == cks.length){
checkAll.checked = true
all.innerText = '取消'
}else{
checkAll.checked = false
all.innerText = '全选'
}
})
}
11.购物车加减操作
需求：用户点击加号，则文本框+1，点击减号，则文本框-1，如果文本框为1，则禁用减号
// 获取元素
let total = document.querySelector('#total')
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
// 做+
add.addEventListener('click',function(){
// 获取输入框数量
let count = total.value
// 数量加1
count++
// 重新赋值给输入框
total.value = count
// 加一定会导致数量>1
reduce.disabled = false
})
// 做-
reduce.addEventListener('click',function(){
// 获取输入框数量
let count = total.value
// 数量加1
count--
// 重新赋值给输入框
total.value = count
// 判断数量是否是1，如果是1则禁用按钮
if(count == 1){
reduce.disabled = true
}
})
