返回顶部

python 学习_第五模块 BOM

python 学习_第五模块 BOM

1.BOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM对象</title>
</head>
<body>
    <!-- 浏览器对象模型  BOM-->
    <!-- 
        1.window
            alert()
            confirm()
            prompt()

            setInterval()
            setTimeout()
        2.location
            href
            hash
            url
            ...
            reload()
        3.screen
        4.history
            go()
     -->
</body>
</html>

 

 

2. window 对象常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window 对象常用方法</title>
</head>
    <script type="text/javascript">
        window.alert("alert");  // 弹窗显示 alert

        var a = window.confirm("是否离开"); // 弹窗显示 
        console.log(a); // 接收a 的返回值   true   false

        var name = window.prompt('你早上吃什么？','aa');  //  不输入就是默认选项aa  
        console.log(name); // 接收 name 值


    </script>
<body>

</html>

 

 

3 定时器方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器方法 setTimeout()| setInterval()  </title>
</head>
    <script type="text/javascript">
        // 延迟操作
        window.setTimeout(function(){
                console.log('1122');
        },0)
        console.log('end');
        // 先输入 外面的内容 在输入函数的内容 

        // 定时操作 每一秒执行一次
        var num = 0;
        var timer = null;
        timer = setInterval(function(){
            num++;
            if (num >5) {
                clearInterval(timer); //清除 定时器
                return;
            }
            console.log('num:'+ num);
        },1000); 

    </script>
<body>
</html>

 

 

4 location对象

<!DOCTYPE html>
<html>
<head>
    <title>location 对象</title>
</head>
<body>
    <form>
        <input type="text" name="user">
        <input type="password" name="pwd">
        <input type="submit">
    </form>
    <script type="text/javascript">
        console.log(location.host);  　　// 127.0.0.1
        console.log(location.hostname); // 127.0.0.1
        console.log(location.href);    // http://127.0.0.1/11.html?user=yyyy&pwd=ppppp
        console.log(location.pathname); //     /11.html
        console.log(location.port);    // 
        console.log(location.protocol); // http:
        console.log(location.search);   // ?user=yyyy&pwd=ppppp
    </script>

</body>
</html>

 

 

5.如何访问每个查询字符串参数

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>如何访问每个查询字符串参数</title>
</head>
<body>
        <form>
                <input type="text" name="user">
                <input type="password" name="pwd">
                <input type="submit">
        </form>
        <script type="text/javascript">
                function getQueryString(){
                        // 1.取得去掉问号查询字符串 user=mjj&pwd=123 
                        var qs = location.search.length > 0 ?  location.search.slice(1): '';
                        // 2.取得每一项 存放到数组中
                        var items = qs.length ?  qs.split('&'): []; //["name=mjj", "pwd=123"]
                        var item = null,name = null,value = null,args = {};
                        for(var i = 0; i < items.length; i ++){
                                item = items[i].split('='); //['name%20','mjj']
                                name = decodeURIComponent(item[0]);
                                value = decodeURIComponent(item[1]);
                                if (name.length) {
                                        args[name]  = value;
                                }
                        }
                        return args;
                }
                var args  = getQueryString();
                console.log(args.user);
                console.log(args.pwd);

        </script>
</body>
</html>

 

 

6 位置操作

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title> 位置操作</title>
</head>
<body>
        <script type="text/javascript">
               setTimeout(function(){
                        location.href = 'https://www.baidu.com';    // 跳转到 百度       点击返回会 回到老页面
                        // location.replace('https://www.baidu.com');   // 新地址 替换老地址
                        // location.reload(); // 刷新
                },2000) 
        </script>
</body>
</html>

 

 

7 navigator对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>navigator对象</title>
</head>
<body>
    <script type="text/javascript">
        console.log(navigator.plugins);s
        function hasPlugin(name){
            // 如果有插件 返回true 反之亦然
            name = name.toLowerCase();
            for(var i = 0; i < navigator.plugins.length; i++){
                if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                    // 有此插件
                    return true;
                }else{
                    return false;
                }
            }
        }
        alert(hasPlugin('Flash'));
        alert(hasPlugin('Chrome PDF Plugin'));

    </script>
</body>
</html>

 

 

 

8 history对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
</head>
<body>
    <script type="text/javascript">
        console.log(history);
        var count = 0;
        setTimeout(function(){
            count++;
            console.log(count);
            history.go(-2);//刷新 -2  -1上一个页面，        1前进一个页面
        },2000)
    </script>
</body>
</html>

 

 

 

 

 

 

 

posted on 2019-08-01 16:59  augustyang  阅读(344)  评论(0)  编辑  收藏  举报

导航