Window 对象

[toc]

window 对象

window对象是BOM的核心, window对象指当前的浏览器窗口.

window常用对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告窗
prompt()	显示可提示用户输入的对话框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
open()	打开啊一个新的浏览器窗口或查找一个已命名的窗口
close()	关闭浏览器窗口
print()	打印当前窗口的内容
scrollBy()	按照指定的像素值来滚动内容
scrollTo()	把内容滚动到指定的坐标
setInterval()	每隔指定的时间执行代码
setTimeout()	在指定的延迟时间后来执行代码
clearInterval()	取消setInterval()的设置
clearTimeout()	取消setTimeout()的设置

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>window对象</title>
    <script type="text/javascript">
        function openWindow() {
            var a = confirm("欢迎━(*｀∀´*)ノ来到百度，点击【确定】一起嗨!");
            if (a == true) {
                window.open('https://www.baidu.com', '_blank', 'width=600px,height=400px');
            }
            else {
                return;
            }
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="点击我，打开新窗口" onclick="openWindow()" />
    </form>
</body>
</html>

JavaScript 计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：

方法	描述
setInterval()	每隔指定的时间执行代码
setTimeout()	在指定的延迟时间后来执行代码
clearInterval()	取消setInterval()的设置
clearTimeout()	取消setTimeout()的设置

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)

我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>定时器</title>
    <script type="text/javascript">
        var attime;
        function clock() {
            var time = new Date();
            attime = time.getHours() + " : " + time.getMinutes() + " : " + time.getSeconds();
            document.getElementById("clock").value = attime;
        }
        setInterval(clock,1000);
    </script>
</head>
<body>
    <form>
        <input type="text" id="clock" size="50" />
    </form>
</body>
</html>

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:

id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>计时器</title>
    <script type="text/javascript">
        function clock() {
            var time = new Date();
            document.getElementById("clock").value = time;
        }
        // 每隔100毫秒调用clock函数，并将返回值赋值给i
        var i = setInterval("clock()", 100);
    </script>
</head>
<body>
    <form>
        <input type="text" id="clock" size="50" />
        <input type="button" value="Stop" onclick="clearInterval(i)" />
    </form>
</body>
</html>

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明：

要调用的函数或要执行的代码串。
延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<script type="text/javascript">
    setTimeout("alert('Hello!')", 3000);
</script>

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        function tinfo() {
            var t = setTimeout("alert('Hello!')", 5000);
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="start" onClick="tinfo()">
    </form>
</body>
</html>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        var num = 0;
        function numCount() {
            document.getElementById('txt').value = num;
            num = num + 1;
            setTimeout("numCount()", 1000);
        }
    </script>
</head>
<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" value="Start" onClick="numCount()" />
    </form>
</body>
</html>

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:

id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 “Stop” 按钮来停止这个计数器：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>计时器</title>
    <script type="text/javascript">
        var num = 0;
        var i;
        function startCount() {
            document.getElementById('count').value = num;
            num = num + 1;
            i = setTimeout("startCount()", 1000);
        }
        function stopCount() {
            clearTimeout(i);
        }
    </script>
</head>
<body>
    <form>
        <input type="text" id="count" />
        <input type="button" value="Start" onclick="startCount()" />
        <input type="button" value="Stop" onclick="stopCount()" />
    </form>
</body>
</html>

返回前一个浏览的页面

window.history.back();

或者

window.history.go(-1)

返回下一个浏览的页面

window.history.forward();

或者

window.history.go(1);

Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法

location.[属性|方法]

例如URL

http://www.test.com:8080/list.php?uid=8&charpterid=86#mediaid118

<html>
    <head>
        <meta charset="utf-8">
        <title>Test.CC</title>
        <script type="text/javascript">
            document.write(window.location.protocol);
            document.write("<br>")
            document.write(window.location.host);
            document.write("<br>")
            document.write(window.location.hostname);
            document.write("<br>")
            document.write(window.location.port);
            document.write("<br>")
            document.write(window.location.pathname);
            document.write("<br>")
            document.write(window.location.search);
            document.write("<br>")
            document.write(window.location.hash);
        </script>
    </head>
    <body>
        <div>
            <!-- 下面是输出结果 -->
            http:
            www.test.com:8080
            www.test.com
            8080
            /index.php
            ?uid=8&charpterid=86
            #mediaid118
        </div>
    </body>
</html>

编程练习

倒计时任务, 5秒后跳转到指定页面, 亦可点击返回按钮返回前一页.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>操作成功</p>
    <span id='myspan'></span>秒后回到主页<a href="http://www.baidu.com" onclick="window.history.back()">返回</a>
</body>
<script type="text/javascript">
    //获取显示秒数的元素，通过定时器来更改秒数。
    let seconds = document.getElementById('myspan');
    let i = 5;
    function tiktok(){
        if(i < 1){
            window.location.href = "http://www.baidu.com";
        }else{
            i = i-1;
            seconds.innerText = i;
        }
    }
    //通过window的location和history对象来控制网页的跳转。
    window.onload=function(){
        seconds.innerText = i;
        setInterval(tiktok,1000);
    }
</script>
</html>

Window 对象

Window 对象

window 对象

JavaScript 计时器

计时器setInterval()

取消计时器clearInterval()

计时器setTimeout()

取消计时器clearTimeout()

返回前一个浏览的页面

返回下一个浏览的页面

Location对象

编程练习

相关文章