1.弹出广告效果：
<style>
#active{
display: none;
}
</style>
</head>
<body>
<img src="./img/2.jpg" alt="" id="active">
<script>
//获取元素
let active=document.querySelector('#active')
//定义变量接收定时器
let timer=null
timer=setInterval(() => {
//2秒钟让广告弹出
active.style.display='block'
setTimeout(() => {
//清除定时器
clearTimeout(timer)
//2秒中后让广告消失
active.style.display='none'
}, 2000);
}, 2000);
</script>
</body>
2.制作定时炸弹
<body>
<button id="start">设置定时炸弹</button>
<button id="stop">在炸弹爆炸前停止</button>
<script>
//获取上方元素
let start = document.querySelector('#start')
let stop = document.querySelector('#stop')
//定义一个变量用来接收下方定时器
let timer = null;
//上方id名为start的鼠标点击效果
start.onclick = function () {
//清理定时器，保证定时器在下次点击的时候不是在重新开一个定时器
clearTimeout(timer)
console.log('定时炸弹已设置，3秒后爆炸');
//利用上方定义的变量来接收定时器
timer = setTimeout(() => {
console.log('炸弹已爆炸');
}, 3000);
}
//上方名为stop的绑定鼠标点击事件
stop.onclick = function () {
//当鼠标点击时清理定时器，从而完成定时器的暂停
clearTimeout(timer)
console.log('炸弹已清除');
}
</script>
</body>
3.qq延迟菜单
<style>
body {
width: 1200px;
margin: 0 auto;
}
.box {
position: relative;
}
.box img {
width: 300px;
height: 500px;
margin: 100px auto;
}
#right {
width: 300px;
height: 200px;
position: absolute;
left: 300px;
top: 0;
display: none;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/qq.jpg" alt="">
<img src="./img/qq2.png" alt="" id="right">
</div>
<script>
let boxs = document.querySelector('.box img')
// console.log(boxs);
let right = document.querySelector('#right')
// console.log(right);
//定义一个变量用来接收定时器
let timer = null
//定义一个函数名为show的函数
function show() {
//该表函数的样式
right.style.display = 'block'
//清理定时器
clearTimeout(timer)
}
//左图中鼠标移入的效果
boxs.onmouseover = show
//右图鼠标移入的效果
right.onmouseover = show
//定义一个函数
function hide() {
//利用上方定义的变量接收定时器
timer=setTimeout(() => {
right.style.display = 'none'
}, 500);
}
//左图鼠标离开效果
boxs.onmouseout=hide
//右图鼠标离开效果
right.onmouseout=hide
</script>
</body>
4.获取验证码：
<style>
button {
cursor: pointer;
}
</style>
</head>
<body>
<input type="text"> <button id="time">获取验证码</button>
<script>
let time = document.querySelector('#time')
//定义表量接收下方定时器
let timer = null;
//给time绑定鼠标点击事件
time.onclick = function () {
// （）秒后重新发送
let t = 30
//走第一次的时候timer为null，所以第一次定时器不会被清理，在点击的时候清理定时器，避免叠加
clearInterval(timer)
timer = setInterval(() => {
t--
time.innerHTML = (t) + '秒后重新发送'
if (t === 0) {
//当走到0秒的时候清除定时器，还原文字
clearInterval(timer)
time.innerHTML = '获取验证码'
}
}, 1000);
}
</script>
</body>
