console.log                 输出框

alert                       弹出框

confirm                     确认框

// URL和刷新

location.href               获取URL

location.href = "url"       重定向

location.reload()           重新加载

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

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

使用例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input id="i1" type="text" value="test" />

 <label id="i2" onclick="Cancel();" style="background-color: red;"></label>

 <input onclick="Delete();" type="button" value="删除内容" />

 <input onclick="Flush();" type="button" value="刷新页面" />

 <script>

     function Delete() {

         var v = confirm("are you really delete?");

         var tag = document.getElementById('i2');

         var i = 3;  //三秒后删除

         if (v == true){

             tag.style.display = 'inline';

             tag.textContent = "点击[撤消]" + i;

             obj = setInterval(function () {

                 i--;

                 tag.textContent = "点击[撤消]" + i;

             },1000);

             obj1 = setTimeout(function () {

                 document.getElementById('i1').value = "";

                 clearInterval(obj);    //倒计时过了，不再定时

                 tag.style.display = 'none';  //撤消时间已过，不显示撤消标签

             },3000);

         }

     }

     function Flush() {

         var url = location.href; //获取当前url

         //location.href = "https://baidu.com";  //设置页面跳转

         location.reload(); //刷新当前页面，也可以写成 location.href=location.href

     }

     function Cancel() {

         clearTimeout(obj1);

         clearTimeout(obj);

         document.getElementById('i2').style.display = 'none';

     }

 </script>

 </body>

 </html>

DOM confirm setTimeout url刷新的更多相关文章

  1. Vue2自定义指令改变DOM值后未刷新data中绑定属性的值

    标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...

  2. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  3. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  4. JavaScript,Dom,jQuery

    JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript 语言的规则编写相应代码,浏览器可以解释出相应的处理. 注 ...

  5. JavaScript学习总结【9】、DOM Ready

    1.DOM DOM(Document Object Model)即文档对象模型,是从文档中抽象出来的,DOM 操作的对象就是文档,DOM 将 HTML 文档呈现为带有元素.属性和文本的树结构,即节点树 ...

  6. DOM&BOM笔记

    day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...

  7. JS刷新页面总和！多种JS刷新页面代码!

    1)<meta http-equiv="refresh"content="10;url=跳转的页面">10表示间隔10秒刷新一次2)<scri ...

  8. DOM based XSS Prevention Cheat Sheet(DOM Based XSS防御检查单)

    本文为翻译版本,原文请查看 https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet 介绍 谈到XSS攻击,有三种公认的 ...

  9. jquery 实现页面局部刷新ajax做法

    这个方法就多了去了,常见的有以下几种:下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲 ...

随机推荐

  1. python2和Python3的区别（长期更新）

    1.在Python2中无需将打印的内容放在括号内,但是Python3中必须将打印的内容放在括号内,从技术上看Python3中的print是函数. 2.对于用户交互终点额输入input,在python2 ...

  2. Spring Boot 揭秘与实战（二） 数据存储篇 - MyBatis整合

    文章目录 1. 环境依赖 2. 数据源3. 脚本初始化 2.1. 方案一 使用 Spring Boot 默认配置 2.2. 方案二 手动创建 4. MyBatis整合5. 总结 4.1. 方案一 通过 ...

  3. react-navigation 使用详解（转载）

    上篇博客和大家分享了关于React Native jsBundle预加载,界面启动优化的内容,详情可点击: 基于最新版本React Native实现JsBundle预加载,界面秒开优化 一.开源库介绍 ...

  4. logminer实战之生产环境写入数据字典，dg环境查询拷贝日志，测试环境进行挖掘，输出结果

    应客户需要,对某一天的日志进行挖掘,分析日均归档日志切换数量20增长至40的原因,是什么表的dml操作导致的日志量剧增,最终定位某个应用(需要客户自己进行甄别) 操作说明及介绍: 1.客户10.2.0 ...

  5. 【linux基础】如何确定系统使用的Eigen库的版本

    path /usr/include/eigen3/Eigen/src/Core/util 文件 Macros.h #define EIGEN_WORLD_VERSION 3 #define EIGEN ...

  6. [LeetCode&Python] Problem 122. Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  7. 测试那些事儿—简述CPU的工作原理

    简单介绍CPU的工作原理 1.内部架构 CPU是由晶体管组成,其根本任务就是执行指令和数据处理,对计算机来说,就是由0和1组成的序列.CPU从逻辑上可分为3个模块,分别是控制单元,运算单元和存储单元. ...

  8. Python--函数对象@命名空间与作用域@包函数@装饰器@迭代器@内置函数

    一.函数对象 函数(Function)作为程序语言中不可或缺的一部分,但函数作为第一类对象(First-Class Object)却是 Python 函数的一大特性. 那到底什么是第一类对象(Firs ...

  9. SpringBoot企业级博客开发

    1.springboot生成项目 PS : 进入项目,输入gradle build,生成build文件夹:  然后进入libs有jar,使用java jar进行运行项目 PS: 这个项目没有准守res ...

  10. Nginx：承受3万并发连接数，胜过Apache 10倍

    编者按:Nginx是目前比较重要的开源性负载均衡技术,新浪.网易.六间房等很多网站都将Nginx部署进自己的网站系统架构,并解决部分问题.本文是作者长期的实战经验,很有参考价值. 本文是我撰写的关于搭 ...