定时器打开关闭，BOM对象

已于 2022-07-18 15:31:40 修改
阅读量444 收藏
点赞数 1
分类专栏： Js 文章标签： javascript
于 2021-01-11 19:56:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z18237613052/article/details/112485188
版权

目录

定时器

关于vue组件中定时器中只能使用箭头函数的问题链接

在js中定时器有两种

1、setInterval()每隔多久后执行一次这个函数,循环
关闭用clearInterval()
2、setTimeout()只在指定时间后执行一次这个函数
关闭用 clearTimeout()

setInterval()
格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);

【注意】:可以写执行的代码，也可以直接传入函数,当计时器传入的参数为负数时,就为0,立即执行。

传入的函数带括号时是执行这个函数的内容，只是这个函数名时会一直执行
返回值：启动定时器时，系统分配的编号(没有意义)

  • 加括号的情况
 function main() {
        console.log("输出了");
    }
 setInterval(main(), 2000)  //不管多久只执行一次

在这里插入图片描述

  • 不加括号的情况
 - <script>
    function main() {
         console.log("输出了");
    }
    setInterval(main, 2000)  //每隔两秒执行一次
</script>

在这里插入图片描述

例子:vue项目中一段时间后对同一个数据进行改变

 this.show3 = true;
        setTimeout(() => {
          this.show3 = false;
        }, 1000);

记住一句话:
加括号为调用该函数，返回值为函数返回值。而定时器是结合函数引用进行调度的，并不是函数的执行返回结果

关闭定时器的方式：

1.关闭页面。（当我不写结束条件的时候）
2.clearInterval();（下面有例子）
【注意】 clearInterval函数需要一个参数：定时器的编号。

 <script>
     setInterval("refresh()",1000);//1秒一次执行这个函数
     var int=1;//从1开始
     function refresh(){//这个函数的内容
         document.write(int);
         int++;//每次加一
     }
    </script>
    var int=1;这样写执行的语句就是一个函数
    setInterval(function(){
        int++;
        document.write(int)
    },1000)

这个代码只有关闭页面才会停止
在这里插入图片描述

<script>
     var   a =setInterval("refresh()",1000);
     var b=1;
     function refresh(){
         document.write(b);
         b++;
         if(b==5){//给函数加一个终止条件
            clearInterval(a);
         }
     }

    </script>

在这里插入图片描述

2、setTimeout（）
只在指定时间后执行一次。
关闭：clearTimeout();
【注意】 clearTimeout函数需要一个参数：定时器的编号。

<body>当点击开始时时钟走,点击结束时停止
    <button type="button" onclick="init()">开始</button>
    <button type="button" onclick="stp()">结束</button>
    <h2 class="times"></h2>
</body>
<script>
    var id;
    function init() {
        var xian = new Date().toLocaleTimeString(); //获取现在的时间转为这种格式 下午8:59:33
        document.querySelector(".times").innerHTML = xian;
        id = setTimeout(init, 1000);
    }
    function stp() {
        clearTimeout(id);
    }
</script>

效果：当打开页面一秒后页面弹出helloword

 <script>
        function a() {
            document.write("helloWord!");
            
        }
        var ti =setTimeout(a,1000);

    </script>

效果:关闭定时器

<script>
        function a() {
            document.write("helloWord!");
        }执行代码，1000毫秒也就是1秒后弹出helloWord
        var ting = setTimeout(a, 1000);
        关闭这个定时器，他一次也不会执行
        clearTimeout(ting);
    </script>

在这里插入图片描述

定时器的重新调用

定时器的重新调用就是重新写一遍,但要注意需要将上一个定时器清除

<template>
  <div>
    <el-button @click="poop">点击执行定时器</el-button>
    <el-button @click="poop1">点击再次执行定时器</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      realTimer: '',
      timeshi: 1,
    }
  },
  methods: {
    poop() {
      this.realTimer = setInterval(() => {
        console.log("定时器执行");
      }, this.timeshi * 1000);
    },
    poop1() {
      clearInterval(this.realTimer)//清除上一个定时器
      this.realTimer = setInterval(() => {
        console.log("定时器执行2");
      }, 2 * 1000);
    },
  }
}
</script>

JavaScript 由三大部分组成

ES：语法标准，函数，对象。
BOM：borwser object model 浏览器对象模型 操作浏览器部分功能的
DOM：文档对象类型， 操作网页上的元素。

window对象：
1.是JavaScript中的顶级对象
2.全局变量，自定义函数都属于window的属性或方法。
3.我们在使用window对象下的属性或方法时，可以省略window.

常见的BOM对象：

  • window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；

  • document 对象，文档对象；

  • location 对象，浏览器当前URL信息；

  • navigator 对象，浏览器本身信息；

  • screen 对象，客户端屏幕信息；

  • history 对象，浏览器访问历史信息；

window对象的常用方法：

1.弹出系统对话框。
(1) alert()
(2) prompt()

<script>
        function testprompt() {
            var uname = window.prompt("请输入用户名", "张三");
            console.log(uname); //你写什么就会输出什么,上面那个名字可以不写
        }
    </script>
</head>
<button onclick="testprompt()">输入框</button>
<body>

在这里插入图片描述

(3) confirm()下面有确认取消小练习
确认，取消小练习

<script>
        var flag = confirm("请确认");
         if (flag) {
            alert("您点击了确认");
         }

         else {
             alert("您点击了取消");
         }
       
    </script>

2.打开窗口
window.open(url,target,param)
url :要打开的地址
target:新窗口的位置。 _blank(新开一个网页）
,_self（在原网页打开）
,_parent(父框架下)
param:新窗口的一些设置。
name：新窗口的名字，可以为空
【注意】name需要写在target前面。

返回值：新窗口的句柄。
3.关闭窗口
window.close(); 关闭当前窗口
open返回值.close(); 关闭新窗口

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // _self  在原网页打开
        // _blank  新开一个网页打开
        var newopen=null;
        function func(){
            newopen=window.open("https://www.baidu.com","baidu",  "_blank" , "width=400,height=400,top=200,left=300")
        }//新打开的网页宽400，高400px，距离左边300
        function closeWindows(){
             //window.close();//关闭当前网页
             newopen.close();//关闭这个新网页
             
            
        }
    </script>
</head>
<body>//当我点击的时候执行这个函数
    <button  οnclick="func()">打开新窗口</button>
    <button  οnclick="closeWindows()">关闭</button>
    
</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>
    <script>
        function dakai(){
            var opener=window.open();
            var code = document.getElementById("code").value;
            opener.document.write(code);
        }
    </script>
</head>
<body>
    <textarea id="code" cols="50" rows="30"></textarea>
    <button οnclick="dakai()">运行</button>
    
</body>
</html>

在这里插入图片描述

location 对象，浏览器当前URL信息；

location.search()设置或返回从问号 (?) 开始的 URL（查询部分）。

在分割字符串那里有详细解释
在这里插入图片描述
在任意网页控制台使用这个方法location.search都能打印出来这个url地址
在这里插入图片描述这里就引入一个知识
a标签中的href属性
它里面可以放跳转的网络地址
也可以放跳转本地的文件
同时,也可以设置里面的type(类型)值
这样我们就能用location.search()获取到地址中url的值进行下一步操作

<a href="rankModule.html?type=yuepiao"> 起点月票榜</a>

在这里插入图片描述

location.href()设置或返回完整的 URL。

location.href()在node.js部分用于页面的重定向

 location.href = '/admin'//访问本地localhost:3000/admin

获取url路径实际效果
在这里插入图片描述

在这里插入图片描述

江河i
关注
专栏目录
BOM对象
qq_42839746的博客
09-13 2182
BOM：Brower Object Model，指的是浏览器对象模型。 作用：操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。 浏览器对象：浏览器提供的一系列内置对象的统称。 BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。 window对象是BOM的顶层（核心）对象，其他的对象都是以属性的方式添加到window对象下，也可称为window的子对象。
【JavaScript BOM】定时器、location对象、navigator对象、JS执行机制
耍酷的李世达的博客
09-13 342
BOM1.BOM概述2.window对象常见事件窗口加载事件1窗口加载事件2两者区别调整窗口大小事件3.定时器setTimeout()案例：五秒后自动关闭广告停止setTimeout()定时器setInterval()案例：倒计时停止setInterval()定时器案例：发送短信this指向4.JS执行机制JS单线程同步和异步5.location对象5.1 URL5.2 location对象的属性案例：5秒后跳转页面案例：获取URL参数5.3 location对象的方法6.navigator对象 1.BOM
js计时器(开始计时、停止计时、重置)
02-20
计时器的实现，有开始计时、停止计时、重置功能。
关闭定时器(setTimeout/clearTimeout|setInterval/clearInterval)
weixin_34235105的博客
11-23 2254
　1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:timerID 　　1.2 关闭Timeout程序: scope.clearTimeout(timerID); 　　 　　2.1 开启Interval程序:scope.setInterval("functionName()...
javascript定时器，取消定时器，及js定时器优化方法
热门推荐
12-28 12万+
通常用的方法： 启动定时器： window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间，单位是毫秒 取消定时器： clearInterval(Method); 那么问题来了。用 clearInterval(timerid);来清除，往往不能马上停止，用什么方法比较好解决？ 优化方案如下 var timeout
js 定时器的开启与关闭
kaleid_liner的博客
03-16 4万+
开启：realTimeClData = setInterval(realTimeCl, 60000);运行：function realTimeCl() {}关闭clearInterval(realTimeClData);
iOS 关闭定时器
weixin_30539835的博客
09-14 302
调用一次计时器方法： myTimer=[NSTimerscheduledTimerWithTimeInterval:1.5target:selfselector:@selector(scrollTimer)userInfo:nilrepeats:NO]; //不重复，只调用一次。timer运行一次就会自动停止运行 重复调用计时器方法： ...
定时器、BOM、
weixin_53125457的博客
01-08 240
定时器 在js中定时器有两种 1、setInterval() 2、setTimeout() 1、setInterval() 格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次); 【注意】可以写执行的代码，也可以直接传入函数。 返回值：启动定时器时，系统分配的编号 关闭定时器的方式： 直接关闭页面。 clearInterval( ); 【注意】 clearInterval函数需要一个参数：定时器的编号。 //执行timer这个函数，每1000毫秒执行一次 va
JavaScript之BOM对象操作窗口大小、加载、定时器、this指向、同步与异步、location对象、navigator对象、history对象
weixin_53155105的博客
08-09 209
什么是BOM？ BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。 window 对象是浏览器的顶级对象,它具有双重角色。 它是 JS 访问浏览器窗口的一个接口。 ..
网页设计-网页设计BOM对象.pdf
最新发布
12-23
BOM对象是浏览器对象模型的核心对象，代表浏览器打开的窗口，其他对象都是该对象的子对象。BOM结构如下图所示： window对象 window对象表示一个浏览器窗口或一个框架，用于访问除navigator以外任何对象的顶层对象...
javascript定时器取消定时器及优化方法
12-12
javascript定时器取消定时器及js定时器优化方法 通常用的方法： 启动定时器： window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间，单位是毫秒 取消定时器： clearInterval(Method); 那么问题来了。用 clearInterval(timerid);来清除，往往不能马上停止，用什么方法比较好解决？ 优化方案如下 var timeout = false; //启动及关闭按钮 function time() { if(timeout) return; Method(); set
功放定时器电路（闲置15分钟自动关闭电源）
07-28
本文介绍了一种功放定时器电路
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
11-23
废话不多说了，直接给大家贴代码了。 // 每隔五秒定时刷新当前窗口 setTimeout("self.location.reload();",5000); //js 定时关闭窗口(ie和FF中测试过) //6秒后自动关闭当前窗口 setTimeout("window.opener=null;window.close()",6000); 下面给大家介绍下javascript定时器使用 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果，分别是 window.setTimeout()和window.setInterval。其中前者可以使一段
【JS】定时器的开启与关闭
点滴记忆
07-10 3999
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
BOM定时器
weixin_54418006的博客
01-13 368
1. setTimeout() 定时器 window.setTimeout(调用函数,[延迟的毫秒数]); setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数一次。 setTimeout() 这个调用函数称为回调函数 callback 注意： window可以省略 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。第三种不推荐 延迟的毫秒省略默认是0，如果写必须是毫秒 因为定时器可能有很多，所以经常给定时器赋值一个标识符 &l
定时器开启和关闭
weixin_55711841的博客
07-20 2907
定时器开启和关闭
【JS】定时器设置、取消
程序猿开发日志【学习永无止境】
05-07 1951
1、首先定义自己的方法 function test() { alert("测试"); } 2、在定时器中使用 setInterval("test()",1000);//定时器,一定要加双引号，循环执行1秒一次 setTimeout("test()",1000);//只执行一次，1秒后执行 3、清除定时器 clearInterval(id);//注意传入的是定时器的id ...
js中的定时器的开启与关闭
qq_43435403的博客
11-15 3674
setInterval() 指在指定周期内，不断调用某个函数 语法： setInterval(function,time,lang) 参数： function:必需参数，要调用的函数或要执行的代码串 time:必需参数，每隔多长时间调用函数，单位为毫秒 lang:可选参数，运行的脚本语言，JScript | VBScript | JavaScript clearInterval() 表示停止setInterval定时器调用函数 function getTime() { console.lo
深入理解JavaScript BOM：浏览器对象模型详解
"JavaScript浏览器对象模型BOM使用介绍，主要涉及window对象的属性和方法，包括窗口状态、文档对象、历史记录、框架、屏幕信息等，以及与用户交互相关的alert、blur等方法。" JavaScript的浏览器对象模型（Browser ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值