浏览器对象BOM
一 window对象的属性和方法
1.window对象是浏览器窗口对文档提供的一个现实的容器
2 window的属性和方法：window.属性 和window.方法 (可省略window对象)
3 对话框 (BOM中的三种对话框)
1.alert() 显示一段消息和一个带有确认按钮的警告框 ，//消息即为括号内的内容
2 .confirm() 显示一段用户输入消息的对话框，返回值为布尔值 //显示的消息为用户在括号内写 的内容
1.确认框通常用于验证是否接受用户操作。
2.当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
3.当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
3. prompt() 显示可提示用户输入的对话框,第一个参数是提示,第二个参数是默认值
1.提示框经常用于提示用户在进入页面前输入某个值。
2.当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
3.如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
<script type="text/javascript">
document.write("第一种对话框alert"+'<br/>')
alert("我是alert对话框");
document.write('<br/>'+'<hr/>')
document.write("第二种对话框confirm"+'<br/>')
confirm("确认提交")
document.write('<br/>'+'<hr/>')
document.write("第三种对话框prompt"+'<br/>')
var year=prompt("请输入","你好")//两个参数，第一个位提示信息，第二个为输入框中的默认值
document.write('<br/>'+'<hr/>')
</script>
//小案例
4.窗体控制
1.open() 打开一个新的浏览器窗口或者查找一个已命名的窗口
1 url :新窗口路径
2 新窗口的名称
3 窗口属性
width:新建窗口的宽度
height：新建窗口的高度
top：左上角垂直坐标
left：左上角水平坐标
2 close () 关闭浏览器窗口
<body>
<input type="button" value=" open新窗口" onclick="openWin()"> <br>
<input type="button" value="close新窗口" onclick="closeWin()"> <br>
<input type="button" value="moveTo新窗口" onclick="moveWin1()"> <br>
<input type="button" value="moveBy新窗口" onclick="moveWin2()"> <br>
<input type="button" value="sizeBy新窗口" onclick="sizeWin1()"> <br>
<input type="button" value="moveTo新窗口" onclick="sizeWin2()"> <br>
<script>
// 打开和关闭窗口练习
var newWindow;
function openWin(){
newWindow=window.open('','','top=150,left=150,width=300,height=300')
}
//第一个参数若为指定的url如（www.baidu.com）则moveTo moveBy resizeBy resizeTo没有效果，(只有当没有值时，各个功能才能实现)
结果：打开一个长为300，宽为300，左上角坐标为（150,150）的窗口
function closeWin(){
newWindow.close() //关闭窗口
}
function moveWin1(){
newWindow.moveTo(300,300) //移动到这里即为（300,300）
newWindow.focus() //获得焦点
}
function moveWin2(){
newWindow.moveBy(30,30)//相对于之前点再移动
newWindow.focus()
}
function sizeWin1(){
newWindow.resizeBy(30,30)//把窗口大小增加或减小指定的宽度和高度
newWindow.focus()
}
function sizeWin2(){
newWindow.resizeTo(30,30)//把窗口大小调整为指定的宽度和高度
newWindow.focus()
}
</script>
</body>4. 定时器
1.setInterval(function ，millisecond) 按照指定周期（毫秒数）来调用函数或计算表达式
2 clearInterval（）清除计时器
3 setTimeout（function，milliseconds） 按照指定时间后调用函数
4 clearTimeout 清除定时器
1.用setInterval()写图片轮播
<body>
<p>请点击一下图片</p>
<div class="div1" onclick="autoplay()">
<img src="image/10.jpg" alt="" id="pic">
</div>
<script>
var imageArr=["image/9.png","image/7.jpg","image/11.jpg","image/15.png","image/10.jpg"]
var i=0;
function autoplay(){
setInterval(cycle,2000);
}
function cycle(){
i++;
if(i==imageArr.length) i=0;
document.getElementById("pic").src=imageArr[i];
}
</script>
</body>2 使用setTimeout写图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播效果(使用setTimeout实现)</title>
<style>
#div1{
width:320px;
height: 320px;
margin:0 auto;
background: url(image/9.png);
}
</style>
</head>
<body>
<div id="div1">
</div>
<script>
var div1=document.getElementById("div1");
var imageArr=["url(image/7.jpg)","url(image/10.jpg)","url(image/11.jpg)"]
div1.onclick=fun1;
function fun1(){
div1.style.backgroundImage="url(image/7.jpg)";
setTimeout('fun2()',1000)
}
function fun2(){
div1.style.backgroundImage="url(image/10.jpg)";
setTimeout('fun3()',1000)
}
function fun3(){
div1.style.backgroundImage="url(image/11.jpg)";
setTimeout('fun1()',1000)
}
</script>
</body>
</html>5 Window 对象属性
1 innerHeight :返回窗口文档显示区的高度
2 innerWidth：返回窗口文档显示区的宽度
二 History 对象的常用方法
1.back() 加载history 列表中的前一个URL
2 forword() 加载history列表中的下一个URL
3 go() 加载history列表中的某个具体页面
三 Screen 对象
- availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
- availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
- height 返回显示屏幕的高度。
- width 返回显示器屏幕的宽度。
- bufferDepth 设置或返回调色板的比特深度。
腾讯云开发者
