js BOM(一)window、location、history、navigator、定时器setInterval

2021-01-18 00:12

阅读:630

YPE html>

标签:button   before   语法   类型   停止   agent   对象模型   row   for   

目录:

 

 

1.BOM介绍
    * JavaScript分三部分
        - ECMAScript标准:JS的基本语法
        - DOM:Document object Model  文档对象模型--操作页面的元素
        - BOM:Browser Object Model 浏览器对象模型--操作的是浏览器

    * 浏览器中有个顶级对象:window
      页面中顶级对象:document,页面中所有的内容都是属于浏览器的,页面中的内容也都是window的
      
    * window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window
    * console.log(window.name);//注意,输出空,而不是undefined。所以,通常不要用name定义变量名。
    * 可以用top代替window
    
2.系统对话框
    * window.alert("您好");//样式不能修改,生产不用,测试的时候用
    * window.prompt("请输入:");//样式不能修改,生产不用,测试的时候用
    * window.confirm("确定退出吗");//点确定返回true,生产不用
    
3.页面加载事件
    * 页面加载完毕后触发
        window.onload = function(){};
        
    * window.onunload = function() {};
      页面关闭后触发的事件,谷歌不支持,IE8支持
    
    * window.onbeforeunload = fn;
      页面关闭之前触发的事件,谷歌不支持,IE8支持

4.location对象
    * console.log(window.location); // 查看location的属性
    * location.href="http://www.baidu.com"; // 有历史记录
    * location.assign("http://www.baidu.com");
    * location.reload(); // 刷新
    * location.replace("url"); // 将当期页面用"url"替换,没有历史记录
    
5.history对象
    * 前进 window.history.forword();
    * 后退 window.history.back();
    * window.history.go(数字)正数前进,负数后台
    
    * 一般不用。了解即可。
    
    * 案例:模拟浏览器的前进和后退 

// 页面1:111.html标题
// 页面二:222.html 标题

 

6.navigator对象
    * navigator.userAgent; // 判断用户浏览器的类型
        - Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
        
    * navigator.platform; // 判断浏览器所在的系统平台类型
        - Win64

 

7.定时器setInterval
    * var id = window.setInterval(fn,time)
        - time:单位毫秒
        - 返回值:定时器id
        - 功能:每time时间执行一次fn函数
        
    * 停止定时器
        window.clearInterval(定时器id)

 

8.案例:图片摇摆


标题

 

9.案例:一闪一闪亮晶晶
  注意:有问题,如果多次点击按钮"摇摆起来",就无法停止摇摆了;


标题

js BOM(一)window、location、history、navigator、定时器setInterval

标签:button   before   语法   类型   停止   agent   对象模型   row   for   

原文地址:https://www.cnblogs.com/xy-ouyang/p/12190129.html


评论


亲,登录后才可以留言!