间歇定时器示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="box"></div> <script> var box = document.getElementById('box'); var num = 10; box.innerHTML = num; var timer = setInterval(function(){ num--; if(num < 0){ num = 0; clearInterval(timer); } box.innerHTML = num; console.log(num) },1000) </script> </body> </html>
延时定时器示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { width: 200px; height: 130px; position: relative; position: fixed; bottom: 0; right: 0; display: none; } #box img { width: 100%; height: 100%; } #box span { position: absolute; top: 0; right: 0; background: red; color: #fff; padding: 4px; cursor: pointer; } </style> </head> <body> <div id="box"> <span>X</span> <img src="images/ad.jpg" alt=""> </div> <script> var box = document.getElementById('box'); var close = box.getElementsByTagName('span')[0]; // 出现广告定时器 var timer = setTimeout(function () { box.style.display = 'block'; clearTimeout(timer); }, 3000); // 关闭按钮 close.onclick = function () { box.style.display = 'none'; setTimeout(function () { box.style.display = 'block'; }, 3000); } </script> </body> </html>