2.BOM对象

1. 本章目标
   1. 会使用(getElementById )方法访问DOM元素
   2. 会使用getElementsByName( )方法访问DOM元素
   3. 会使用getElementsByTagName( )方法访问DOM元素
   4. 会使用定时函数和Date对象制作时钟特效

 

1. BOM模型2-1

BOM：浏览器对象模型（Browser Object Model）

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

 

 

1. BOM模型2-2

BOM可实现功能

• • • 弹出新的浏览器窗口
    • 移动、关闭浏览器窗口以及调整窗口的大小
    • 页面的前进、后退

 

1. window对象
   1. 常用属性
   2. 常用方法

 

1. window对象的常用属性

 

常用的属性

语法：

window.属性名= "属性值"

示例：

window.location="http://www.baidu.com" ;      

 

1. window对象的常用方法

 

1. confirm()方法

confirm()：将弹出一个确认对话框

 

confirm()与alert ()、 prompt()区别：

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

<script type="text/javascript">

   var flag=confirm("确认要删除此条信息吗？");

    if(flag==true)

      alert("删除成功！");

      else

       alert("你取消了删除");

</script>

 

1. open()方法

window.open("弹出窗口的url" , "窗口名称" , "窗口特征”)

 

窗口特征：

1. history对象

常用方法：

 

1. location对象
   1. 常用属性

 

1. 1. 常用方法

 

1. location和history对象的应用

示例：

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  

<a href="javascript:location.reload()">刷新本页</a>

<a href="javascript:history.back()">返回主页面</a>

 

1. Document对象

 

常用属性：

语法：

document.referrer

document.URL

 

1. Document对象应用2-2
   1. 判断页面是否是链接进入
   2. 自动跳转到登录页面

 

示例：

var preUrl=document.referrer;  //载入本页面文档的地址

if(preUrl==""){

      document.write("<h2>您不是从领奖页面进入，5秒后将自动

                         跳转到登录页面</h2>");

      setTimeout("javascript:location.href='login.html'",5000);

}

 

1. Document对象的常用方法2-1

 

购物车的关键代码：

 

 

1. Document对象访问页面元素
   1. 动态改变层、标签中的内容
   2. 访问相同name的元素
   3. 访问相同标签的元素

 

1. Document对象的常用方法2-2
   1. 动态改变层、标签中的内容
   2. 访问相同name的元素

示例：

document.getElementById("book").innerHTML="现象级全球畅销书";

var aInput=document.getElementsByTagName("input");

var sStr="";

for(var i=0;i<aInput.length;i++){

       sStr+=aInput[i].value+"  ";

}

document.getElementById("replace").innerHTML=sStr;

 

1. JavaScript内置对象
   1. Array：用于在单独的变量名中存储一系列的值
   2. String：用于支持对字符串的处理
   3. Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
   4. Date：用于操作日期和时间

 

1. Date对象2-1

语法：

var 日期对象=new Date(参数)

参数格式：MM  DD,YYYY,hh:mm:ss

 

示例：

var  today=new Date();   //返回当前日期和时间

var tdate=new Date("september 1,2013,14:58:12");

 

1. Date对象的方法

1. 制作时钟特效

示例：使用Date对象的方法显示当前时间的小时、分钟和秒：

function disptime(){

var today = new Date();

var now=today.toLocalTimeString();  //获取当前时间！

var now=today.toLocalDateString();  //获取当前日期！

var now=today.toLocalString();  //获取当前日期+时分秒！

var hh = today.getHours();

var mm = today.getMinutes();

var ss = today.getSeconds();

document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;

}

disptime();

-----------------------<div id="myclock"></div>

 

1. Math对象

常用方法：

示例：如何实现返回的整数范围为2~99？

var iNum=Math.floor(Math.random()*98+2);

 

1. 随机选择颜色

function selColor(){

        var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");

        var num=Math.ceil(Math.random()*7)-1;

        document.getElementById("color").innerHTML=color[num];

}

 

1. 定时函数2-1
   1. setTimeout()
   2. setInterval()

 

1. setTimeout()

语法：

setTimeout("调用的函数",等待的毫秒数)

示例：---- var myTime＝setTimeout("disptime() ", 1000 );

<input name="s" type="button" value="显示提示消息" onclick="timer()" />

function timer(){

        var t=setTimeout("alert('3 seconds')",3000);

}

 

1. setInterval()

语法：

setInterval("调用的函数",间隔的毫秒数)

 

示例：var  myTime＝setInterval("disptime() ", 1000 );

如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

 

1. 清除函数
   1. clearInterval ()
   2. clearTimeout()

 

 

1.  

clearTimeout()

 

语法：

clearTimeout (setTimeOut()返回的ID值)

示例：

var myTime＝setTimeout("disptime() ", 1000 );

clearTimeout(myTime)；

 

1.  

clearInterval ()

语法：

clearInterval (setInterval()返回的ID值)

示例：

var  myTime＝setInterval("disptime() ", 1000 );

clearInterval(myTime)；

 

1. 总结