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.屏幕宽度。
screen.height:屏幕高度。
~~~~~~~~~~~~~~~~~
例:
document.write("可用高度:"+screen.availHeight+"可用宽度:"+screen.availWidth);
document.write("高度:"+screen.height+"宽度:"+screen.width);