BOM timer, onresize

timer

<body>
<button onclick="stop()">吃药</button>
<button onclick="goon()">继续</button>
<button onclick= " stopBoom() " >defuse the bomb</button>
<script type= " text/javascript " >
     // Timer
     // Intermittent timer: called every fixed time.
    // setInterval()
     // Function: Create an intermittent timer
     // Parameters: parameter 1 function name or anonymous function parameter 2 time
     // Return value: the id of the timer. The timer can be stopped according to the id
     // var timer = setInterval(function name/anonymous function, time (milliseconds))

    // clearInterval(id)
     // Stop the specified timer

    var timer = setInterval (fun, 2000 );
    function fun(){
        console.log( " Sick! " );
    }

    function stop(){
        clearInterval( timer );
    }

    function goon(){
        // Assign the id of the returned timer to the global variable of 
        timer timer = setInterval(fun, 2000 );
    }

    // Only the timer is created in js, and the timer is stopped. No continue timer.

    // Delay timer: execute after a fixed time. (Similar to a time bomb)
     // setTimeout(function name/anonymous function, time)
     // Function: Create a delay timer.
    // parameter: parameter 1 function name or anonymous function parameter 2 time
     // return value: the id of the timer. The timer can be stopped according to the id


    // clearTimout(id)
     // Function: stop the delay timer 
    var timer2 = setTimeout(fun2, 5000 );
    function fun2(){
        console.log( " Explode! " );
    }

    function stopBoom () {
        clearTimeout( timer2 );
    }


</script>
</body>

onresize: The property can be used to get or set the event handler for the current window's resize event

<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 when zooming onresize 
    window.onresize = function(){
        console.log( " I want to change " );
         // Get the width of the visible window 
        console.log( document.documentElement.clientWidth );
        console.log( document.body.clientWidth );
        console.log( window.innerWidth );

        var w = document.documentElement.clientWidth||document.body.clientWidth|| window.innerWidth;
         // Get the height of the visible window 
        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>

onresize: The property can be used to get or set the event handler for the current window's resize event

Guess you like