javascript学习笔记（八）：浏览器对象
window对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1" onclick="openWin1()">按钮点击打开新窗口页面</button>
</br>
<button id="btn2" onclick="openWin2()">按钮点击打开指定属性的页面</button>
</br>
<button id="btn3" onclick="closeWin()">关闭页面</button>
</br>
<script>
document.write("宽度："+window.innerWidth+"，高度："+window.innerHeight);
function openWin1(){
window.open("xxx.html"); //点击按钮打开新的页面
}
function openWin2(){
//给打开的页面添加属性：名字、长宽、位置、是否有工具栏、菜单栏
window.open("xxx.html","windowname","height=100,width=100,top=100,left=100,toolbar=no,menubar=no"); //点击按钮打开新的页面
}
function closeWin(){
window.close(); //关闭页面
}
</script>
</body>
</html>
时钟对象
一个简单的时钟
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<p id="pDate"></p> <!--设置显示日期的标签-->
<p id="ptime"></p> <!--设置显示时间的标签-->
</br>
<button id="btn" onclick="stopTime()">停止计时</button> <!--设置停止计时的按钮标签-->
<button id="btn1" onclick="delayAlert()">延时弹窗</button> <!--设置延时弹窗的按钮标签-->
<button id="btn2" onclick="alwaysAlert()">不停弹窗</button> <!--设置不停弹窗的按钮标签-->
<button id="btn2" onclick="stopAlert()">停止弹窗</button> <!--设置停止弹窗的按钮标签-->
<script>
var mytime = setInterval(function(){getTime()},1000); //setInterval()间隔指定毫秒数不停执行指定代码，每1000毫秒更新一次
//var mytime = setTimeout(function(){startTime();},1000); //获取当前时间的函数
function getTime(){
var date = new Date();
var d = date.toLocaleDateString(); //获取日期
var t = date.toLocaleTimeString(); //获取日期
document.getElementById("pDate").innerHTML=d;//显示日期
document.getElementById("ptime").innerHTML=t;//显示时间
} //停止计时的函数
function stopTime(){
clearInterval(mytime); //停止setInterval()执行的代码
}
//延时弹窗的函数
function delayAlert(){
var win = setTimeout(function(){alert("延时3000ms弹窗");},3000); //setTimeout()延时指定毫秒数执行代码,延时3000ms弹窗
}
//不停弹窗的函数
var win;
function alwaysAlert(){
alert("弹弹弹，根本停不下来！");
win = setTimeout(function(){alwaysAlert();},1000); //setTimeout()延时指定毫秒数执行代码,延时3000ms弹窗
}
//停止弹窗的函数
function stopAlert(){
clearTimeout(win); //clearTimeout清除指定的setTimeout()执行代码
} </script>
</body>
</html>
history对象
新建一个test.html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript浏览器对象3.html">Hello 测试,点击跳转到javascript浏览器对象3页面！</a>
</br>
<button id="btn" onclick="goForward()">点击按钮向前到下一页面</button> <script>
function goForward(){
history.forward(); //history.forward()打开向前一个页面
}
</script>
</body>
</html>
再建一个javascript浏览器对象3.html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<button id="btn" onclick="goBack()">点击按钮回退到上一页面</button>
</br>
<form>
<input type="text" id="username">
<button id="btn1" onclick="login()">登录</button>
</form>
<script>
function goBack(){
history.back(); //history.back()回退到上一页面
} function login(){
var name = document.getElementById("username").value;
if(name=="jerry"){
history.go(-2); //history.go()指定回到历史的哪个页面，上两个页面是-2，上一页面是-1，当前页面是0，下一页面是1
}else{
alert("输入错误");
}
}
</script>
</body>
</html>
location对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<button id="btn" onclick="getLocation()">点击按钮获取当前页面Location信息</button>
</br>
<button id="btn" onclick="skip()">点击跳转到其他页面</button>
</br>
<p id="pid1"></p>
</br>
<p id="pid2"></p>
</br>
<p id="pid3"></p>
</br>
<p id="pid4"></p>
</br>
<p id="pid5"></p>
</br>
<script>
function getLocation(){
var p1 = window.location.hostname; //获取web主机域名
var p2 = window.location.pathname; //获取当前页面的路径和文件名
var p3 = window.location.port; //获取web主机端口
var p4 = window.location.protocol; //获取web主机所使用的协议(http://或https://)
var p5 = window.location.href; //获取当前页面的URL document.getElementById("pid1").innerHTML = "web主机域名:"+p1;
document.getElementById("pid2").innerHTML = "当前页面的路径和文件名:"+p2;
document.getElementById("pid3").innerHTML = "web主机端口:"+p3;
document.getElementById("pid4").innerHTML = "web主机所使用的协议:"+p4;
document.getElementById("pid5").innerHTML = "当前页面的URL:"+p5; }
function skip(){
location.assign("https://www.baidu.com");//跳转到其他网页
}
</script>
</body>
</html>
screen对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<script>
document.write("高度:"+screen.height+",宽度:"+screen.width+"</br>");
document.write("可用高度:"+screen.availHeight+",可用宽度:"+screen.availWidth);
</script>
</body>
</html>
javascript学习笔记（八）：浏览器对象的更多相关文章
- Javascript学习笔记——操作浏览器对象
Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- JavaScript:学习笔记(10)——XMLHttpRequest对象
JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...
- JavaScript学习笔记八
本文依据慕课网课程<JavaScript进阶>学习整理 第8章 浏览器对象 8-1 window对象 window对象是BOM的核心.window对象指当前的浏览器窗体. wind ...
- javascript学习笔记02--面向对象学习
js面向对象编程 1. javascript 是一种基于对象的编程 object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...
- JavaScript学习笔记之原型对象
本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 1.4（JavaScript学习笔记） window对象的属性及方法
一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...
- JavaScript学习笔记之BOM对象
目录 1.Window 2.Window Screen 3.Window Location 4.Window History 5.Window Navigator 浏览器对象模型(Browser Ob ...
- JavaScript学习笔记之DOM对象
目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...
随机推荐
- 【python】python与正则 re的主要用到的方法列举
[直接上代码] #coding=utf-8#1.先将正则表达式的字符串形式编译为Pattern实例 #2.使用Pattern实例处理文本并获得匹配结果 #3.最后使用Match实例获得消息,进行其他操 ...
- uva-387-暴力枚举
题意: 给你一些小方块,问是不是能组成一个4X4的大方块,所有方块全部要使用,裸枚举 #include <iostream> #include <stdio.h> #inclu ...
- org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI
在重启项目中会遇到[org.springframework.web.servlet.PageNotFound] - No mapping found for HTTP request with URI ...
- Hive 组内计无重复数，追加每条记录后面
今天无意中碰到一个很简单的计算逻辑,但是用hive想了一大会才实现. 示例表数据: 需求逻辑: 给每条记录追加一个字段,用于统计按照p1和p2字段分组后,每个组中的num的数目(去重后的count). ...
- nohup top & 问题： top: failed tty get
执行 nohup top & nohup.out 显示 top: failed tty get +++++++++++++++++ top后台执行显示:top: failed tty get ...
- 转：ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系（从WKID=4326到WKID=102100）
对于非地理专业的开发人员,对与这些生涩的概念,我们不一定都要了解,但是我们要理解,凡是以经纬度为单位的都是地理坐标系,因为它归根结底是一个椭球体,只不过各个国家为了反映该国家所在区域地球的真实形状,而 ...
- Duboo 与springboot整合
https://github.com/apache/incubator-dubbo-spring-boot-project 当采用properties方式时,可以用下方的注解 1.pom <de ...
- Python集合的基本操作
#-*coding:utf-8 -* list =set([2,3,4]) list2 =set([5,3,7]) #交集 #print (list.intersection(list2)) #并集 ...
- iOS 内存管理，ARC
iOS 对象内存释放时机:当对象的引用计数为0时对象被释放. 所以如下代码: __weak NSObject * a = [[NSObject alloc] init]; 这个对象在创建完赋完值后会被 ...
- java通过过滤器 设置跨域允许
前人种树:https://www.cnblogs.com/CBDoctor/p/4235082.htmlhttps://blog.csdn.net/yuting0787/article/details ...