BOM_对象

南枫知我意～

已于 2023-10-02 14:03:24 修改

阅读量27

点赞数 1

文章标签： javascript 开发语言前端

于 2023-09-19 10:49:48 首次发布

本文链接：https://blog.csdn.net/LOVEcao_YU/article/details/132982510

版权

#window对象的使用#

一、定时器

两种定时器：

周期定时器

var id = window.setInterval(function,time);

每隔指定时间执行某函数。time就是间隔时间，单位是毫秒，function就是要执行的函数。

清除周期定时器：window.clearInterval(id);

超时定时器（只运行一次）

var id = window.setTimeout(function,time);

指定时间后，执行某函数。time就是指定的时间，单位是毫秒，function就是要执行的函数。

清除超时定时器：window.clearTimeout(id);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
    <div id="time"></div>
    <input type="button" value="暂停" onclick="stop()">
    <input type="button" value="继续" onclick="start()">

    <img src="img/8.jpg" width="800" style="display: none" id="img">
    <!--style="display: none" 图片不显示-->
    
    <script>
        //周期定时器
        function getTime(){
            var t=new Date();
            var time=t.toLocaleString();//转换格式
            var demo=document.getElementById("time");
            demo.innerText=time;//传值到页面
        }
        getTime();
        var id=window.setInterval(getTime,1000);//1秒

        function stop(){
            window.clearInterval(id);//清除定时器
        }
        function start(){
            id=window.setInterval(getTime,1000);//获取定时器
        }
    </script>

    <script>
        //超时定时器
        function img(){
            document.getElementById("img").style.display="inline-block";//style.display="inline-block"显示图片
        }
        var id=window.setTimeout(img,2000);//2秒后调用函数img();
        //clearTimeout(id);//清除超时定时器
    </script>
</body>
</html>

二、弹框

警告框
确认框
提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹框</title>
</head>
<body>
    <script>
        window.alert("警告框！");
    </script>

    <script>
        var res=window.confirm("确认框！是否");//确认为true或取消为false
        console.log(res);//控制台查看
    </script>

    <script>
        var res=window.prompt("提示框！请输入号码","123");//取消返回NULL；删除值确认返回空串
        console.log(res);//控制台查看
    </script>
</body>
</html>

三、其他对象

1.location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location</title>
</head>
<body>
    <script>
        console.log(location.href);//查询地址
        //location.href="http://www.taobao.com";//地址赋值
    </script>
</body>
</html>

2.history对象（要有可前进和可后退的页面，才能前进后退）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hitory</title>
</head>
<body>
    <input type="button" value="后退" onclick="b()">
    <input type="button" value="前进" onclick="f()">

    <script>
        function b(){
            history.back();//后退
        }
        function f(){
            history.forward();//前进
        }
    </script>
</body>
</html>

四、全选及反选

1.复选框全部选中，全选自动生效；反之失效。

2.点击全选框，全部选中；反之全部取消。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
</head>
<body>
    <input type="checkbox" onclick="checkAll()" id="all">全选<br>
    <input type="checkbox" name="ball" onclick="checkOn()">篮球<br>
    <input type="checkbox" name="ball" onclick="checkOn()">足球<br>
    <input type="checkbox" name="ball" onclick="checkOn()">排球<br>
    <input type="checkbox" name="ball" onclick="checkOn()">羽毛球<br>

    <script>
        function checkAll(){
            //获取全选框的checked属性的值
            var res=document.getElementById("all").checked;
            var balls=document.getElementsByName("ball");
            for(var i=0;i<balls.length;i++){
                balls[i].checked=res;
            }
        }

        //全部选中，全选自动生效
        //全选状态下，有一个取消，则全选自动失效
        function checkOn(){
            var balls=document.getElementsByName("ball");
            var flag=true;
            for(var i=0;i<balls.length;i++){
                if(!balls[i].checked){
                    flag=false;
                    // break;
                }
            }
            document.getElementById("all").checked=flag;
        }
    </script>
</body>
</html>

#学无止境#