XIN'BOLG

导航

4月8日--window的常用对象及其方法

名称

说明

alert (text)

显示一个带有提示信息和确定按钮的警告对话框

confirm(text)

显示一个带有提示信息、确定和取消按钮的提示对话框

prompt(text,val)

显示一个带有提示信息、确定和取消按钮以及文本输入框的对话框

open (url,name, options)

打开具有指定名称的新窗口，并加载给定 URL 所指定的文档

showModalDialog( )*

在一个模式窗口中显示指定的HTML文档

close ( )

关闭当前窗口（FF与IE规则不同）

setTimeout(func,delay)

设置定时器：经过指定毫秒值后执行某个函数

setInterval(func,delay)

设置循环定时器

clearTimeout(timer)/ clearInterval(timer)

清除定时器

 

 

　　1、定时器

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <script type="text/javascript">
    function doTimer () {
        setTimeout(callback,1000); 
    }
    var timer;
    function doInter () {
        timer=setInterval(callback,1000); 
    }
    function callback () {
        console.log("定时器工作了");
    }
    function doClear () {
        clearInterval(timer);
    }
    </script>
</head>
<body>
    <button type="button" onclick="doTimer()">延时定时器</button>
    <button type="button" onclick="doInter()">循环定时器</button>
    <button type="button" onclick="doClear()">清除</button>
</body>
</html>

　　2、用定时器来显示当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器2</title>
    <script type="text/javascript">

    onload=showTime;
    function showTime (argument) {
        var now=new Date();
        var str=now.toLocaleString();
        var sp=document.getElementsByClassName("sptime")[0].innerHTML=str;
        setTimeout(showTime,1000);
    }
    </script>
    <style type="text/css">
        .sptime{
            font-size: 2em;
            font-family: "Times New Roman";
            font-weight: bold;
            color:red;
        }
    </style>
</head>
<body>
    <!-- 在页面显示当前时间 -->
    <span class="sptime"></span>
</body>
</html>

　　3、window对象常用的时间

　　　　

名称

说明

onload

窗口加载后发生

onscroll

窗口滚动条滑动

onclick

窗口点击（仅FF）

onbeforeunload

窗口关闭前发生

oncontextmenu

弹出右键菜单时发生（仅FF）

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用window事件</title>
    <script type="text/javascript">
        onscroll=function(){
            console.log("scroll");//滑动滚动条时出现scroll
        };
        onclick=function () {
            console.log('window click!');//鼠标点击时出现window click！
        };
        //在右键菜单（上下文菜单）出现前触发，
        // 通过在回调函数中返回false可以撤销事件
        oncontextmenu=function () {
            // console.log('window contextmenu!');
            return false;//返回false就是禁止右键菜单
        }
    </script>
    
</head>
<body>
    <p>line1</p>
    <p>line2</p>
    <p>line3</p>
    <p>line4</p>
    <p>line5</p>
    <p>line6</p>
    <p>line7</p>
    <p>line8</p>
    <p>line9</p>
</body>
</html>

　　4、history对象

　　　　

名称

说明

back( )

加载 History 列表中的上一个 URL。

forward( )

加载 History 列表中的下一个 URL。

go("url" or number)

加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history</title>
    <script type="text/javascript">
    function doBack () {
        history.back();
        // 相当于history.go(-1);
        // 后退
    }
    function doForward () {
        history.forward();
        // 相当于history.go(1);
        // 前进
    }
    function doGoto () {
        history.go(-3);
        //后退3页
    }
    </script>    
</head>
<body>
    <button type="button" onclick="doBack()">后退</button>
    <button type="button" onclick="doForward()">前进</button>
    <button type="button" onclick="doGoto()">后退3页</button>
</body>
</html>

　　　　5、location对象

　　　　　　

方法名称

说明

assign("url")

加载 URL 指定的新的 HTML 文档。 

reload()

重新加载当前页

replace("url")

通过加载 URL 指定的文档来替换当前文档，不会出现后退

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location</title>
    <script type="text/javascript">
    console.log(location.href);
    function doTest () {
        location="http://www.baidu.com";
    }

    function doReload () {
        location.reload();
    }

    function doAssign () {
        location.assign("http://www.baidu.com");
    }

    function doReplace () {
        location.replace("http://www.baidu.com");
    }
    </script>    
</head>
<body>
    <button type="button" onclick="doTest()">转到百度</button>
    <button type="button" onclick="doReload()">刷新</button>
    <button type="button" onclick="doAssign()">assign</button>
    <button type="button" onclick="doReplace()">replace</button>

    <script type="text/javascript">
        document.write(new Date());
    </script>
</body>
</html>

　　6、定时器的深入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器深入</title>
    <script type="text/javascript">
    function doTimer () {
        
        setTimeout(showNum,1000,5);//把5传入num中
    }
    function showNum(num){
        console.log(num);
    }
    </script>
</head>
<body>
    <button type="button" onclick="doTimer()">定时器</button>
    
</body>
</html>

 

posted on 2017-04-12 14:01  XIN'BOLG  阅读(231)  评论(0)    收藏  举报