lnlidawei

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
javascript：DOM/BOM练习

javascript：DOM/BOM练习

 

 

 

 

一、BOM/DOM练习内容

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8"> 
  5 <title>菜鸟教程(runoob.com)</title> 
  6 <style>
  7     .st{
  8         color:blue;
  9         font-size: 2rem;
 10     }
 11 </style>
 12 </head>
 13 
 14 <body>
 15     <button id="bt1" onclick="jump()">跳转</button>
 16     <button id="bt2" onclick="front()">out2</button>
 17     <button id="bt3" onclick="localstorage()">out3</button>
 18     <div>
 19         <p>显示输入内容：<span id="out1" class="st"></span></p> 
 20         <p>out2：<span id="out2" class="st"></span></p> 
 21         <p>out3：<span id="out3" class="st"></span></p> 
 22     </div>
 23 
 24 </body>
 25 
 26 <script>
 27 
 28 
 29     // 跳转：向前
 30     function front()
 31     {
 32         // window.history.forward();
 33         window.history.go(1);
 34     }
 35     
 36     
 37     // 跳转：向后
 38     function back()
 39     {
 40         window.history.back();
 41     }
 42     
 43     
 44     // 乱七八糟的内容
 45     function jump()
 46     {
 47     
 48         // 确认按钮
 49         // var x = window.confirm("push button");
 50         if(1==1){
 51         
 52              // window.alert("press button");
 53              
 54              // 输入提示框
 55              var msg1 = window.prompt("输入你的名字", "null");
 56              
 57              // 编码：base64
 58              var msg2 = window.btoa(msg1);
 59              // 解码：base64
 60              var msg3 = window.atob(msg2);
 61              
 62             var hostname = window.location.hostname;
 63             // window.location.assign("https://www.runoob.com")
 64             var url = window.location.assign("http://www.baidu.com");
 65              getElementById("out1").innerHTML=msg1;
 66             // getElementById("out2").innerHTML=msg2;
 67             getElementById("out2").innerHTML=hostname;
 68             // getElementById("out3").innerHTML=msg3;
 69             getElementById("out3").innerHTML=url;
 70                 
 71         }else
 72         {
 73             window.alert("not press button");
 74         }
 75     }
 76     
 77     
 78     // window.localstorage, window.sessionStorage, 在本地存储数据。
 79     function localstorage()
 80     {
 81         var ls = window.localStorage;
 82         var len = ls.length;
 83         getElementById("out2").innerHTML=len;
 84         var ct="";
 85         var count = 1;
 86         for( x in ls){
 87             ct = count + " || " + ct +"<br/>"+ ls[x];
 88             count = count + 1;
 89         }
 90         getElementById("out3").innerHTML=ct;
 91     }
 92     
 93     
 94     // 封装，封装常用的代码块，写程序变得简洁。 这个思路挺有意思的，值得借鉴下。
 95     function getElementById(eid)
 96     {
 97         // var tmp = document.getElementById(eid);
 98         return document.getElementById(eid);
 99     }
100 </script>
101 </html>

 

 

 

 

二、参考资料：

 

　　1、bom -- window 对象：　　https://www.runoob.com/jsref/obj-window.html

 

posted on 2023-02-08 03:44  lnlidawei  阅读(79)  评论(0)    收藏  举报