小强的HTML5移动开发之路(32)—— JavaScript回顾7

黄舟
发布: 2017-02-04 14:35:31
原创
1186 人浏览过

BOM模型brower object model(浏览器对象模型),通过浏览器内置的一些对象可以操作浏览器本身。
DOM是用来操作页面的,BOM是用来操作浏览器本身的。

BOM是没有规范的,但是大部分浏览器都支持如下几个对象

1、Window对象:表示整个窗口

(1)open方法:(名字,特性,高度宽度,工具栏,滚动条)

(2)setTimeout方法:setTimeout(fn, 毫秒);    //第一个参数必须是一个函数名(不能加括号)

<html>  
    <head>  
        <script>  
            function f1(){  
            //win指向了新打开的窗口   
                    var win = window.open(&#39;day05_03&#39;,&#39;wi_1&#39;,  
                    &#39;width=400,height=400&#39;);  
                    setTimeout(function(){  
                    win.close();  
                }, 5000);         
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me" onclick="f1();"/>  
    </body>  
</html>
登录后复制

(3)setInterval方法


var taskId = setInterval(fn, 毫秒); //在指定的时间间隔后执行某个函数

(4)clearInterval方法

clearInterval(taskId); //取消setInterval的任务

<html>  
    <head>  
        <style>  
            #d1{  
                width:80px;  
                height:80px;  
                background-color:blue;  
                position:relative;  
            }  
        </style>  
        <script src="myjs.js"></script>  
        <script>  
            function f2(){  
                var v1 = parseInt($(&#39;d1&#39;).style.left);  
                $(&#39;d1&#39;).style.left = v1 + 50 + &#39;px&#39;;  
            }  
            function f1(){  
                var taskId = setInterval(f2, 500);  
                setTimeout(function(){  
                    clearInterval(taskId);  
                },5000)  
            }  
        </script>  
    </head>  
    <body>  
        <div id="d1" style="left:10px;"></div>  
        <input type="button" value="click me"  
        onclick="f1();"/>  
    </body>  
</html>
登录后复制

(5)alert()方法 弹出一个警告对话框


(6)confirm()方法

var flag = confirm(string); //string为提示信息、flag是返回true或false

(7)prompt方法

var info = prompt(string)

<html>  
    <head>  
        <script>  
            function f3(){  
                var flag = confirm(&#39;你喜欢钱吗?&#39;);  
                alert(flag);  
            }  
            function f4(){  
                var info = prompt(&#39;请输入手机号&#39;);  
                alert(&#39;你输入的手机号是:&#39; + info);  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me"  
        onclick="f4();"/>  
    </body>  
</html>
登录后复制

2、Document对象:代表整个文档的根


getElementById(id);
createElement(tagName);

write(string); 在指定的位置输出相关信息

<html>  
    <!-- document对象 -->  
    <head></head>  
    <body style="font-size:30px;">  
        开始输出helloword<br/>  
        <script>  
            for(i=0; i<100; i++){  
                document.write(&#39;hello world<br/>&#39;);  
            }  
        </script>  
    </body>  
</html>
登录后复制

3,Location对象:封装了浏览器地址栏的相关信息
href属性:指定要加载的页面
reload方法:重新加载当前页面,相当于刷新

<html>  
    <!-- location对象 -->  
    <head></head>  
    <body>  
        <input type="button"   
        value="跳转到另外一个页面" onclick="location.href = &#39;day05_04.html&#39;;"/><br/>  
        <input type="button"  
        value="刷新当前页面" onclick="location.reload();"/>  
    </body>  
</html>
登录后复制

4,History对象:封装了浏览器已经访问过的页面的相关信息
back():后退
forward():前进
go(参数):正数前进,负数后退

<html>  
    <!-- history对象    -->  
    <head></head>  
    <body>  
        <input type="button"  
        value="点这里后退" onclick="history.back();"/>  
        <input type="button"  
        value="点这里前进" onclick="history.forward();"/>  
        <input type="button"  
        value="点这儿后退"  onclick="history.go(-1);"/>  
    </body>  
</html>
登录后复制

5,Navigator对象:封装了浏览器的相关信息,(比如:类型,版本)

<html>  
    <!--navigator对象-->  
    <head></head>  
    <body>  
        现在访问的浏览器的相关信息如下:<br/>  
        <script>  
        var info;  
        //for in循环:主要用于遍历对象   
            for(propName in navigator){  //propName是任意变量  
        // 将navigator对象的属性名保存到propName变量里  
                info += propName + &#39;;&#39; +navigator[propName] + &#39;<br/>&#39;;  
            }  
            document.write(info);  //在当前页面输出  
        </script>  
    </body>  
</html>
登录后复制
<html>  
    <!--检测浏览器类型-->  
    <head>  
        <script>  
            function f1(){  
                if((navigator.userAgent).indexOf(&#39;Firefox&#39;)>0){  
                    alert("当前浏览器是Firefox");  
                }else if(navigator.userAgent.indexOf(&#39;MSIE&#39;)>0){  
                    alert("当前浏览器是IE");  
                }else{  
                    alert("其他浏览器");  
                }  
            }     
        </script>  
    </head>  
    <body>  
        <input type="button"  
        value="获得当前浏览器的类型" onclick="f1();"/>  
    </body>  
</html>
登录后复制

6,Screen对象:浏览器所在的屏幕的相关信息

<html>  
    <head>  
        <script>  
            function f2(){  
                alert(screen.width + &#39; &#39; +  
                screen.height);  
            }     
        </script>  
    </head>  
    <body>  
        <input type="button"  
        value="获得screen相关信息" onclick="f2();"/>  
    </body>  
</html>
登录后复制


以上就是 小强的HTML5移动开发之路(32)—— JavaScript回顾7的内容,更多相关内容请关注PHP中文网(www.php.cn)!


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板