BOM定时器，onresize

Posted 2020-11-01 晓瑞1116

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BOM定时器，onresize相关的知识，希望对你有一定的参考价值。

定时器

<body>
<button onclick="stop()">吃药</button>
<button onclick="goon()">继续</button>
<button onclick="stopBoom()">拆除炸弹</button>
<script type="text/javascript">
    //定时器
    // 间歇定时器：每隔固定的时间调用一次。
    // setInterval()
    // 功能：创建一个间歇定时器
    // 参数：参数1 函数名或者匿名函数  参数2时间
    // 返回值：定时器的id. 可以根据该id停止定时器
    // var timer =    setInterval(函数名/匿名函数,时间(毫秒))

    //clearInterval(id)
    // 停止指定的定时器

    var timer = setInterval(fun,2000);
    function fun(){
        console.log("犯病！");
    }

    function stop(){
        clearInterval( timer );
    }

    function goon(){
        //将返回的定时器的id赋值给timer这个全局变量
        timer = setInterval(fun,2000);
    }

    //js中只有创建定时器，停止定时器。没有继续定时器。

    // 延时定时器：过固定的时间执行。（类似定时炸弹）
    //setTimeout(函数名/匿名函数,时间)
    // 功能：创建一个延时定时器。
    // 参数：参数1 函数名或者匿名函数  参数2时间
    // 返回值：定时器的id. 可以根据该id停止定时器


    //clearTimout(id)
    // 功能：停止延迟定时器
    var timer2 = setTimeout(fun2,5000);
    function fun2(){
        console.log("爆炸！");
    }

    function stopBoom(){
        clearTimeout( timer2 );
    }


</script>
</body>

onresize：属性可以用来获取或设置当前窗口的resize事件的事件处理函数

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            left: 200px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
    //缩放的时候 resize onresize
    window.onresize = function(){
        console.log("我要变了");
        //获取可视窗口的宽
        console.log( document.documentElement.clientWidth );
        console.log( document.body.clientWidth );
        console.log( window.innerWidth );

        var w = document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth;
        //获取可视窗口的高度
        console.log( document.documentElement.clientHeight );
        console.log( document.body.clientHeight );
        console.log( window.innerHeight );

        var h = document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
    }

</script>

以上是关于BOM定时器，onresize的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript中BOM简介及其对象js执行机制