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浏览器对象的更多相关文章

  1. JS浏览器对象：window对象、History、Location对象、Screen对象

    一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...

  2. js浏览器对象的属性和方法

    1.window对象 /*1.计算浏览器窗口大小*/ //不算滚动条: var width = window.innerWidth; var height = window.innerHeight; ...

  3. js浏览器对象navigator

    移动端通常需要判断当前设备的类型,比如安卓,ios等.输出浏览器的请求代理,可以判断浏览器类型.js代码如下 判断当前浏览器的请求代理 我是出来玩的! <!DOCTYPE html> &l ...

  4. JS 浏览器对象

    1.window对象 1.1 window对象 window对象是BOM的核心.window对象指当前的浏览器窗口 所有JavaScript全局对象 .函数以及变量均自动成为window对象的成员 全 ...

  5. JS浏览器对象-window对象

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  6. JS浏览器对象-Screen对象

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  7. JS浏览器对象-Location对象

    1.返回web主机的域名 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. JS浏览器对象-History对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS浏览器对象-计时器

    setInterval用法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. arcGis引入Dll报无法嵌入互操作类型错误解决方法

    arcGis引入Dll报“无法嵌入互操作类型"ESRI.ARCGIS.Geometry.PointClass".请改用通用接口."   解决方法:设置引用DLL的“嵌入互 ...

  2. HDOJ/HDU 1984 Mispelling4(删除第n个字符~)

    Problem Description Misspelling is an art form that students seem to excel at. Write a program that ...

  3. （转）Python：self

    原文:http://www.douban.com/group/topic/19376685/ 这是对前面一个php程序员问python方法为什么要手写一个self的回答,当时那个帖非常的热闹,但是下面 ...

  4. （DT系列二）device tree的书写规范

    devicetree的书写规范 下面从节点,属性,reg,ranges,中断控制器等几个方面叙述devicetree的书写规范. 1,dts的基本元素:节点 .dts(或者其include的.dtsi ...

  5. RHEL7磁盘分区挂载和格式化

    安装大数据平台,每台机器需要挂载10个磁盘,用JBOD模式,操作系统为RHEL7.2. 写了两个脚本,format_disk.sh和mount_disk.sh实现磁盘自动分区格式化以及挂载,修改fst ...

  6. 彻底理解position与anchorPoint - Wonderffee's Blog（转）

    引言 相信初接触到CALayer的人都会遇到以下几个问题: 为什么修改anchorPoint会移动layer的位置?CALayer的position点是哪一点呢?anchorPoint与positio ...

  7. 删除用不到的linux内核

    方法1 sudo aptitude purge ~ilinux-image-.*\(\!`uname -r`\) 方法2 sudo apt-get autoremove 方法3 uname -a #使 ...

  8. 使用webdav实现文档共享

    1.PC1上开启WebDAV的服务,添加创建规则:运行访问的路径.运行访问的用户(这里的用户是指PC1上的用户名和密码).访问权限

  9. 跟着百度学PHP[7]会话控制（session与cookie） 1.cookie的设置

    参考慕课网:http://www.imooc.com/learn/26 参考W3C:http://www.w3school.com.cn/php/php_cookies.asp setcookie() ...

  10. php 写一个水仙花数的函数

    判断一个数是不是水仙花数 <?php function is_shuixianhua($i) { $length=strlen($i); $i=(string)$i; $sum=0; for($ ...