js第6章BOM案例：打开和关闭窗口、窗口位置和大小、计数器、更改URL、

2021/12/5 23:47:10

编程Tag： js function var style url 窗口 document myWindow

本文主要是介绍js第6章BOM案例：打开和关闭窗口、窗口位置和大小、计数器、更改URL、，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.打开和关闭窗口

<body>
    <p><input type="button" value="打开窗口" onclick="openWin()"></p>
    <p><input type="button" value="关闭窗口" onclick="closeWin()"></p>
    <p><input type="button" value="检测窗口是否关闭" onclick="checkWin()"></p>
    <p id="msg"></p>
    <script>
      var myWindow;
      function openWin() {
        myWindow = window.open('', 'newWin', 'width=400,height=200,left=200');
        myWindow.document.write('<p>窗口名称为：' + myWindow.name + '</p>');
        myWindow.document.write('<p>当前窗口的父窗口地址：' + window.parent.location + '</p>');
      }
      function closeWin() {
        myWindow.close();
      }
      function checkWin() {
        if (myWindow) {
          var str = myWindow.closed ? '窗口已关闭！' : '窗口未关闭！';
        } else {
          var str = '窗口没有被打开!';
        }
        document.getElementById('msg').innerHTML = str;
      }
   </script>
</body>

运行效果：

2.窗口位置和大小

<body>
    <input type="button" value="打开窗口" onclick="openWin()">
    <input type="button" value="调整窗口位置和大小" onclick="changeWin()">
    <script>
      var myWindow;
      function openWin() {
        myWindow = window.open('', 'newWin', 'width=250,height=300');
        getPosSize();                   // 获取窗口信息
      }
      function changeWin() {
        myWindow.moveBy(250, 250);      // 将newWin窗口下移250像素，右移250像素
        myWindow.focus();               // 获取移动后newWin窗口的焦点
        myWindow.resizeTo(500, 350);    // 修改newWin窗口的宽度为500，高度为350
        getPosSize();                   // 获取窗口信息
      }
      function getPosSize() {
        // 获取相对于屏幕窗口的坐标
        var x = myWindow.screenLeft, y = myWindow.screenTop;
        // 获取窗口和文档的高度和宽度
        var inH = myWindow.innerHeight, inW = myWindow.innerWidth;
        var outH = myWindow.outerHeight, outW = myWindow.outerWidth;
        myWindow.document.write('<p>相对屏幕窗口的坐标：(' + x + ',' + y + ')</p>');
        myWindow.document.write('<p>文档的高度和宽度：' + inH + ',' + inW + '</p>');
        myWindow.document.write('<p>窗口的高度和宽度：' + outH + ',' + outW + '</p><hr>');
      }
   </script>
</body>

运行效果：

3.计数器

<body>
    <input type="button" value="开始计数" onclick="startCount()">
    <input id="num" type="text">
    <input type="button" value="停止计数" onclick="stopCount()">
    <script>
      var timer = null, c = 0;
      function timedCount() {       // 在文本框中显示数据
        document.getElementById('num').value = c;
        ++c;                        // 显示数据加1
      }
      function startCount() {       // 开始间歇调用
        timer = setInterval(timedCount, 1000);
      }
      function stopCount() {        // 清除间歇调用
        clearInterval(timer);
      }
    </script>
</body>

运行效果：

4.更改URL

<body>
    <input type="button" value="载入新文档" onclick="newPage()">
    <input type="button" value="刷新页面" onclick="freshPage()">
    <p id="time"></p>
    <script>
      // 获取并显示当前页面载入的时间
      var ds = new Date(), d = ds.getDate();
      var t = ds.toLocaleTimeString();
      document.getElementById('time').innerHTML = t;
      // 载入新文档
      function newPage() {
        window.location.assign('http://www.example.com')
      }
      // 刷新文档
      function freshPage() {
        location.reload(true);
      }
    </script>
</body>

运行效果：

5.历史记录跳转

<body>
    <input type="button" value="前进" onclick="goForward()">
    <input type="button" value="新网页" onclick="newPage()">
    <script>
      function newPage() {      // 打开一个新的文档
        window.location.assign('show.html');
      }
      function goForward() {    // 前进
        history.go(1);
      }
    </script>
</body>

show.html

<body>
    <input type="button" value="后退" onclick="goBack()">
    <script>
      function goBack() {
        history.go(-1);
      }
    </script>
</body>

运行效果：

6.红绿灯倒计时。现实生活中,为保证行人和车辆安全有序地通行,交叉路口都会设置交通信号灯。横向三色交通信号灯的亮灯顺序一般为“绿→黄→红→绿”依次循环。其中,亮灯时长需根据路口的实际情况等因素来考虑设置。例如,将某一个十字路口的交通信号灯每分钟红灯亮设置为30秒,绿灯亮设置为35秒,黄灯亮设置为5秒。

<style>
      .box{width:250px;height:52px;padding:15px 30px;border:2px solid #ccc;border-radius:16px;margin:0 auto;}
      .box .count{width:60px;color:#666;font-size:280%;line-height:50px;padding-left:6px;margin-left:5px;border:1px solid #fff}
      .box div{margin-left:5px;float:left;width:50px;height:50px;border-radius:50px;border:1px solid #666;}
      .gray{background-color:#eee;}
      .red{background-color:red;}
      .yellow{background-color:yellow;}
      .green{background-color:#26ff00;}
</style>

<body>
    <div class="box">
      <div id="red"></div>
      <div id="yellow"></div>
      <div id="green"></div>
      <div class="count" id="count"></div>
    </div>
    <script>
      // 获取红、黄、绿灯以及倒计时的元素对象
      var lamp = {
        red: {
          obj: document.getElementById('red'),
          timeout: 30,
          style: ['red', 'gray', 'gray'],
          next: 'green'
        },
        yellow: {
          obj: document.getElementById('yellow'),
          timeout: 5,
          style: ['gray', 'yellow', 'gray'],
          next: 'red'
        },
        green: {
          obj: document.getElementById('green'),
          timeout: 35,
          style: ['gray', 'gray', 'green'],
          next: 'yellow'
        },
        changeStyle(style) {
          this.red.obj.className = style[0];
          this.yellow.obj.className = style[1];
          this.green.obj.className = style[2];
        }
      };
      var count = {
        obj: document.getElementById('count'),
        change: function(num) {
          this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
        }
      };
      var now = lamp.green;
      var timeout = now.timeout;
      lamp.changeStyle(now.style);
      count.change(timeout);
      setInterval(function() {
        if (--timeout <= 0) {
          now = lamp[now.next];
          timeout = now.timeout;
          lamp.changeStyle(now.style);
        }
        count.change(timeout);
      }, 1000);
    </script>
</body>

运行效果：

这篇关于js第6章BOM案例：打开和关闭窗口、窗口位置和大小、计数器、更改URL、的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js第6章BOM案例：打开和关闭窗口、窗口位置和大小、计数器、更改URL、

相关编程文章