HTML5-JS操作BOM对象

BOM:浏览器对象模型(Browser Object Model)

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

BOM可实现功能:

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口的大小
  • 页面的前进、后退
常用属性:
histoty:有关客户访问过的URL信息

location:有关当前URL信息

语法:
window.属性名="属性值";
例:window.location="www.91pron.com";

location常用方法:

  • prompt():显示可提示用户输入框
  • alert():显示带有一个提示信息和一个确定按钮的警示框 
  • confirm():显示一个带有提示信息、确定和取消按钮的对话框
  • close():关闭浏览器窗口
  • open():打开一个新的浏览器窗口,加载给定URL 所指定的文档(并能指定窗口的name,大小,位置)
  • setTimeout():在指定的毫秒数后调用函数或计算表达式
  • setInterval():按照指定的周期(以毫秒计)来调用函数或表达式
  • reload():重新加载当前文档
  • replace():用新的文档替换当前文档
  • host:设置或返回当前url主机名和端口号
  • hostname:设置或返回当前url主机名
  • href:设置或返回完整的url

window.open("url","窗口name","窗口特征");

下面是窗口特征的内容:

height、width

窗口文档显示区的高度、宽度。以像素计

left、top

窗口的x坐标、y坐标。以像素计

toolbar=yes | no  |1 | 0

是否显示浏览器的工具栏。黙认是yes

scrollbars=yes | no  |1 | 0

是否显示滚动条。黙认是yes

location=yes | no  |1 | 0

是否显示地址地段。黙认是yes

status=yes | no  |1 | 0

是否添加状态栏。黙认是yes

menubar=yes | no  |1 | 0

是否显示菜单栏。黙认是yes

resizable=yes | no  |1 | 0

窗口是否可调节尺寸。黙认是yes

titlebar=yes | no  |1 | 0

是否显示标题栏。黙认是yes

fullscreen=yes | no  |1 | 0

是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

history常用方法:

  • back():加载对象前一个url
  • forward():加载对象下一个url
  • go():加载对象中的具体url
  • history.back()==history.go(-1);浏览器中的后退
  • history.forward()==history.go(1);浏览器中的前进
Document对象:

常用属性:(语法)

  • document.referrer返回载入当前文档的url
  • document.URL返回当前文档的url
//判断页面是否有链接进入
//自动跳转页面

var preURL=document.referrer;
if(preURL==""){
    documet.write("您不是从领奖界面进入,五秒后返回登录界面")
    setTimeout("javascript:location.href='登录.html'",5000);
}

Document对象常用方法:

  • getElementById():返回对指定ID第一个对象的引用(ID属性唯一)
  • getElementsByName():返回指定name名的集合(相同name属性)
  • getElementsByTagName():返回带有指定标签名的对象的集合(相同的元素)
  • write():向文档写文本,HTML表达式,JavaScript代码
//动态改变层,标签中的元素
//访问相同的name元素

document.getElementsById("id").innerHTML="现象级全球畅销书";
var alnput=document.getElementsByTagName("input");//
var sStr="";
for(var i=0;i<alnput.length;i++){
    sStr+=alnput[i].value+"&nbsp;&nbsp;";
}

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

JavaScript内置对象:

  • Array:用于在单独的变量名中存储一系列的值
  • String:用于支持对字符串的处理
  • Math:用于执行常用的数学任务,包含了若干数字常量和函数
  • Date:用于操作日期和时间
Date对象:
var 日期对象=new Date(参数);

参数格式:MM, DD,YYYY,hh:mm:ss(月,日,年,时:分:秒)

常用方法:

getDate()

返回 Date 对象的一个月中的每一天,其值介于1~31之间

getDay()

返回 Date 对象的星期中的每一天,其值介于0~6之间

getHours()

返回 Date 对象的小时数,其值介于0~23之间

getMinutes()

返回 Date 对象的分钟数,其值介于0~59之间

getSeconds()

返回 Date 对象的秒数,其值介于0~59之间

getMonth()

返回 Date 对象的月份,其值介于0~11之间

getFullYear()

返回 Date 对象的年份,其值为4位数

getTime()

返回自某一时刻(1970年1月1日)以来的毫秒数

制作时钟

function disptime(){


    var today = new Date(); 


    var hh = today.getHours();


    if(hh<10){


         hh="0"+hh;


    }//如果时间小于10,则在前面加0,使显示成为两位数


    var mm = today.getMinutes();


    if(mm<10){


         mm="0"+mm;      


    }


    var ss = today.getSeconds();


    if(ss<10){


         ss="0"+ss;


    }


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

function load(){

setInterval(disptime, 1000);//每隔一秒加载一次

}

<body onload="load()">//网页加载完开始运行

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

</body>

setTimeout("调用的函数",等待的毫秒数)//只运行一次

setInterval("调用的函数",间隔的毫秒数)//一直运行

clearTimeout(setTimeOut()返回的ID)//关闭

setTimeOut()函数

clearInterval(setInterval()返回的ID)//关闭

setInterval()(函数)

MATH对象:

常用方法:

ceil()

对数进行上舍入

Math.ceil(25.5);返回26

Math.ceil(-25.5);返回-25

floor()

对数进行下舍入

Math.floor(25.5);返回25

Math.floor(-25.5);返回-26

round()

把数四舍五入为最接近的数

Math.round(25.5);返回26

Math.round(-25.5);返回-26

random()

返回0~1之间的随机数

Math.random();例如:0.6273608814137365

实现随机取整数2-99:

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

猜你喜欢

转载自blog.csdn.net/weixin_42038771/article/details/80641094