文章目录
<-------------------------------------------参考答案-------------------------------------------->
1,关闭二维码
<script>
//获取元素
let erw = document.getElementById('erw')
let clo = document.getElementById('clo')
//事件监听:1,事件源2,事件类型3,回调函数
clo.addEventListener('click', function() {
erw.style.display = 'none'
})
</script>
2,验证码倒计时
<ul>
<li>
手机号:
<input type="text">
</li>
<li>
验证码:
<input type="text" class="verify">
<button id="btn">获取验证码</button>
</li>
</ul>
<script>
//获取元素
let btn = document.getElementById('btn')
//设置设置监听
btn.addEventListener('click', function() {
//禁止按钮
this.disabled = true
//设置定时器
let i = 3
//没有延迟
this.innerText = `${i}秒后获取验证码`
//调用定时器,用用匿名函数做参数
let timer = setInterval(function() {
//因为倒计时所以减减
i--
btn.innerHTML = `${i}秒后获取验证码`
//停止定时器
if (i === 0) {
//停止定时器
clearInterval(timer)
//改变按钮文字
btn.innerHTML = `获取验证码`
//启用按钮
btn.disabled = false
}
}, 1000)
})
</script>
3,随机点名
<body>
<h2>随机问答</h2>
<div class="box">
<span>问题是：</span>
<div class="qs">这里显示题目</div>
</div>
<div class="btn">
<button class="dos">开始</button>
<button class="end">结束</button>
</div>
<script>
//数组
let arr = ['张一', '张二', '张三', '张四', '张五']
//开始按钮业务
let dos = document.querySelector('.btn .dos')
//获取qs 盒子准备往里边写内容
let qs = document.querySelector('.qs')
//结束按钮业务
let end = document.querySelector('.btn .end')
//外边定义一个随机变量
let random = 0
//外边定义一个定时器变量
let timer = null
dos.addEventListener('click', function () {
//利用定时器来制作
timer = setInterval(function () {
//随机函数取值
random = Math.floor(Math.random() * (arr.length))
//在qs中显示取到的值
qs.innerHTML = arr[random]
}, 50)
//数组里的数组的元素是1的时候,就禁用两个按钮]
if (arr.length === 1) {
dos.disabled = true
end.disabled = true
}
})
//结束按钮,停止定时器, 删除抽出来的那个数据
end.addEventListener('click', function() {
clearInterval(timer)
//删除数组中的某个元素
arr.splice(random, 1)
})
</script>
4,tab栏切换
<script>
let items = document.querySelectorAll('.tab .tab-item')
let mains = document.querySelectorAll('.products .main')
for (let i = 0; i < items.length; i++) {
items[i].addEventListener('click', function() {
//这句话一定要写到上边,先移除以前的,我才能加上
//找到active这个类,然后移除掉
document.querySelector('.tab .active').className = 'tab-item'
//点击完毕后,当前元素,添加active这个类
this.className = 'tab-item active'
//下面的元素要随着变化
//首先下面四个全部隐藏
for (let j = 0; j < mains.length; j++) {
mains[j].style.display = 'none'
}
//再把当前的显示出来
mains[i].style.display = 'block'
})
}
</script>
5,百度换肤效果
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循环注册事件
for (let i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('click', function () {
// / this.src 就是我们点击图片的路径 images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = `url(${this.src})`;
})
}
</script>
6,切换图片循环
<body>
<input type="button" value="切换" id="btn" /><br />
<img src="imgs/girl1/00.jpg" width="300" id="img" />
<script>
let arr = [
'imgs/girl1/00.jpg',
'imgs/girl1/01.jpg',
'imgs/girl1/02.jpg',
'imgs/girl1/03.jpg',
'imgs/girl1/04.jpg',
]
//1. 找对象
let btn = document.getElementById('btn')
let img = document.getElementById('img')
let index = 1
//2. 给btn注册点击事件
btn.addEventListener('click', function () {
// if (max < num){ max = num}
// if (min > num) { min = num}
if (index > 4) {
index = 0
}
img.src = arr[index] // 1
index++ // 2
})
</script>
</body>
7,开关灯
<body>
<button>关灯</button>
<script>
//获取按钮元素
let btn = document.querySelector('button')
//获取body元素
let body = document.body
//bool的值只有真假两种状态
let isFlag = true
console.dir(body)
//监听事件--点击按钮会切换什么状态
btn.addEventListener('click', function () {
//点击按钮后的状态
if (isFlag) {
//改变颜色
body.style.backgroundColor = 'black'
//改变按钮文字
btn.innerText = '开灯'
isFlag = false
//再次点击的状态
} else {
body.style.backgroundColor = 'white'
btn.innerText = '关灯'
isFlag = true
}
})
</script>
</body>