您的位置: 首页 > IT文章 > JavaScript学习记录总结（十）——几个重要的BOM对象

JavaScript学习记录总结（十）——几个重要的BOM对象

分类: IT文章 • 2025-01-13 10:52:37

一、弹出框

<script type="text/javascript">
    window.onload=function(){
         window.alert("msg alert");
         var msg =window.prompt("prompt", "hello"); //msg hello 或者null

         alert(msg);
         var msg1=window.confirm("hahah"); //msg1 true false;
         alert(msg1);

         //alert prompt confirm

    };
</script>

二、open

<script type="text/javascript">

function openW(){
   //定义自己的外观
   window.open("window2.html","mypage","width=500,height=500,titlebar=yes,resizable=yes",true);
}
</script>
</head>
<body>
      <input type="button" onclick="openW()" value="打开新窗体"/>
</body>

三、window.setInterval

<script type="text/javascript">
//window.self属性代表当前的窗体
//window.setInterval("函数名（）",时间戳); 每隔时间戳执行一次函数
var id=window.self.setInterval("clock()",1);
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
}

function cls(){
window.self.clearInterval(id);
}
</script>
</head>

<body>

<input type="text" />
</body>

四、window.setTimeout

<script type="text/javascript">
//window.self属性代表当前的窗体
//window.setTimeout("函数名（）",时间戳); 隔时间戳后执行一次函数
var id=window.self.setTimeout("clock()",3000);
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
//id=window.self.setTimeout("clock()",3000);
}

function cls(){
window.clearTimeout(id);
}

//面试题
</script>
</head>

<body>


<input type="text" />

</body>

五、Location

<script type="text/javascript">
function goUrl()
{

       alert(window.location.host);
     alert(window.location.hostname);
     alert(window.location.port);
     alert(window.location.protocol);
     alert(window.location.search);
      window.location.href="http://www.baidu.com";

}
</script>
</head>

<body>
     <input type="button" value="发送新的请求" onclick="goUrl()"/>
</body>

六、History

1.html

<body>
     <a href="2.html">进入2.html</a>

     <a href="./l.html?name=chj">进入l.html</a>
</body>

2.html

<body>
   
    <a href="javascript:history.go(-1)">返回1.html</a>
    <a href="3.html">进入3.html</a>
    
    <a href="javascript:history.go(1)">前进</a>
</body>

3.html

<body>
    This is my HTML page. <br>

   
    <a href="javascript:history.go(-1)">返回12.html</a>
</body>