4-1、open练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>4-1window属性之open练习</title>
  7.     <script type="text/javascript">
  9.         function openFun() {
  10.             window.open("3-1document练习.html" , "新打开的" , "height=380, width=320, toolbar=0, scrollbars=0");
  11.         }
  13.     </script>
  14. </head>
  15. <body onload="openFun()">
  16.     <h1>欢迎进去</h1>
  17. </body>
  18. </html>

4-2、close练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>4-2window属性之close练习</title>
  8.     <script type="text/javascript">
  10.         var myWin;
  12.         //打开页面
  13.         function openFun() {
  14.             myWin =window.open("3-1document练习.html" , "新打开的" , "height=380, width=320, toolbar=0, scrollbars=0");
  15.         }
  17.         //关闭当前页面
  18.         function thisIndex(){
  19.             myWin = window.open('','_self');
  20.             myWin.self.close();
  21.         }
  23.         //关闭新打开的页面
  24.         function newOpenIndex(){
  25.             myWin.close();
  26.         }
  27.     </script>
  28. </head>
  29. <body onload="openFun()">
  31.     <h1>欢迎进去</h1>
  33.     <button onclick="thisIndex()">关闭当前</button>
  34.     <button onclick="newOpenIndex()">关闭新打开的页面</button>
  37. </body>
  38. </html>

4-3、setTimeout练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-3window属性之setTimeout()练习</title>

    <script type="text/javascript">

        function setTimeFn() {
            window.open("3-1document练习.html" , "新打开的" , "height=380, width=320, toolbar=0, scrollbars=0");
        }


    </script>
</head>
<!-- 要点看setTimeout-->
<body onload="javascript:setTimeout('setTimeFn()', 3000)">
<h1>欢迎进去</h1>
</body>
</html>

4-4、setInterval练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-4window属性之setInterval练习</title>

    <script type="text/javascript">

        function setTimeFn() {
            window.open("3-1document练习.html" , "新打开的" , "height=380, width=320, toolbar=0, scrollbars=0");
        }


    </script>
</head>
<!-- 要点看setTimeout-->
<body onload="javascript:setInterval('setTimeFn()', 2000)">
<h1>欢迎进去</h1>
</body>
</html>

4-5window属性之clearInterval练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-5window属性之clearInterval练习</title>

    <script type="text/javascript">

        //开始记录
        var i = 0;
        var timeout1; //取消记录使用

        function add() {
            document.getElementById("p1").innerHTML = "记录数字：" + (i++);
        }

        function getSetInterval() {
            timeout1 = setInterval(add,1000);
        }

        //取消记录
        function clearSetInterval() {
            alert("执行：" + timeout1);
            clearInterval(timeout1);
        }

    </script>
</head>
<body>

    <p id="p1">记录数字：</p>

    <button onclick="getSetInterval()">开始记录</button>
    <button onclick="clearSetInterval()">记录取消</button>


</body>
</html>

4-6window属性之clearInterval练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-6window属性之clearInterval练习</title>

    <script type="text/javascript">

        //开始记录
        var i = 0;
        var timeout1; //取消记录使用

        function add() {
            document.getElementById("p1").innerHTML = "记录数字：" + (i++);
        }

        function getSetTimeout() {
            timeout1 = setTimeout(add,1000);
        }

        //取消记录
        function clearSetTimeout() {
            alert("执行：" + timeout1);
            clearTimeout(timeout1);
        }

    </script>
</head>
<body>

<p id="p1">记录数字：</p>

<button onclick="getSetTimeout()">开始记录</button>
<button onclick="clearSetTimeout()">记录取消</button>


</body>
</html>

4-7window属性之倒计时练习(匿名函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时练习</title>

    <script type="text/javascript">


        //开始
        var i = 10; //设置倒计时的数
        var timeOut; //接收表达式的值

        function reduce() {

            //如果i==0; 就结束 

            i == 0 ? stopSetInterval() : document.getElementById("p1").innerHTML = i--;
        }

        //调用定时函数setInterval，每1秒执行一次
        function carryReduce() {
            //使用匿名函数
            timeOut = setInterval(function () {
                reduce();
            },1000);
        }

        //停止
        function stopSetInterval() {
            clearInterval(timeOut);
        }

    </script>
</head>
<body>

    <button onclick="carryReduce()">开始</button>
    <button onclick="stopSetInterval()">停止</button>
    <p id="p1"></p>

</body>
</html>