JavaScript之了解BOM实用功能

小灰灰 2021-05-03 05:47 472阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>bom</title>
        <script type="text/javascript">
          window.onload=function(){ 
              document.getElementById("btn1").onclick=function(){ 
                 window.alert("警告框");
              };
    
              document.getElementById("btn2").onclick=function(){ 
                 var l=window.confirm("确认按钮和取消按钮的对话框");//返回truez或者false
                 console.log(l);
              };
    
              document.getElementById("btn3").onclick=function(){ 
                var l= window.prompt("显示可提示用户输入的对话框");//返回输入的内容
                console.log(l);
              };
              var mytimer;
              document.getElementById("btn4").onclick=function(){ 
                  //定时器
                mytimer=window.setInterval(function(){ 
                    document.getElementById("mytime").innerHTML=new Date().toLocaleString();
                },1000);
              };
    
              document.getElementById("btn5").onclick=function(){ 
                window.clearInterval(mytimer);
            };
    
            document.getElementById("btn6").onclick=function(){ 
               //延时器
                window.setTimeout(function(){ 
                    window.alert("你好");
                },3000);
            };
    
            document.getElementById("btn7").onclick=function(){ 
                window.open("事件.html","事件","width=500,height=600");
            };
    
            document.getElementById("btn8").onclick=function(){ 
                window.close();//关闭弹出的窗口
            };
    
            
            document.getElementById("btn9").onclick=function(){ 
               document.writeln(window.navigator.appVersion);
            };
    
            document.getElementById("btn10").onclick=function(){ 
              window.location="Ajax.html"
            };
            
          }
        </script>
    </head>
    <body>
        <h1>BOM</h1>
        <button type="button" id="btn1">alert</button>
        <button type="button" id="btn2">confirm</button>
        <button type="button" id="btn3">prompt</button>
        <button type="button" id="btn4">开始时间</button>
        <button type="button" id="btn5">停止时间</button>
        <button type="button" id="btn6">开始</button>
        <button type="button" id="btn7">打开浏览器窗口</button>
        <button type="button" id="btn8">关闭浏览器窗口</button>
        <button type="button" id="btn9">查看浏览器信息</button>
        <button type="button" id="btn10">跳转页面</button>
        <div id="mytime">
    
        </div>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            table{ 
                border: 1px solid springgreen;
                width: 500px;
                border-collapse: collapse;
            }
            table th,td{ 
             border: 1px solid springgreen;
             text-align: center;
            }
         </style>
        <script type="text/javascript">
          //如何做浏览器的兼容呢？
          function createXhr(){ 
              var xhr;
              if(typeof XMLHttpRequest!="undefined"){ 
                 xhr=new XMLHttpRequest();//发送Ajax的对象
              }else if(typeof ActiveXObject!="undefined"){ 
                 xhr=new ActiveXObject("MSXML2.XMLHttp.6.0");
              }
              return xhr;
          }
    
          window.onload=function(){ 
             //创建一个请求对象
             var xhr=createXhr();
             xhr.open("get","http://123.57.7.108:83/product.json",true);
             //如果是post请求方式，那么提交参数的格式是什么呢？
             xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//MIME类型
             xhr.send(null);//因为你使用get方式 null针对的是post方式
             xhr.onreadystatechange=function(){ 
                 //回调函数
                 if(xhr.readyState==4){ 
                      if(xhr.status==200){ //200在http协议中表示成功
                          console.log(xhr.responseText);//接受服务端返回的字符串 JSON
                          var products=JSON.parse(xhr.responseText);//将字符串转化成对象
                          console.log(products);
                          //dom操作
                          for(let i=0;i<products.length;i++){ 
                            var tr= document.createElement("tr");
                            let tds=` <td> <input type="checkbox" name="ck"/ > </td> <td>${ products[i].id}</td> <td>${ products[i].name}</td> <td> <img style="width:150px;height:150px" src="http://123.57.7.108:81/${ products[i].image}"/> </td> <td>${ products[i].price}</td> <td>${ products[i].spuId}</td> `;
                           //将得到的数据插入创建的<tr></tr>
                          tr.innerHTML=tds;
                           //再将tr这一行数据插入到表格当中即可
                            document.getElementById("tbl").appendChild(tr);
                          }
                      }
                 }
             };
          };
        
        </script>
    </head>
    <body>
        <h1>Ajax案例</h1>
        <button type="button" id="btn10">后退</button>
        <script type="text/javascript">
          document.getElementById("btn10").onclick=function(){ 
            window.history.go(-1);
          };
        </script>
        <table id="tbl">
        <thead>
            <tr>
                <th>
                    全选
                    <input type="checkbox" name="all" id="all" />
                </th>
                <th>编号</th>
                <th>名称</th>
                <th>图片</th>
                <th>价格</th>
                <th>类型</th>
            </tr>
        </thead>
        <tbody>
    
        </tbody>
    </table>
    </body>
    </html>