global对象 全局对象

所有的全局变量和全局方法，都可以归在window上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        var a="aaa";

        console.log(window.a);

    </script>

</head>

<body>

</body>

</html>

window.alert()     弹出提示框

window.confirm()  弹出确认框，确认返回true，取消返回false

window.prompt() 弹出输入框，输入内容返回内容，否则返回null

第一个参数为提示信息，第二个参数为默认信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        #span{

            background:#abcdef;

            color:orange;

        }

    </style>

    <script>

        window.onload=function(){

            var span=document.getElementById("span");

            var span2=document.getElementById("span2");

            var btn1=document.getElementById("btn1");

            var btn2=document.getElementById("btn2");

            var btn3=document.getElementById("btn3");

            btn1.onclick=function(){

                alert("btn1被点击了哦~");

            }

            btn2.onclick=function(){

                var text2=confirm("确定删除小可爱嘛？");

                if(text2){

                    span.style.display="none";

                }else{

                    return;

                }

            }

            btn3.onclick=function(){

                var text3=prompt("请输入你最喜欢的颜色","仙女粉");

                span2.innerHTML=text3;

            }

        }

    </script>

</head>

<body>

    <span id="span">我是小可爱</span><br>

    我最喜欢的颜色是：<span id="span2"></span><br>

    <button id="btn1">alert</button>

    <button id="btn2">confirm</button>

    <button id="btn3">prompt</button>

</body>

</html>

window.open() 打开新窗口

第一个参数：页面

第二个参数：页面命名

第三个参数：一组，关于设置新页面属性

window.close()  关闭当前窗口

当我加入这段代码想要关闭窗口时，没有成功，而且控制台提示：Scripts may close only the windows that were opened by it.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        window.onload=function(){

            var btn1=document.getElementById("btn1");

            btn1.onclick=function(){

                window.open("new.html", "new", "width=400,height=400,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");

            }

            btn2.onclick=function(){

                window.close();//Scripts may close only the windows that were opened by it.

            }

        }

    </script>

</head>

<body>

    <button id="btn1">打开新窗口试试~</button>

    <button id="btn2">现在关闭新窗口啦</button>

</body>

</html>

查看资料得知，除了IE浏览器之外，像谷歌浏览器和火狐浏览器等，都规定window.close()只能用于关闭弹出类窗口

于是，修改用法，将window.open()打开的窗口保存到变量中，使用.close()关闭该窗口

这应该就是正确打开方式了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        window.onload=function(){

            var btn1=document.getElementById("btn1");

            btn1.onclick=function(){

                newWindow=window.open("new.html", "new", "width=400,height=400,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");

            }

            btn2.onclick=function(){

                newWindow.close();

            }

        }

    </script>

</head>

<body>

    <button id="btn1">打开新窗口试试~</button>

    <button id="btn2">现在关闭新窗口啦</button>

</body>

</html>

成功关闭打开的新窗口

javascript是单线程语言，也就是代码按顺序执行，可以通过以下两个方法调整顺序

延迟调用 setTimeout()

有匿名函数和自定义函数两种方式

取消延迟调用 clearTimeout()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        window.onload=function(){

            // 匿名函数

            var timer1=setTimeout(function(){

                alert("延迟1s后我来啦！");

            },1000);

            setTimeout(myFun,2000);

            function myFun(){

                alert("延迟2s后我来啦！");

            }

            clearTimeout(timer1);//取消timer1的延迟调用

        }

    </script>

</head>

<body>

</body>

</html>

间歇调用 setInterval()

clearInterval() 取消间歇调用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        window.onload=function(){

            var myInterval=setInterval(function(){

                console.log("h");

            },1000);

            setTimeout(function(){

                clearInterval(myInterval);

            },10000);

        }

    </script>

</head>

<body>

</body>

</html>

10秒倒计时

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        window.onload=function(){

            var count=document.getElementById("count");

            var myInterval=setInterval(function(){

                var inner=count.innerHTML;

                count.innerHTML=inner-1;

                if(inner<=1){

                    clearInterval(myInterval);

                }

            },1000);

        }

    </script>

</head>

<body>

    <span id="count">10</span>

</body>

</html>

用setTimeout() 实现间歇调用，则需要在setTimeout()中调用自身

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        window.onload=function(){

            var count=document.getElementById("count");

            function myFun(){

                var inner=count.innerHTML;

                count.innerHTML=inner-1;

                if(inner>1){

                    setTimeout(myFun,1000);

                }else{

                    clearTimeout(firstTimer);

                }

            }

            var firstTimer=setTimeout(myFun,1000);//首次调用的定时器

        }

    </script>

</head>

<body>

    <span id="count">10</span>

</body>

</html>

文字闪烁效果

注意：文字都是输入法自带的，分别是：

★★★我是仙女★★★

☆☆☆我是仙女☆☆☆

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        #text{

            color:orange;

        }

    </style>

    <script>

        window.onload=function(){

            var text=document.getElementById("text");

            var i=0;

            setInterval(function(){

                if(i%2==1){

                    text.innerHTML="★★★我是仙女★★★";

                }else{

                    text.innerHTML="☆☆☆我是仙女☆☆☆";

                }

                i++;

            },500)

        }

    </script>

</head>

<body>

    <span id="text">☆☆☆我是仙女☆☆☆</span>

</body>

</html>

浏览器对象模型“BOM”-- window对象的更多相关文章

  1. 第8章 浏览器对象模型BOM 8.1 window对象

    ECMAScript是javascript的核心,但如果要在web中使用javascript,那么BOM(浏览器对象模型)则无疑是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,在浏览器之间共 ...

  2. 浏览器对象模型BOM小结

    概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window B ...

  3. 浏览器对象模型BOM

    第二章 浏览器对象模型BOM 1.作用:操作窗口:提供导航对象:提供定位对象:浏览器上方的地址栏:提供跟屏幕相关对象:提供对Cookie的支持 2.根元素:window:代表整个窗口:window,o ...

  4. 浏览器对象模型BOM（Browser Object Model）

    1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...

  5. JavaScript编程：浏览器对象模型BOM

    4.浏览器对象模型BOM: document.body.offsetwidth可以获取浏览器宽度. Window对象:          窗口操作:            1.moveBy(dx,dy ...

  6. JavaScript 浏览器对象模型 (BOM)

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”. 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model)尚无正式标准. 由于现代浏览器已经 ...

  7. JavaScript高级程序设计（第3版）学习笔记·第8章——浏览器对象模型BOM

    转自:http://www.shaoqun.com/a/43768.aspx 访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器 ...

  8. 浏览器对象模型bom的作用是什么？

    浏览器对象模型bom的作用是什么? 零.总结 1.BOM提供了独立于内容而与浏览器窗口进行交互的对象 2.BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和 ...

  9. 浏览器对象模型(BOM)是什么？（体系结构+知识详解）（图片：结构）

    浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构) 一.总结 1.BOM操作所有和浏览器相关的东西:网页文档dom,历史记录,浏览器屏幕,浏览器信息,文档的地址url,页面的框架集. ...

随机推荐

  1. vue中导入bootstrap.css

    1.利用cnpm下载然后导入,用npm也是一样的: cnmp install bootstrap -S 在main.js文件下导入: import "bootstrap/dist/css/b ...

  2. SpringMVC 参数映射与文件上传

    handler参数映射: 接下来就是Spring的各个处理细节了,无论框架如何疯转其实我们处理请求的流程是不变的,设计到的操作也是固定的,举个例子,当我们要实现一个登陆功能时: 创建一个用于处理登录请 ...

  3. 有道词典 Andriod 版本数据格式分析

    其实很简单无聊 基于版本 5.3 分析. 其实也简单分析了有道词典iOS版本,必应词典的各个版本,以及金山词典的各个版本,还有那个一直逍遥法外的林格斯词典. 由于在各个平台上的限制,同一词典的不同版本 ...

  4. Javascript小白经典题型(二)

    51. 输出的是什么? function getInfo(member, year) { member.name = "Lydia"; year = "1998" ...

  5. 20194653 面向对象基础3——static、this、包总结

    题目1:编写一个类Computer,类中含有一个求n的阶乘的方法.将该类打包,并在另一包中的Java文件App.java中引入包,在主类中定义Computer类的对象,调用求n的阶乘的方法(n值由参数 ...

  6. shell命令之一天一见：grep

    一. 简介 grep (缩写来自Globally search a Regular Expression and Print)是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来 ...

  7. 《Python学习手册 第五版》 -第11章 赋值、表达式和打印

    上一章对Python的语句和语法已经进行了基本的说明,接下来就是每个章节的详细说明,本章的主要内容就是标题中涵盖的三点:赋值语句.表达式语句.打印语句 本章重点内容如下: 1.赋值语句 1)赋值语句的 ...

  8. （二）maven依赖，两个项目之间如何依赖，继承实现

    maven的jar之间存在依赖关系的,我们在引入一个时,其他有依赖关系的也会被引入 依赖排除: 比如现在有两个依赖关系,A(x,java,y.java,z.java)  B(a,java,b,java ...

  9. ELK搭建（docker环境）

    ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大功能:是一套开 ...

  10. Druid 0.17 入门（2）—— 安装与部署

    在Druid快速入门其实已经简单的介绍过最简化配置的单节点部署,本文我们将详细描述Druid的多种部署方式,对于测试开发环境可以选用轻量的单机部署方式,而生产环境我们最好选用集群部署的方式,确保系统的 ...