标签：function document 函数 Javascript let 按钮 imgs btn 监听
文章目录
<-------------------------------------------参考答案-------------------------------------------->
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>
标签：function,document,函数,Javascript,let,按钮,imgs,btn,监听 来源： https://blog.csdn.net/weixin_52088589/article/details/111768404
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。