案例
倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam, voluptate. Dignissimos harum error magni beatae, itaque delectus! Tempora impedit dolor deleniti! Totam aliquid repellendus asperiores hic obcaecati? Doloremque, debitis autem?
</textarea>
<br>
<button class="btn" disabled>已阅读协议(6)
</button>
<script>
let btn = document.querySelector('.btn')
let i = 6
let timer = setInterval(function(){
i--
btn.innerHTML = `已阅读协议(${
i})`
if (i === 0){
clearInterval(timer)
btn.disabled = false
btn.innerHTML = `已阅读协议`
}
},1000)
</script>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/8dfe5bff5f744e5ba0817d809930905b.gif#pic_center)
焦点图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.img-box{
width: 1080px;
height: 720px;
margin: 0 auto;
position: relative;
}
.img-box img{
width: 100%;
}
.tip{
background-color: gray;
display: block;
float: left;
margin-top: 12px;
margin-right: 3px;
}
.img-box h3{
position: absolute;
bottom: 0;
right: 30px;
list-style: none;
z-index: 99;
}
</style>
</head>
<body>
<div class="img-box">
<img src="../../resources/image/background/1.jpg" alt="" class="pic">
<div class="tip">
<h3 class="text">1111</h3>
</div>
</div>
<script>
let data = [
{
imgSrc:'../../resources/image/background/1.jpg',
tiele:'1111'
},
{
imgSrc:'../../resources/image/background/2.jpg',
tiele:'2'
},
{
imgSrc:'../../resources/image/background/3.jpg',
tiele:'3'
},
{
imgSrc:'../../resources/image/background/4.jpg',
tiele:'4'
},
{
imgSrc:'../../resources/image/background/5.jpg',
tiele:'1111'
},
{
imgSrc:'../../resources/image/background/6.jpg',
tiele:'1111'
},
{
imgSrc:'../../resources/image/background/6.jpg',
tiele:'1111'
},
{
imgSrc:'../../resources/image/background/7.jpg',
tiele:'1111'
},
{
imgSrc:'../../resources/image/background/8.jpg',
tiele:'1111'
},
{
imgSrc:'../../resources/image/background/9.jpg',
tiele:'9'
},
]
let pic = document.querySelector('.pic')
let text = document.querySelector('.text')
let i = 0
setInterval(function(){
i++
pic.src = data[i].imgSrc
text.innerHTML = data[i].tiele