BOM
来源:互联网 发布:mac怎么找安装包 编辑:程序博客网 时间:2024/06/05 16:29
BOM
概念:BOM(browser object model)窗口对象模型
1、常用对象
window:窗口,浏览器的窗口
我们定义的全局变量和全局函授都是window对象的属性和方法
例子:
var a = 1;function test(){ var a = 2; alert(a); alert(window.a);}
窗口body是宽度:window.innerWidth
窗口body的高度:window.innerHeight
var p1 = document.getElementById("p1");var width = window.innerWidth;var height = window.innerHeight;p1.innerHTML = "窗口的宽度为:" + width + "窗口的高度为:" + height;
常用的方法:
(1)open:打开一个新的窗口。要传三个参数:第一个参数为将要打开窗口的路径;第二个参数为打开的方式;第三个参数为对于新打开浏览器的描述(宽和高等)。
(2)close:关闭一个窗口
(3)moveTo:移动一个窗口。以窗口的左上角为坐标起点
(4)focus:是窗口获取焦点
(5)resizeTo:改变新窗口的大小
例子:包含的上面的5个方法
<body> <p id="p1">窗口的宽度</p> <button onclick="openWin()">打开一个新的窗口</button> <button onclick="closeWin()">关闭新的窗口</button> <button onclick="removeWin()">移动新的窗口</button> <button onclick="resizeWin()">改变新窗口的大小</button></body><script> //当前窗口的宽度和高度 var p1 = document.getElementById("p1"); var width = window.innerWidth; var height = window.innerHeight; p1.innerHTML = "窗口的宽度为:" + width + "窗口的高度为:" + height; function openWin(){//打开一个新的窗口 myWindow = window.open("","","width=200,height=300"); } function closeWin(){//关闭一个窗口 myWindow.close(); } function removeWin(){//移动新的窗口 //一个窗口的左上角为移动窗口的坐标 myWindow.moveTo(200,200); //获取焦点 myWindow.focus(); } function resizeWin(){//改变窗口的大小 myWindow.resizeTo(500,500); //获取焦点 myWindow.focus(); }</script>
屏幕的常用属性:宽、高、可用宽和可用高(可用高不包括任务栏)
<script> var scrWidth = window.screen.width; var scrHeight = screen.height; document.write("屏幕的宽:" +scrWidth + "屏幕的高:" + scrHeight); var scrAvaWidth = screen.availWidth; var scrAvaHeight = screen.availHeight; document.write("屏幕的宽:" +scrAvaWidth + "屏幕的高:" + scrAvaHeight);</script>
(7)location:地址
常用属性:href:完整路径;port:端口号;pathname:路径名;protocol协议
常用方法:
①打开一个新的路径(窗口)
function newLocation(){ location.assign("http://www.runoob.com");}
function reloadDoc(){ //如果传值为true那么就是强制刷新,如果不传,就是普通刷新 location.reload();}
③history:历史记录
记录窗口的历史,可以进行页面的转换。
④back:返回上一页
⑤forward:进入下一页
⑥go:进入确定的哪一页(需要传参数,-1时回到上一页
例子:包含③-⑥四个方法
function goBack(){ history.back();}function newDoc(){ location.assign("http://www.runoob.com");}function goForward(){ history.forward();}function goTo(){ history.go(-1);}
2、弹窗
(1)alert():警告提示框。也是window对象下的方法,window可以省略不写。
alert("提示的内容");//警告提示框
(2)prompt(“提示的信息”,”默认值”):信息提示输入框。也是window对象下的方法,window也可以省略不写。当点击了确定后才把值返回否则返回为null。
var str = prompt("请输入的内容","hello world");//请输入内容就是提示的信息,后面的hello world是默认值
(3)confirm(“提示的信息”):确认框。也是window对象下的方法,window可以省略不写,当点击“确定”的时候,返回true,如果点击“取消”返回false
var isRight = confirm("是否确定删除!");alert(typeof (isRight) + isRight);
3、cookie
(1)cookie的作用:在本地浏览器存储数据。常用语记住账号等。
(2)cookie的组成:键值对的形式
(3)存储的数据:“userId=12324;psd=1324;”
有效期:“expires=今天以后的时间”
(4)存储cookie:
按照cookie的格式写好一个字符串,然后将它赋值给document.cookie,浏览器就存了这个cookie。可以存储多个键值对,但是键的名字不能重复。新的值替换旧的值。
function saveCookie(){ var pad = document.getElementById("pad").value; //日期的应用 var date = new Date(); date.setDate(date.getDate() + 7); var cookieText = "pad=" +pad +";" + "expires=" + date; document.cookie = cookieText;}
(5)获取cookie:
通过document.cookie就能得到浏览器之前存储的cookie。是一个字符串。将这个字符串进行解析,得到仔细想要的内容。
function getCookie(){ var data = document.cookie; var result = []; result= data.split("; "); var userIdData = result[1].split("=")[1]; var padData = result[1].split("=")[1]; var userId = document.getElementById("userId"); userId.value = userIdData; var pad = document.getElementById("pad"); pad.value = padData;}
(6)清除cookie:
将存储的cookie的有效期改为过去的某一天,就清除了cookie。
function removeCookie(){ var date = new Date(); date.setDate(date.getDate()-7); var cookieText = "pad=;expires=" + date; document.cookie = cookieText;}
<body onload="getCookie()"> <form action=""> <label for="userId">账号:</label> <input type="text" id="userId"/><br><br> <label for="pad">密码:</label> <input type="text" id="pad"/><br><br> <label for="rememberUser">记住账号</label> <input type="checkbox" id="rememberUser"/><br><br> <input type="submit" value="登录" onclick="saveCookie()"/> <button onclick="getCookie()">得到cookie</button> <button onclick="removeCookie()">清除cookie</button> </form></body><script> function saveCookie(){//存储 var pad = document.getElementById("pad").value; //日期的应用 var date = new Date(); date.setDate(date.getDate() + 7); var cookieText = "pad=" +pad +";" + "expires=" + date; document.cookie = cookieText; } function getCookie(){//获取 var data = document.cookie; var result = []; result= data.split("; "); var userIdData = result[1].split("=")[1]; var padData = result[1].split("=")[1]; var userId = document.getElementById("userId"); userId.value = userIdData; var pad = document.getElementById("pad"); pad.value = padData; } function removeCookie(){//清除 var date = new Date(); date.setDate(date.getDate()-7); var cookieText = "pad=;expires=" + date; document.cookie = cookieText; }</script>
4、计时事件
(1)setInterval(“函数”,”毫秒数”):计时器。每隔多长时间就调用一次函数。
执行周期性的任务。
例如:时钟的演示
<body> <p id="p1">时间</p></body><script> var timer = setInterval("getTime()",1000); function getTime(){ var time = new Date(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); var p1 = document.getElementById("p1"); p1.innerHTML = hour +":" + minute + ":" + second; }</script>
(2)clearInterval(计时器):停止一个计时器
var timer = setInterval("countDown()",1000);var i = 10;function countDown(){ if(i == 0){ clearInterval(timer); }else{ var id1 = document.getElementById("id1"); id1.innerHTML = i; } i--;}
(3)setTimeout(“函数名”,”毫秒数”):延时器,就是隔了多长时间调用一次函数。
<body> <p id="p1">您的电话已欠费(3秒之后消失)</p></body><script> var timer = setTimeout("alarmClock()",3000); function alarmClock(){ var p1 = document.getElementById("p1"); p1.innerHTML = ""; }</script>
- BOM
- BOM
- BOM
- BOM
- bom
- BOM
- Bom
- BOM
- BOM
- BOM
- BOM
- BOM
- BOM
- bom
- BOM
- BOM
- BOM
- BOM
- Thread的run()与start()的区别
- Pku1236 Network of Schools
- C# datagridview 实现单元格内容进行回车换行而不是换另一行数据
- ssh项目搭建时,Spring的bean的基本配置
- React Native 第六天
- BOM
- mysql数据库相关
- 算法导论【二】——基本说明
- 序列化
- Callable,Runnable比较及用法
- 解析天气信息
- css3 实现进度条
- 单例模式
- HDU.5692 Snacks ( DFS序 线段树维护最大值 )