看程序学js-4 BOM

最新推荐文章于 2024-05-01 09:00:00 发布

涂家豪

最新推荐文章于 2024-05-01 09:00:00 发布

阅读量119

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/tujiahao1/article/details/92797711

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  document.write("文档内容");
  document.write("文档显示区域的宽度"+window.innerWidth);
  document.write("<br>");
  document.write("文档显示区域的高度"+window.innerHeight);
</script>

<script>

  document.write("浏览器的宽度:"+window.outerWidth);
  document.write("<br>");
  document.write("浏览器的高度:"+window.outerHeight);

</script>

<script>
  function openNewWindow(){
    myWindow=window.open("/");
  }
</script>

<button onclick="openNewWindow()">打开一个新的窗口</button>


</body>
</html>

2、navigator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
  document.write("<p>浏览器产品名称：");
  document.write(navigator.appName + "</p>");

  document.write("<p>浏览器版本号：");
  document.write(navigator.appVersion + "</p>");

  document.write("<p>浏览器内部代码：");
  document.write(navigator.appCodeName + "</p>");

  document.write("<p>操作系统：");
  document.write(navigator.platform + "</p>");

  document.write("<p>是否启用Cookies：");
  document.write(navigator.cookieEnabled + "</p>");

  document.write("<p>浏览器的用户代理报头：");
  document.write(navigator.userAgent + "</p>");
</script>
</body>
</html>

3、screen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
  document.write("用户的屏幕分辨率: ")
  document.write(screen.width + "*" + screen.height)
  document.write("<br />")
  document.write("可用区域大小: ")
  document.write(screen.availWidth + "*" + screen.availHeight)
  document.write("<br />")
</script>
</body>
</html>

4、history

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function goBack()
  {
    history.back();
  }
</script>

<button onclick="goBack()">返回</button>

<script>
  function goBack()
  {
    history.go(-2); //-1表示上次，-2表示上上次，以次类推
  }
</script>

<button onclick="goBack()">返回上上次</button>
</body>
</html>

5、location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>当前时间:</span>
<script>
  var d = new Date();
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  document.write(":");
  document.write(d.getMilliseconds());

  function refresh(){
    location.reload();
  }
</script>

<br>
<button onclick="refresh()">刷新当前页面</button>

<script>
  function jump(){
    //方法1
    //location="/";

    //方法2
    location.assign("/");

  }
</script>

<br>
<button onclick="jump()">跳转到首页</button>

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  p("协议 location.protocol:"+location.protocol);
  p("主机名 location.hostname:"+location.hostname);
  p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port);

  p("主机加端口号 location.host: "+location.host);
  p("访问的路径  location.pathname: "+location.pathname);

  p("锚点 location.hash: "+location.hash);
  p("参数列表 location.search: "+location.search);

</script>
</body>
</html>

6、弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function register(){
    alert("注册成功");
  }
</script>

<br>
<button onclick="register()">注册</button>

<script>
  function del(){
    var d = confirm("是否要删除");
    alert(typeof d + " " + d);
  }
</script>

<br>
<button onclick="del()">删除</button>

<script>
  function p(){
    var name = prompt("请输入用户名:");
    alert("您输入的用户名是:" + name);
  }
</script>

<br>
<button onclick="p()">请输入用户名</button>
</body>
</html>

7、计时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

  function printTime(){
    var d = new Date();
    var h= d.getHours();
    var m= d.getMinutes();
    var s= d.getSeconds();
    document.getElementById("time").innerHTML= h+":"+m+":"+s;

  }

  function showTimeIn3Seconds(){
    setTimeout(printTime,3000);
  }

</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

<p>每隔1秒钟，打印当前时间</p>

<div id="time"></div>

<script>

  function printTime(){
    var d = new Date();
    var h= d.getHours();
    var m= d.getMinutes();
    var s= d.getSeconds();
    document.getElementById("time").innerHTML= h+":"+m+":"+s;

  }

  var t = setInterval(printTime,1000);

</script>

<br><br>

<p>每隔1秒钟，打印当前时间</p>

<div id="time"></div>

<script>

  var t = setInterval(printTime,1000);

  function printTime(){
    var d = new Date();
    var h= d.getHours();
    var m= d.getMinutes();
    var s= d.getSeconds();
    document.getElementById("time").innerHTML= h+":"+m+":"+s;
    if(s%5==0)
      clearInterval(t);
  }

</script>
<br>

<p>每隔1秒钟，通过document.write打印当前时间</p>

<script>

  function printTime(){
    var d = new Date();
    document.write(d.getHours());
    document.write(":");
    document.write(d.getMinutes());
    document.write(":");
    document.write(d.getSeconds());
    document.close();
  }

  var t = setInterval(printTime,1000);

</script>
</body>
</html>