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">設(shè)置定時炸彈</button>
????<button?id="stop">在炸彈爆炸前停止</button>
????<script>
????????//獲取上方元素
????????let?start?=?document.querySelector('#start')
????????let?stop?=?document.querySelector('#stop')
????????//定義一個變量用來接收下方定時器
????????let?timer?=?null;
????????//上方id名為start的鼠標(biāo)點(diǎn)擊效果
????????start.onclick?=?function?()?{
????????????//清理定時器秕豫，保證定時器在下次點(diǎn)擊的時候不是在重新開一個定時器
????????????clearTimeout(timer)
????????????console.log('定時炸彈已設(shè)置混移，3秒后爆炸');
????????????//利用上方定義的變量來接收定時器
????????????timer?=?setTimeout(()?=>?{
????????????????console.log('炸彈已爆炸');
????????????},?3000);
????????}
????????//上方名為stop的綁定鼠標(biāo)點(diǎn)擊事件
????????stop.onclick?=?function?()?{
????????????//當(dāng)鼠標(biāo)點(diǎn)擊時清理定時器，從而完成定時器的暫停
????????????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
????????//定義一個函數(shù)名為show的函數(shù)
????????function?show()?{
????????????//該表函數(shù)的樣式
????????????right.style.display?=?'block'
????????????//清理定時器
????????????clearTimeout(timer)
????????}
????????//左圖中鼠標(biāo)移入的效果
????????boxs.onmouseover?=?show
????????//右圖鼠標(biāo)移入的效果
????????right.onmouseover?=?show
????????//定義一個函數(shù)
????????function?hide()?{
????????????//利用上方定義的變量接收定時器
????????????timer=setTimeout(()?=>?{
????????????????right.style.display?=?'none'
????????????},?500);
????????}
????????//左圖鼠標(biāo)離開效果
????????boxs.onmouseout=hide
????????//右圖鼠標(biāo)離開效果
????????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綁定鼠標(biāo)點(diǎn)擊事件
????????time.onclick?=?function?()?{
????????????//?（）秒后重新發(fā)送
????????????let?t?=?30
????????????//走第一次的時候timer為null回铛，所以第一次定時器不會被清理狗准，在點(diǎn)擊的時候清理定時器茵肃，避免疊加
????????????clearInterval(timer)
????????????timer?=?setInterval(()?=>?{
????????????????t--
????????????????time.innerHTML?=?(t)?+?'秒后重新發(fā)送'
????????????????if?(t?===?0)?{
????????????????????//當(dāng)走到0秒的時候清除定時器验残，還原文字
????????????????????clearInterval(timer)
????????????????????time.innerHTML?=?'獲取驗證碼'
????????????????}
????????????},?1000);
????????}
????</script>
</body>
