javascript 中的 BOM 对象
浏览器对象模型–Browser Object Model (BOM)
主要的对象属于 window 对象中的内容。
window 对象我们不需要手动创建,是一个内置的对象,我们只管使用。
window 对象中的属性
确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)
window 对象中的函数
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
close() 方法用于关闭浏览器窗口。
关于弹框的函数
警告框:window.alert("sometext");
确认框:window.confirm("sometext");
提示框:window.prompt("sometext","defaultvalue");
window 对象中的子对象
screen–屏幕对象
location–页面的地址对象
history–历史对象
navigator–浏览器信息对象
window 对象中的属性
确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条) 有 2 种方法
1. 对于 Internet Explorer、Chrome、Firefox、Opera 以及 Safari 使用
window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度
2. 对于 Internet Explorer 8、7、6、5 使用
document.documentElement.clientHeight - 浏览器窗口的内部高度 document.documentElement.clientWidth - 浏览器窗口的内部宽度
或者
document.body.clientHeight - 浏览器窗口的内部高度
document.body.clientWidth - 浏览器窗口的内部宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window 对象中的属性</title>
<script>
window.onload=function(){
//window.innerHeight - 浏览器窗口的内部高度
//window.innerWidth - 浏览器窗口的内部宽度
//document.documentElement.clientHeight - 浏览器窗口的内部高度
//document.documentElement.clientWidth - 浏览器窗口的内部宽度
//document.body.clientHeight - 浏览器窗口的内部高度
//document.body.clientWidth - 浏览器窗口的内部宽度
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
document.write("<h1>"+h+"*"+w+"</h1>");
}
</script>
</head>
<body>
</body>
</html>
window 对象中的函数
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
pen() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
格式:window.open(URL,name,features,replace)
参数 1-URL:要在新窗口中显示的文档的地址[可选的字符串].
没有 url[1.不写 2.空字符串]—窗口依然打开,只是没有内容
参数 2–name:新窗口的名称.
可以用作标记 <a>
和 <form>
的属性 target 的值.
如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个窗 口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。
参数 3-features:新窗口要显示的标准浏览器的特征【尺寸】
如果省略该参数,新窗口将具有所有标准特征。
参数 4-replace:规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目, 还是替换浏览历史中的当前条目.
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
close() 方法用于关闭浏览器窗口。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window 对象中的函数</title>
<script>
window.onload=function(){
var but1=document.getElementById("but1");
but1.onclick=function(){
//window.open("https://www.baidu.com","baidu","width:300px,height:300px",false;)
window.open("01.shuxing .html","shuxing",false);
}
var but2=document.getElementById("but2");
but2.onclick=function(){
window.close();
}
}
</script>
</head>
<body>
<input id="but1" type="button" value="open()" />
<br />
<input id="but2" type="button" value="close()" />
</body>
</html>
关于弹框的函数
1.警告框:window.alert("sometext");
2.确认框:window.confirm("sometext");
当确认卡弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作。 当你点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。
3.提示框:window.prompt("sometext","defaultvalue");
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操 纵。如果用户点击确认,那么返回值为输入的值.如果用户点击取消,那么返回值 为 null。
参数 1—提示信息
参数 2—提示框的默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于弹框的函数</title>
<script>
window.onload=function(){
//1.警告框:window.alert("sometext");
var but1=document.getElementById("but1");
but1.onclick=function(){
window.alert("警示框");
}
//2.确认框:window.confirm("sometext");
var but2=document.getElementById("but2");
but2.onclick=function(){
var flag=window.confirm("确定要退出吗 ");
if(flag){
window.close();
}
}
//3.提示框:window.prompt("sometext","defaultvalue");
var but3=document.getElementById("but3");
but3.onclick=function(){
var res=window.prompt("请输入","");
alert(res);
if(res!=null){
but3.value=res;
}
}
}
</script>
</head>
<body>
<input id="but1" type="button" value="警示框"/> <br>
<input id="but2" type="button" value="确认框"/> <br>
<input id="but3" type="button" value="提示框"/>
</body>
</html>
window 对象中的子对象–[screen–屏幕对象]
window.screen 对象包含有关用户屏幕的信息
-
总宽度和总高度 — width / height
-
可用宽度和可用高度----availWidth / availHeight
-
色彩深度----colorDepth
-
色彩分辨率—pixelDepth
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>screen--屏幕对象</title>
<script>
window.onload=function(){
//1. 总宽度和总高度 --- width / height
var w=window.screen.width;
var h=window.screen.height;
document.write("<h1>总宽度和总高度"+w+"*"+h+"</h1>")
//2. 可用宽度和可用高度----availWidth / availHeight
var aw=window.screen.availWidth;
var ah=window.screen.availHeight;
document.write("<h1>可用宽度和可用高度"+aw+"*"+ah+"</h1>")
//3. 色彩深度----colorDepth
var col=window.screen.colorDepth;
document.write("<h1>色彩深度"+col+"</h1>")
//4. 色彩分辨率---pixelDepth
var pix=window.screen.pixelDepth;
document.write("<h1>色彩分辨率"+pix+"</h1>")
}
</script>
</head>
<body>
</body>
</html>
window 对象中的子对象–[location–页面的地址对象]
href 属性返回当前页面的 URL。
search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之 后的部分)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location--页面的地址对象</title>
<script>
window.onload=function(){
var but=document.getElementById("but");
but.onclick=function(){
var test1=document.getElementById("test1");
var test2=document.getElementById("test2");
var name=test1.value;
var pass=test2.value;
if(name=="zhangsan" || pass=="12345"){
window.location.href="06.demo.html?ursename="+name+"&Password="+pass;
}else{
window.location.href="05.location .html";
}
}
}
</script>
</head>
<body>
<input id="test1" type="text " name="ursename" /> <br />
<input id="test2" type="text " name="password"/> <br />
<input id="but" type="button" value="登录"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录成功</title>
<script>
window.onload=function(){
var urfhref=window.location.href;
//search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之 后的部分)。
var urfsearch=window.location.search;
//?ursename=zhangsan&Password=123456
var strarray=urfsearch.split("&");
//strarray[0]==?ursename=zhangsan
//strarray[1]==Password=123456
for(var strarrayindex in strarray){
var strinof=strarray[strarrayindex].split("=");
//strarray[0]==strinof[0]==?ursename
//strarray[0]==strinof[1]==zhangsan
strarray[1]==strinof[0]==Password
strarray[1]==strinof[1]==123456
if(strinof[0]=="?ursename"){
var domarray=document.getElementsByTagName("h1");
domarray[0].innerHTML=strinof[1]+",登陆成功!";
}
}
//alert(strarray[1]);
}
</script>
</head>
<body>
<h1>登录成功</h1>
</body>
</html>
window 对象中的子对象–[history–历史对象]
back() - 与在浏览器点击后退按钮相同
forward() - 与在浏览器中点击按钮向前相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var but1=document.getElementById("but1");
but1.onclick=function(){
//back() - 与在浏览器点击后退按钮相同
//forward() - 与在浏览器中点击按钮向前相同
window.history.forward();
}
}
</script>
</head>
<body>
<h1>测试第一个页面</h1>
<a href="09.test2 .html">测试第二个页面</a>
<input id="but1" type="button" value="下一步" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var but1=document.getElementById("but1");
but1.onclick=function(){
//back() - 与在浏览器点击后退按钮相同
//forward() - 与在浏览器中点击按钮向前相同
window.history.forward();
}
var but2=document.getElementById("but2");
but2.onclick=function(){
window.history.back();
}
}
</script>
</head>
<body>
<h1>history--测试第二个页面</h1>
<a href="07.history .html">测试第三个页面</a>
<input id="but1" type="button" value="下一步" />
<input id="but2" type="button" value="上一步" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history--历史对象</title>
<script>
window.onload=function(){
var but1=document.getElementById("but1");
but1.onclick=function(){
//back() - 与在浏览器点击后退按钮相同
//forward() - 与在浏览器中点击按钮向前相同
window.history.back();
}
}
</script>
<body>
<h1>测试第三个页面</h1>
<input id="but1" type="button" value="上一步" />
</body>
</html>
window 对象中的子对象–[navigator–浏览器的信息对象]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>navigator-浏览器的信息对象</title>
<script>
window.onload=function(){
document.write("<h1>浏览器代号:"+window.navigator.appCodeName+"</h1>");
document.write("<h1>浏览器名称:"+window.navigator.appName+"</h1>");
document.write("<h1>浏览器版本:"+window.navigator.appVersion+"</h1>");
document.write("<h1>启用 Cookies:"+window.navigator.cookieEnabled+"</h1>");
document.write("<h1>硬件平台:"+window.navigator.platform+"</h1>");
document.write("<h1>用户代理:"+window.navigator.userAgent+"</h1>");
document.write("<h1>用户代理语言:"+window.navigator.systemLanguage+"</h1>");
}
</script>
</head>
<body>
</body>
</html>
Javascript 中的计时函数
在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为 计时事件。
setInterval(“function”,milliseconds)
- 间隔指定的毫秒数不停地执行指定的代码。
参数 1–function–被间隔执行的动作
参数 2–milliseconds–间隔时间【毫秒数】
clearInterval(intervalVariable)
方法用于停止 setInterval() 方法执行的函数代码。
参数 intervalVariable--- setInterval()
的返回值。
setTimeout(“function”,milliseconds)
暂停指定的毫秒数后执行指定的代码.
参数 1–指定运行的代码
参数 2–指定的毫秒数
clearTimeout(timeoutVariable)
方法用于停止执行 setTimeout()方法的函数代码。
参数 timeoutVariable----setTimeout
方法的返回值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript 中的计时函数</title>
<script>
var returnval=null;//保存setInterval返回值
window.onload=function(){
var but1=document.getElementById("but1");
but1.onclick=function(){
var harrat=document.getElementsByTagName("h1");
function getDate(){
var date1=new Date();
var y=date1.getFullYear();
var m=date1.getMonth();
var date=date1.getDate();
var hours=date1.getHours();
var min=date1.getMinutes();
var s=date1.getSeconds();
var time=y+"年"+m+"月"+date+"日"+hours+":"+min+":"+s+"秒";
harrat[0].innerHTML=time;
}
returnval=setInterval(function(){getDate();},1000);
returnval=setTimeout(function(){
getDate();
},
1000);
}
}
function testkeydown(event){
if(event.keyCode==40){
//停止
clearInterval(returnval);
//clearTimeout(returnval);
}
}
</script>
</head>
<body onkeydown="testkeydown(event);">
<h1> </h1>
<input id="but1" type="button" value="开始" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>闪灯</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
display:block ;
}
</style>
<script>
window.onload=function(){
var divdom=document.getElementById('div1');
var flag=true;
function display_div(){
if(flag){
divdom.style.display="block";
flag=false;
}else{
divdom.style.display="none";
flag=true;
}
};
setInterval(function(){display_div();},50);
}
</script>
</head>
<body>
<center>
<div id="div1"></div>
</center>
</body>
</html>