1.window对象

1.1 window对象

window对象是BOM的核心、window对象指当前的浏览器窗口

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

全局变量是window对象的属性

全局函数是window对象的方法

甚至HTML DOM的document也是window对象属性之一

1.2 window.innerHeight 浏览器窗口的内部高度

window.innerWidth 浏览器窗口的内部宽度

Window.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <button id="btn" onclick="btnClicked()">按钮</button><br />

         <script>

             document.write("宽度："+window.innerWidth+"，高度："+window.innerHeight);

             function btnClicked(){

                 window.open("index.html","windowname","height=200,width=200,top=100,left=100,toolbar=no,menubar=no");//打开页面设置各属性

                 window.close();//关闭页面

             }

         </script>

     </body>

 </html>

2.计时器

2.1 计时事件

通过使用JavaScript，我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，称之为计时事件。

2.2 计时方法

1>setInterval() 间隔指定的毫秒数不停的执行指定的代码

clearInterval() 方法用于停止setInterval()方法执行的函数代码

2>setTimeout() 暂停指定的毫秒数后执行指定的代码

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码

JiShiQi.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <p id="ptime"></p>

         <button id="btn" onclick="stopTime()">stopTime()</button><br />

         <button id="btn" onclick="myWin()">myWin()</button><br />

         <button id="btn" onclick="myWinXh()">myWinXh()</button><br />

         <button id="btn" onclick="stopWin()">stopWin()</button><br />

         <script>

             var mytime=setInterval(function(){   //不断的执行，1秒刷新

                 getTime()

             },1000);

             function getTime(){

                 var d=new Date();

                 var t=d.toLocaleTimeString();

                 document.getElementById("ptime").innerHTML=t;

             }

             function stopTime(){      //停止执行

                 clearInterval(mytime);

             }

             var win;

             function myWin(){

                 win=setTimeout(function(){    //指定3秒后弹出

                     alert("hello");

                 },3000);

             }

             var winXh;

             function myWinXh(){

                 alert("hello");

                 win=setTimeout(function(){    //指定3秒后循环弹出

                     myWinXh();//自己调用自己循环

                 },3000);

             }

             function stopWin(){              //终止win弹出

                 clearTimeout(win);

             }

         </script>

     </body>

 </html>

3.History对象

3.1 History对象

window.history对象包含浏览器的历史(url)的集合

3.2 History方法

history.back() 与在浏览器点击后退按钮相同

history.firward() 与在浏览器点击向前按钮相同

history.go() 进入历史中的某个页面

index.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body>

         <!--<a href="History.html">跳转到History</a>

         <button id="btn" onclick="goHistory()">goHistory()</button>

         <script>

             function goHistory(){

                 history.forward();  //前进到下个页面

             }

         </script>-->

         <a href="History.html">跳转到History</a>

     </body>

 </html>

History.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

     <!--    <button id="btn" onclick="goindex()">goindex()</button>

         <script>

             function goindex(){

                 history.back();   //后退回上一页面

             }

         </script>

         -->

         <br />

         <form>

             <input type="text" id="username" />

         </form>

         <button id="btn" onclick="safe()">登录</button>

         <script>

             function safe(){

                 var name=document.getElementById("username").value;

                 if(name=="hello"){

                     history.go(-1);     //进入前页面,当前页面为0

                 }else{

                     alert("输入错误");

                 }

             }

         </script>

     </body>

 </html>

4.Location对象

4.1 Location对象

window.location对象用于获得当前页面的地址(url)，并把浏览器重定向到新的页面。

4.2 Location对象的属性

location.hostname 返回web主机的域名

location.psthname 返回当前页面的路径和文件名

location.port 返回web主机的端口

location.protocol 返回所使用的web协议(http://或https://)

location.href 属性返回当前页面的URL

location.assign() 方法加载新的文档

Location.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <button id="btn1" onclick="get1()">gethostname</button>

         <p id="p1"></p>

         <script>

             function get1(){

                 document.getElementById("p1").innerHTML=window.location.hostname;

             }

         </script>

         <button id="btn2" onclick="get2()">getpathname</button>

         <p id="p2"></p>

         <script>

             function get2(){

                 document.getElementById("p2").innerHTML=window.location.pathname;

             }

         </script>

         <button id="btn3" onclick="get3()">getport</button>

         <p id="p3"></p>

         <script>

             function get3(){

                 document.getElementById("p3").innerHTML=window.location.port;

             }

         </script>

         <button id="btn4" onclick="get4()">gethref</button>

         <p id="p4"></p>

         <script>

             function get4(){

                 document.getElementById("p4").innerHTML=window.location.href;

             }

         </script>

         <button id="btn5" onclick="get5()">getassign</button>

         <p id="p5"></p>

         <script>

             function get5(){

                 location.assign("http://www.baidu.com");//方法加载新的文档

             }

         </script>

     </body>

 </html>

5. screen对象

5.1 Screen对象

window.screen对象包含有关用户屏幕的信息

5.2 属性

screen.availWidth 可用的屏幕宽度

screen.availHeight 可用的屏幕高度

screen.Height 屏幕高度

screen.Width 屏幕宽度

Screen.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <script>

             document.write("可用宽度："+screen.availWidth+",  可用高度："+screen.availHeight);

                 document.write("<br />");

             document.write("宽度："+screen.width+",  高度："+screen.height);

         </script>

     </body>

 </html>

JS 浏览器对象的更多相关文章

Js浏览器对象
Js浏览器对象——window对象 1.window对象: (1)window对象是BOM的核心,window对象指当前的浏览器窗口. (2)所有的JavaScript全局对象.函数以及变量均自动成为 ...
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浏览器对象-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"> ...

随机推荐

python一些不错的东西
1 cmd命令行写代码的加强版 ipython 直接用pip安装就可以 php install Ipython 2 不错的数据分析机器语言的 Python(x,y)是一个基于python的科 ...
css字体中px和em的区别
2015-05-28 昨天看到一个不错的纯css3表格样式,看到代码后注意到了作者用的都是em在控制大小.顿时想到了自己习惯使用的px长度单位,就查了关于两者的区别.综合前辈们的总结记录整理下来,以供 ...
MyEclipse编译报：javaScript Validator错误
转自:https://blog.csdn.net/lkpmemory/article/details/8833329 Myeclipse编译报错如下: Errors occurred during t ...
9 MySQL--多表查询
多表查询: http://www.cnblogs.com/linhaifeng/articles/7267596.html 1.多表连接查询 2.符合条件连接查询 3.子查询一.准备表 #建表 cr ...
Linux 文件管理命令语法、参数、实例全汇总（一）
命令:cat cat 命令用于连接文件并打印到标准输出设备上. 使用权限所有使用者语法格式 cat [-AbeEnstTuv] [--help] [--version] fileName 参数 ...
【335】Install PyDev in Eclipse IDE
Reference: Eclipse和PyDev搭建完美Python开发环境(Windows篇) Reference: Install the PyDev plug-in for Eclipse Do ...
PEAR
简介:pear是php扩展与应用库(the php extension and application repository)的缩写.它是一个php扩展及应用的一个代码仓库. 编码规范:参考(http ...
JVM配置参数
.堆内存相关的JVM参数 —Xms 初始堆大小 —Xmx 最大堆大小 —Xss 线程栈大小 —XX:MinHeapFreeRatio 设置堆空间最小空闲比例 —XX:MaxHeapFreeRatio ...
根据车辆品牌获取品牌所属公司，车标logo，创建年份等基本信息
接口:http://api.besttool.cn/?c=Car&a=brand 请求方式:post 参数: appid 请联系博主QQ987332767获取,注明车标接口,测试appid: ...
从上往下打印二叉树(java)
import java.util.ArrayList; import java.util.*; /** public class TreeNode { int val = 0; TreeNode le ...

JS 浏览器对象