Js浏览器对象
Js浏览器对象——window对象
1.window对象：
（1）window对象是BOM的核心，window对象指当前的浏览器窗口。
（2）所有的JavaScript全局对象、函数以及变量均自动成为window对象的成员。
（3）全局变量是window对象的属性。
（4）全局函数是window对象的方法。
（5）甚至HTML DOM的document也是window对象的属性之一。
例：window.document.write("hello");//window可省略。
2.window尺寸：
（1）window.innerHeight:浏览器窗口的内部高度。
（2）window.innerWidth:浏览器窗口的内部宽度。
例：document.write("宽度："+window.innerWidth+",高度"+window.innerHeight);
3.window方法：
（1）window.open():打开新窗口。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例：
<button id="btn" onClick="btnClick()">按钮</button>
<script>
function btnClick(){
window.open("XXXX.html","windowname","height=200,width=100,top=20,left=40,toolbar=no,menubar=no");
}
</script>
结果：界面有一个按钮，点击该按钮页面跳转到xxxx.html。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
（2）window.close():关闭当前窗口。
~~~~~~~~~~~~~~~~~~~
例：
<button id="btn" onClick="btnClick()">按钮</button>
<script>
function btnClick(){
window.close();
}
</script>
结果：界面出现一按钮，点击该按钮，该界面就关闭了。
~~~~~~~~~~~~~~~~~~~~~~
-------------------------------------------------
JS的浏览器对象—计时器
1.计时事件：
通过使用JavaScript，做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
2.计时方法：
（1）setInterval():间隔指定的毫秒数后不停地执行指定的代码。
clearInterval()方法用于停止setInterval()方法执行的函数代码。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例：
<button id="btn" onClick="stopTime()">按钮</button>
<p id="ptime"></p>
<script>
var mytime=setInterval(function(){getTime();},1000);
function getTime(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("ptime").innerHTML=t;
}
function stopTime(){
clearInterval(mytime);
}
</script>
结果：
时间是动态显示的，当按下按钮时时间就停止了。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
（2）setTimeout():暂停指定的毫秒数后执行指定的代码。
clearTimeout()方法用于停止执行setTimeout()方法的函数代码。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例：
<button onclick="myWin()">按钮</button>
<script>
var win;
function myWin(){
win=setTimeout(function(){alert("hello");},3000);
}
</script>
结果：界面出现按钮，点击按钮三秒后弹出“hello”。
即：与（1）区别：没有显示出动态持续的效果。
例（利用调用自身也可有动态效果）：
<body onload="myWin()">
<button onclick="stopTime()" id="btn">按钮</button>
<script>
var win;
function myWin(){
alert("hello");
win=setTimeout(function(){myWin();},3000);
}
function stopTime(){
clearTimeout(win);
}
</script>
</body>
结果：界面出现一个按钮，并每隔三秒都会弹出“hello”，当点击按钮时就不会再弹出了。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·
---------------------------------------------------------------
JS浏览器—history对象
1.history对象：
window.history对象包含浏览器的历史（URL）的集合。
2.history方法：
（1）history.back():与在浏览器点击后退按钮相同。
（2）history.forward():与在浏览器中点击按钮向前相同。
（3）history.do():进入历史中的某个页面。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~···
例:
obindex.html
<button id="btn" onclick="goceshi()">按钮</button>
<script>
function goceshi(){
history.back();
}
</script>
ceshi.html
<a href="obindex.html">跳转到obindex.html</a>
<button id="btn" onclick="goob()">按钮</button>
<script>
function goob(){
history.forward();
}
</script>
结果：界面出现跳转到obindex.html和一个按钮
点击链接进入obindex.html页面中，该页面有一个按钮
点击该按钮回退到ceshi.html页面。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例2：
obindex.html
<form>
<input type="text" id="username">
<button id="btn" onclick="safe()">按钮</button>
</form>
<script>
function safe(){
var name=document.getElementById("username").value;
if(name=="hello"){
history.go(-1);
}else{
alert("输入的用户民不正确");
}
}
</script>
ceshi.html
<a href="obindex.html">跳转</a>
结果：
界面出现
点击后出现
输入hello再跳转到ceshi.html，若不是弹出提示框“"输入的用户民不正确"。
~~~~~~~~~~~~~~~~~~~~
----------------------------------
JS浏览器对象-screen对象
1.screen对象：
window.screen对象包含有关用户屏幕的信息。
2.属性：
screen.availWidth:可用的屏幕宽度。
screen.availHeight:可用的屏幕高度。
screen.width:屏幕宽度。
screen.height:屏幕高度。
~~~~~~~~~~~~~~~~~
例：
document.write("可用高度："+screen.availHeight+"可用宽度："+screen.availWidth);
document.write("高度："+screen.height+"宽度："+screen.width);
Js浏览器对象的更多相关文章
- JS浏览器对象：window对象、History、Location对象、Screen对象
一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...
- js浏览器对象的属性和方法
1.window对象 /*1.计算浏览器窗口大小*/ //不算滚动条: var width = window.innerWidth; var height = window.innerHeight; ...
- js浏览器对象navigator
移动端通常需要判断当前设备的类型,比如安卓,ios等.输出浏览器的请求代理,可以判断浏览器类型.js代码如下 判断当前浏览器的请求代理 我是出来玩的! <!DOCTYPE html> &l ...
- JS 浏览器对象
1.window对象 1.1 window对象 window对象是BOM的核心.window对象指当前的浏览器窗口 所有JavaScript全局对象 .函数以及变量均自动成为window对象的成员 全 ...
- JS浏览器对象-window对象
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- JS浏览器对象-Screen对象
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- JS浏览器对象-Location对象
1.返回web主机的域名 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JS浏览器对象-History对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS浏览器对象-计时器
setInterval用法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- 《C语言程序设计现代方法》第2章 编程题
7 编写一个程序,要求用户输入一个美金数量,然后显示出如何使用最少的20美元.10美元.5美元和1美元来付款. 提示:将付款金额除以20,确定20美元的数量,然后从付款金额中减去20美元的总金额.对其 ...
- log4j的使用方法
1.Log4j是什么? Log4j可以帮助调试(有时候debug是发挥不了作 用的)和分析 2.Log4j的概念 Log4j中有三个主要的组件,它们分别是 Logger.Appender和Layout ...
- Bzoj 4408: [Fjoi 2016]神秘数 可持久化线段树,神题
4408: [Fjoi 2016]神秘数 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 177 Solved: 128[Submit][Status ...
- spring使用ehcache
spring本身内置了对Cache的支持,之前记录的是基于Java API的ConcurrentMap的CacheManager配置,现使用ehcache实现. 1.声明对cache的支持 <b ...
- HttpWebRequest抓数据遇到的问题
1.有些网站访问速度慢,而且这个网站的连接数(比如全球内衣,另外对于女生各种什么内衣不懂的也可以上去查看了解哈),因为没有即时的关闭,造成抓取页面数据的时候超时也严重. 解决:把相应的HttpWebR ...
- Jsp学习（2）
Jsp的三大指令 (1).include 作用:相当于把当前页面去包含页面 语法: <%@include file="/common/test.jsp" %> 实例如下 ...
- OpenGL中的投影使用
OpenGL中的投影使用 在OpenGL中,投影矩阵指定了可视区域的大小和形状.对于正投影与透视投影这两种不同的投影类型,它们分别有各自的用途. 正投影 它适用于2D图形,如文本.建筑画图等.在它的应 ...
- linux jdk tomcat
linux jdk tomcat mysql的安装 mysql的话,推荐使用命令行安装,而不是用外部的源码去编译,因为简单粗暴. mysql服务:sudo apt-get install mysql- ...
- mysql的优化措施，从sql优化做起
http://geeksblog.cc/2016/06/11/mysql-optimize/ 优化sql的一般步骤 通过show status了解各种sql的执行频率 定位执行效率低的sql语句 通过 ...
- Windows下Memcached在.Net程序中的实际运用(从Memcached客户端Enyim的库的编译到实际项目运用)
1.一点基础概念 2.获取EnyimMemcached客户端的源代码并编译出动态库 3.Memcached的服务器安装(windows server) 4.在web项目中实战 一.基础概念 memca ...