一 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>
// 小案例
- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title > 单击计算圆面积按钮弹出相对应的输入对话框</title><script type="text/javascript">window.onload=function(){var but1=document.getElementById("but")but1.onclick=function(){var r=prompt("请输入圆的半径");if(r==""){alert(" 请输入数值 ");}else if(isNaN(r)){alert(" 输入的数非数值 ")}else {confirm(r*r*Math.PI)}}}
- </script></head><body><input type="button" name=""value=" 计算圆面积 "id="but"></body></html>
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" 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 设置或返回调色板的比特深度.
来源: http://www.bubuko.com/infodetail-2758116.html