博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

DOM confirm setTimeout url刷新

Posted on 2018-08-10 14:37  alex_hrg  阅读(336)  评论(0编辑  收藏  举报
console.log                 输出框
alert                       弹出框
confirm                     确认框
  
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

setTimeout的作用,例如删除qq邮件时,顶部有个撤消五秒会消失。就是五秒后才真正删除,这期间你可以回收。setTimeout就是设置一个等待时长,这个时间过后,执行一次代码。

使用例子:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input id="i1" type="text" value="test" />
 9 <label id="i2" onclick="Cancel();" style="background-color: red;"></label>
10 <input onclick="Delete();" type="button" value="删除内容" />
11 <input onclick="Flush();" type="button" value="刷新页面" />
12 <script>
13     function Delete() {
14         var v = confirm("are you really delete?");
15         var tag = document.getElementById('i2');
16         var i = 3;  //三秒后删除
17         if (v == true){
18             tag.style.display = 'inline';
19             tag.textContent = "点击[撤消]" + i;
20             obj = setInterval(function () {
21                 i--;
22                 tag.textContent = "点击[撤消]" + i;
23             },1000);
24             obj1 = setTimeout(function () {
25                 document.getElementById('i1').value = "";
26                 clearInterval(obj);    //倒计时过了,不再定时
27                 tag.style.display = 'none';  //撤消时间已过,不显示撤消标签
28             },3000);
29         }
30     }
31     function Flush() {
32         var url = location.href; //获取当前url
33         //location.href = "https://baidu.com";  //设置页面跳转
34         location.reload(); //刷新当前页面,也可以写成 location.href=location.href
35     }
36     function Cancel() {
37         clearTimeout(obj1);
38         clearTimeout(obj);
39         document.getElementById('i2').style.display = 'none';
40     }
41 </script>
42 </body>
43 </html>
View Code