js小案例
1.轮播图（无定时器纯手动操作）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{margin: 0;padding: 0;}
.lunbo{height: 600px;width: 1140px;position: relative;}
.picture .item{list-style: none; position: absolute;transition: all .5s; opacity: 0;}
.item img{height: 600px;width: 1140px;}
.picture .cur{z-index: 9;opacity: 1;}
.btn{position: absolute;height: 200px; width: 50px;top: 150px;background: none;border: none;font-size: 36px;color: aquamarine;z-index: 10;}
#btnPex{left: 0px;}
#btnNext{right: 0px;}
.round_list{position: absolute;z-index: 99;bottom: 10px;right: 0px;}
.round_list .round{float: left; list-style: none;height: 15px;width: 15px;border-radius: 50%;border: 1px solid grey;margin-right: 15px;background-color: darkgray;cursor: pointer;}
.round_list .cur{background-color: #ffffff;}
</style>
<body>
<div class="lunbo">
<ul class="picture">
<li class="item cur"><img src="./img/1577663866422.jpeg" alt=""></li>
<li class="item"><img src="./img/1577663869884.jpeg" alt=""></li>
<li class="item"><img src="./img/1577663877104.jpeg" alt=""></li>
<li class="item"><img src="./img/1577663881433.jpeg" alt=""></li>
<li class="item"><img src="./img/1577663888613.jpeg" alt=""></li>
</ul>
<ul class="round_list">
<li class="round cur" data-index="0"></li>
<li class="round" data-index="1"></li>
<li class="round" data-index="2"></li>
<li class="round" data-index="3"></li>
<li class="round" data-index="4"></li>
</ul>
<button class="btn" id="btnPex"> < </button>
<button class="btn" id="btnNext"> > </button>
</div>
<script>
var items=document.getElementsByClassName('item');
var rounds=document.getElementsByClassName('round');
var goNextBtn=document.getElementById('btnNext');
var goPexBtn=document.getElementById('btnPex');
var index=0;
//清除列表的 cur样式
var clearCur=function(){
for(var i=0;i<items.length;i++){
items[i].className='item';
}
for(var i=0;i<rounds.length;i++){
rounds[i].className='round'
}
}
//移动图片 相当于移动cur类 （给图片添加cur类）
var goIndex=function(){
clearCur();
items[index].className='item cur'
rounds[index].className='round cur'
}
//下一张
var goNext=function(){
if(this.index<items.length-1){
index++;
}else{
index=0
}
goIndex();
}
//上一张
var goPex=function(){
if(index==0){
index=items.length-1;
}else{
index--;
}
goIndex();
}
//添加小圆点
for( var i=0;i<rounds.length;i++){
rounds[i].addEventListener('click',function(){
var roundIndex=this.getAttribute('data-index');//getAttribute获取标签属性 data-index
index=roundIndex; //将小圆点列表获取的data-index赋值给图片列表以便找到相对应的图片
goIndex();
})
}
goNextBtn.addEventListener('click',function(){
goNext();
})
goPexBtn.addEventListener('click',function(){
goPex();
})
</script>
</body>
</html>
2.短信验证秒数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
a{
color:red;
}
.disable{
pointer-events:none;
color:#666;
}
</style>
<body>
<p>
<input type="text" placeholder="请输入手机号">
</p>
<p>
<input type="text" placeholder="验证码">
<a href="javascript:;" id="btn">发送验证码</a>
</p>
<input type="checkbox" name="" id="">同意并已阅读《条例》
<script>
var oBtn = document.getElementById('btn');
var flag = true;
oBtn.addEventListener("click", function () {
var time = 10;
oBtn.classList.add('disable');
oBtn.innerText = '已发送';
if (flag) {
flag = false;
var timer = setInterval(() => {
time--;
oBtn.innerText = time + ' 秒';
if (time === 0) {
clearInterval(timer);
oBtn.innerText = '重新获取';
oBtn.classList.remove('disable');
flag = true;
}
}, 1000)
}
});
</script>
</body>
</html>
