JavaScrip（8）_Windows 对象常用方法-CFANZ编程社区

本系列博客汇总在这里：JavaScript 汇总

Windows 对象常用方法

一、window 对象中的 location

1、获得当前的页面的 url
2、重定向

二、window 对象中的 history
三、window 对象中的 Alert
四、window 对象中的 confirm
五、window 对象中的 open
六、window 对象中的 close
七、window 对象中的 setTimeout
八、window 对象中的 setInterval
九、window 对象中的 clearInterval

一、window 对象中的 location

1、获得当前的页面的 url

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
    function clickme()
    {
      //获得当前的页面的url
      var str = window.location.href;
      alert(str);
    }
  </script>
</head>
<body>
<input type="button" value="点击" onclick="clickme()">
</body>
</html>

JavaScrip（8）_Windows 对象常用方法_JavaScript

2、重定向

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
    function clickme()
    {
      //重定向到某一地址,window可以省略
      window.location.href = "http://www.weiyuxuan.cn";
    }
  </script>
</head>
<body>
<input type="button" value="点击" onclick="clickme()">
</body>
</html>

JavaScrip（8）_Windows 对象常用方法_JavaScript_02

二、window 对象中的 history

通常我们使用该对象做页面跳回

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
    function returnpage()
    {
      history.back();
    }
  </script>
</head>
<body>
<input type="button" value="返回" onclick="returnpage()">
</html>

JavaScrip（8）_Windows 对象常用方法_html_03

2. History 的 go 方法可以实现页面的跳转值为 -1 代表历史的倒数第一个页面，-2 即倒数第二个页面，以此类推，0 代表当前页面。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
    function returnpage()
    {
      history.go(-1);
    }
  </script>
</head>
<body>
<input type="button" value="返回" onclick="returnpage()">
</html>

三、window 对象中的 Alert

警告提示框。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
    function myclick()
    {
      window.alert("警告");
      //alert("警告");
    }
  </script>
</head>
<body>
<input type="button" value="点击" onclick="myclick()">
</html>

JavaScrip（8）_Windows 对象常用方法_重定向_04

四、window 对象中的 confirm

二次确认框，一般用于删除和重要的操作，它的返回值是 true 和 false，点击确定返回 true，点击取消返回 false。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
    function del()
    {
      var isTrue = confirm("确认要删除吗?");
      if(isTrue)
      {
        //删除操作
      }
    }
  </script>
</head>
<body>
<input type="button" value="删除" onclick="del()">
</html>

JavaScrip（8）_Windows 对象常用方法_javascript_05

五、window 对象中的 open

打开窗口。

window.open('page.html','_blank','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')

参数解释：
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
_blank 弹出新窗口；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar 表示菜单栏。
scrollbars 表示滚动栏。
Resizable=no 是否允许改变窗口大小，yes 为允许；
location=no 是否显示地址栏，yes 为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes 为允许；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
  function openWin()
  {
    open('page.html','_blank','height=300,width=400,top=200,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
  }
  </script>
</head>
<body>
<input type="button" value="打开" onclick="openWin()">
</html>

JavaScrip（8）_Windows 对象常用方法_javascript_06

六、window 对象中的 close

不能关闭整个浏览器的页面，但是可以关闭打开的窗口。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
  function openWin()
  {
    open('page1.html','_blank','height=300,width=400,top=200,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
  }
  </script>
</head>
<body>
<input type="button" value="打开" onclick="openWin()">
</html>

JavaScrip（8）_Windows 对象常用方法_重定向_07

七、window 对象中的 setTimeout

经过指定毫秒值后计算一个表达式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
    //window.setTimeout("alert('你好')",2000);
    window.setTimeout("hello()",2000);
    function hello()
    {
      alert("你好");
    }
  </script>
</head>
<body>
</html>

JavaScrip（8）_Windows 对象常用方法_javascript_08

八、window 对象中的 setInterval

每经过指定毫秒值后计算一个表达式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript">
    window.setInterval("printStr()",2000);
    function printStr()
    {
      alert("你好");
    }
  </script>
</head>
<body>
</html>

JavaScrip（8）_Windows 对象常用方法_javascript_09

九、window 对象中的 clearInterval

清除定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script type="text/javascript"> 
    function a(){
      var birthday = new Date();
      var result = birthday.getFullYear()+"年"+(birthday.getMonth() + 1)+"月"+birthday.getDate()+
      "日"+birthday.getHours()+"时"+birthday.getMinutes()+"分"+birthday.getSeconds()+"秒<br>";
      //把当前的时间字符串设置给div的内容
      document.getElementById("div1").innerHTML = result;
    }   
    var clock = null;   
    function internal(){
      //间隔指定的时间重复的执行某个方法，第一个参数是要执行的方法，第二个参数是间隔的毫秒数
      clock = window.setInterval("a()", 1000);
      
    }   
    function clinternal(){
      //清除计时器，clock参数是计时器的对象
      window.clearInterval(clock);
    }
  </script>
</head>
<body>
<div id="div1"></div>
<input value="开始计时" type="button" onclick="internal()">
<input value="停止计时" type="button" onclick="clinternal()">
</body>
</html>

JavaScrip（8）_Windows 对象常用方法_重定向_10

如有错误，欢迎指正！