BOM

最新推荐文章于 2022-09-20 10:56:33 发布

Carl_Hugo

最新推荐文章于 2022-09-20 10:56:33 发布

阅读量287

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zxiang248/article/details/51619875

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

javascript组成部分：
EMCAScript（基本语法）
BOM( Browser Object MOdel) 浏览器对象模型.
浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要
操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。

window  代表了一个新开的窗口
location 代表了地址栏对象。
screen  代表了整个屏幕的对象

window对象常用的方法：

open()   打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy()  相对于原来的窗口移动指定的x、y值。 
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。 

setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。

注意：使用window对象的任何属性与方法都可以省略window对象不写的。


  <script type="text/javascript">
      function showAd(){
          window.open("ad.html", "_blank", "height=300px,width=300px,location=no,toolbar=no,top=100px");
      }
      //setTimeout("showAd()",3000);
      var id=setInterval("showAd()",2500);
      function small(){
          window.resizeTo(300,200);
      }
      function move(){
          for(var i=0;i<50;i++){
              moveBy(50,0);
              moveBy(0,50);
              moveBy(-50,0);
              moveBy(0,-50);
          }
      }

      function move2(){
          moveTo(500,200);
      }

      function clearTest(){
          clearInterval(id);
      }  
  </script>

注册事件的方式：

        方式一： 直接在html元素上注册

 <body onload="ready()">

                function ready(){
                    alert("body的元素被加载完毕了..");   
                }

        方式二：可以js代码向找到对应的对象再注册。 推荐使用。

var bodyNode = document.getElementById("body");

            bodyNode.onload = function(){
                alert("body的元素被加载完毕");  
            }

常用的事件：

鼠标点击相关：
    onclick 在用户用鼠标左键单击对象时触发。 
    ondblclick 当用户双击对象时触发。 
    onmousedown 当用户用任何鼠标按钮单击对象时触发。 
    onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 

鼠标移动相关：
    onmouseout  当用户将鼠标指针移出对象边界时触发。 
    onmousemove 当用户将鼠标划过对象时触发。 

焦点相关的：
    onblur 在对象失去输入焦点时触发。 
    onfocus 当对象获得焦点时触发。

其他：
    onchange 当对象或选中区的内容改变时触发。 
    onload 在浏览器完成对象的装载后立即触发。 
    onsubmit 当表单将要被提交时触发。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
    function clickTest(){
        alert("单击..");  
    }

    function dbClick(){
        alert("双击..");  
    }



    function showTime(){
        var timeSpan = document.getElementById("timeSpan");
        var date  = new Date().toLocaleString();
        timeSpan.innerHTML = date.fontcolor("red");
    }

    function hideTime(){
        var timeSpan = document.getElementById("timeSpan");
        timeSpan.innerHTML = "";
    }


    function showInfo(){
        var timeSpan = document.getElementById("userName");
        timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");  
    }

    function hideInfo(){
        var timeSpan = document.getElementById("userName");
        timeSpan.innerHTML = "";    
    }

    function change(){
        alert("城市改变了..");   
    }


</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <input type="button" onclick="clickTest()"  value="单击" />
    <input type="button" ondblclick="dbClick()" value="双击"/> 
    <span onmousemove="showTime()" onmouseout="hideTime()" >查看当前系统时间：</span><span id="timeSpan"></span>
    用户名<input type="text" onfocus="showInfo()"  onblur="hideInfo()"  /> <span id="userName"></span>

    <select onchange="change()" >
        <option>广州</option>
        <option>深圳</option>
        <option>上海</option>
    </select>


</body>
</html>

Screen(屏幕)对象

availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。     
availWidth  获取系统屏幕的工作区域宽度，排除 Windows 任务栏。   
height      获取屏幕的垂直分辨率。 
width       获取屏幕的水平分辨率。

document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>");
    document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>");
    document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>");
    document.write("获取屏幕的水平分辨率："+screen.width+"<br/>");

Carl_Hugo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM

javascript组成部分： EMCAScript（基本语法） BOM( Browser Object MOdel) 浏览器对象模型. 浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。window 代表了一个新开的窗口location 代表了地址栏对象。screen 代表了整
复制链接

扫一扫

专栏目录