JavaScript -- 浏览器对象小结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器对象</title>
</head>
<body onload="myWin()">

    <button id = "btn" onclick="btnClicked()">按钮</button>

    <button id = "btnStopTime" onclick="stopTime()">停止计时</button>

    <!--<button id = "btn1" onclick="myWin()">开始延时</button>-->
    <button id = "btn2" onclick="stopWin()">停止延时</button>

    <button id="btn3" onclick="getLoc()">测试location</button>
    <p id = "ptime"></p>

    <script>

        //-------------------------window对象---------------------------//
        // 获得当前窗口的尺寸
//        window.document.write("宽度"+window.innerWidth+"高度"+window.innerHeight);

//        function btnClicked() {
            // 打开一个新窗口,并设置新窗口的属性
        // 创建一个新的HTML5文件,名为"obindex"
//            window.open("obindex.html","windowName","height = 200,width = 200,top = 100,left = 100,toolbar = no,menubar = no");
//            window.open("www.baidu.com");  不能使用
            // 关闭一个窗口
//          window.close();
//        }
/*
 // ---------------------------计时器------------------------------//
        // 添加计时器
        var myTime = setInterval(function(){
                getTime();
            },1000); //单位是毫秒

        function getTime(){
            var d = new Date();
            var a = d.toLocaleTimeString(); // 转换为字符串
            document.getElementById("ptime").innerHTML = a;
        }

        // 停止计时器
        function stopTime(){
            document.getElementById("btnBeginTime");
            clearInterval(myTime);
        }
*/

/*
        // 延时执行
        var win;
        function myWin(){
            // 第一种:弹出一次
//            win = setTimeout(function(){alert("hello")},3000);

            // 第二种:反复弹出
            alert("hello");
            win = setTimeout(function(){myWin()},3000);

        }
        // 停止延时
        // 先把延时程序在 body中 onload,让它一打开界面就出现,然后点击后停止
        function stopWin(){
            clearTimeout(win);
        }
*/
        // -----------------History对象--------------------//
        // window.histoty对象包含浏览器的历史(url)的集合

        // 方法:
//            history.back()  - 与在浏览器点击后退按钮相同
//            history.forward() - 与浏览器中向前作用相同
//            history.go() - 进入历史中的某个界面
/*
使用范例：
<form>

        <input type="text" id="userName">

    </form>
    <button id="btn" onclick="safe()">按钮</button>
    <script>
        function safe(){
            var name = document.getElementById("userName").value;
            if (name == "hello"){
                history.go(-1)
            }else {
                alert("输入错误");
            }
        }
    </script>



*/

        // -----------------Location对象--------------------//

        // window.location 对象用于获得当前页面的地址(url),并把浏览器重定向到新的界面
        /*
        location.hostname - 返回web主机的域名
        location.pathname - 返回当前页面的路径和文件名
        location.port - 返回web主机的端口
        location.protocol - 返回所使用的web协议(http://或https://)
        location.href - 返回当前页面的url
        location.assign - 方法加载新的文档
        */
        function getLoc(){
            // 点击按钮,将本界面的url显示出来(其他的方法使用方式一样,就不列举了)
//            document.getElementById("ptime").innerHTML = window.location.href;

            // 点击按钮后会跳转到新的界面,和<a>效果类似
            location.assign("http://www.baidu.com");
        }

        // -----------------Screen对象--------------------//
        // 包含有关用户的信息

        document.write("可用高度"+screen.availHeight+",可用宽度:"+screen.availWidth+"<br>");
        document.write("高度:"+screen.height+",宽度:"+screen.width);





    </script>


</body>
</html>
JavaScript -- 浏览器对象小结

猜你喜欢
