zoukankan      html  css  js  c++  java
  • 09 BOM浏览器对象模型

    BOM浏览器对象模型

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta http-equiv="X-U-Compatible" content="IE-edge">
      6     <meta name="viewport" content="width=device-width,initial-scale=1">
      7     <title>BOM浏览器对象模型</title>
      8 </head>
      9 <body>
     10     <h1>BOM浏览器对象模型</h1>
     11     <script type="text/javascript">
     12         // 1.window
     13             /*
     14             // 系统对话框alert confirm prompt
     15             window.alert(12345);
     16             var res = window.confirm("are you sure?");
     17             console.log(res);
     18             var str = window.prompt("吃了没","shit?");  // 接收用户输入的值
     19             console.log(str);
     20 
     21             // 延时操作setTimeout(fun,time)
     22             window.setTimeout(function () {
     23                 console.log(1234)
     24             },2000);
     25 
     26             // 每多少秒执行一次setInterval(fun,time)
     27              window.setInterval(function () { console.log(1) },1000);
     28 
     29             var num = 0;
     30             var timer = null;
     31             timer = setInterval(function () {
     32                 num += 1;
     33                 if(num > 3){
     34                     clearInterval(timer);  //清除定时器
     35                     return;  //   结束函数运行
     36                 }
     37                 console.log("num:"+num);
     38             },1000);
     39 
     40             //  open   close
     41             window.open(url="https://www.baidu.com",target="_blank"); // target 新窗口的位置, _blank  _self _parent
     42             window.close();
     43             */
     44         // 2.location
     45             /*
     46             console.log(location.host);
     47             console.log(location.hostname);
     48             console.log(location.port);
     49             console.log(location.href);
     50             console.log(location.pathname);
     51             console.log(location.protocol);
     52             console.log(location.search);
     53             setTimeout(function () {
     54                 location.href = "https://www.baidu.com";  // 会有历史记录
     55                 // location.replace("https://www.baidu.com");// 不会有历史记录
     56                 // location.reload(); // 重新加载网页
     57             },2000)
     58             */
     59 
     60         // 3.window.navigator 的一些属性可以获取客户端的一些信息
     61             /*
     62             console.log(navigator);
     63             console.log(navigator.plugins);
     64             function hasPlugin(name) {
     65                 name = name.toLowerCase();
     66                 for(var i = 0; i < navigator.plugins.length; i ++){
     67                     var pluginsName = navigator.plugins[i].name.toLowerCase()
     68                     if(pluginsName.indexOf(name) != -1){
     69                         console.log(name);
     70                         console.log(pluginsName);
     71                         return "有插件!"
     72                     }
     73                 }
     74                 return "没有插件!"
     75             }
     76             alert(hasPlugin("flash"))
     77             */
     78 
     79         // 4.history
     80             /*
     81                 console.log(history);
     82                 history.go(0);  // 刷新页面
     83                 history.go(-1);  // 后退页面
     84                 history.go(1);  // 前进页面
     85                 history.back();  // 前进页面
     86             */
     87 
     88         // 5.HTML5 存储技术 localStorage sessionStorage
     89             <!--sessionStorage(临时存储)  为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载。关闭浏览器后清除。-->
     90             <!--localStorage(长期存储)  与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在。-->
     91             <!--存储和提取数据时,需要json格式化和解析-->
     92             var person = {
     93                 name:"xiaogang",
     94                 age:18
     95             };
     96             sessionStorage.setItem("personStorage",JSON.stringify(person));
     97             var getPerson = JSON.parse(sessionStorage.getItem("personStorage"));
     98             console.log(getPerson);
     99             //监听本地存储的变化  Storage 发生变化(增加、更新、删除)时的 触发,同一个页面发生的改变不会触发,只会监听同一域名下其他页面改变 Storage
    100             window.addEventListener('personStorage', function (e) {
    101                 console.log('key', e.key);
    102                 console.log('oldValue', e.oldValue);
    103                 console.log('newValue', e.newValue);
    104                 console.log('url', e.url);
    105             });
    106             sessionStorage.removeItem("personStorage");  // 删除指定的数据
    107             sessionStorage.clear(); // 删除所有的数据
    108     </script>
    109 </body>
    110 </html>
  • 相关阅读:
    浙大数据结构课后习题 练习二 7-2 Reversing Linked List (25 分)
    浙大数据结构课后习题 练习二 7-2 一元多项式的乘法与加法运算 (20 分)
    浙大数据结构课后习题 练习一 7-1 Maximum Subsequence Sum (25 分)
    浙大数据结构课后习题 练习一 7-1 最大子列和问题 (20 分)
    PAT Basic 1019 数字黑洞 (20 分)
    PAT Basic 1017 A除以B (20 分)
    PAT Basic 1013 数素数 (20 分)
    PAT Basic 1007 素数对猜想 (20 分)
    PAT Basic 1003 我要通过! (20 分)
    自动化运维——HelloWorld(一)
  • 原文地址:https://www.cnblogs.com/znyyy/p/11095910.html
Copyright © 2011-2022 走看看