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 对象允 ...
随机推荐
- 虚拟机安装 gentoo 的时候，通过 filezilla 上传 stage3 文件
最近需要在 虚拟机里面安装gentoo,但因为虚拟机里面自动下载的 stage3 太慢了,所以也在寻找解决办法,最终发现 filezilla 是个好办法. 主要参考 https://www.linux ...
- 关于IK 分词器
准备: 1 创建索引: PUT my_index PUT my_index2 2 先做好映射: PUT /my_index/*/_mapping { "properties": { ...
- SPARK执行流程
RDD运行原理 1.创建 RDD 对象 2.DAGScheduler模块介入运算,计算RDD之间的依赖关系.RDD之间的依赖关系就形成了DAG 3.每一个JOB被分为多个Stage,划分Stage的一 ...
- WIN10下VS CODE 更新后拓展宿主意外终止问题解决方法(每次系统更新都要删除一次git)
S CODE最近更新后,一打开就会出现拓展宿主意外终止的错误,点重新加载等都不好用. 出现这个问题主要是和git有关,做如下操作处理就好: 打开vscode安装文件夹->resource文件夹- ...
- WMI Provider Host
WMI 即 Windows Management Instrumentation(Windows 管理规范)的简写,是 Windows 操作系统的一项内置功能,它为软件和管理脚本提供了一种标准化方法, ...
- compute by 的使用
GROUP BY子句有个缺点,就是返回的结果集中只有合计数据,而没有原始的详细记录.如果想在SQL SERVER中完成这项工作,可以使用COMPUTE BY子句.COMPTE生成合计作为附加的汇总列出 ...
- 使用python实现人脸检测<转载>
原文地址:https://www.cnblogs.com/vipstone/p/8884991.html =============================================== ...
- js 引入外部文件之 script 标签
在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...
- Zabbix笔记
简单检查中的icmppingloss[<target>,<packets>,<interval>,<size>,<timeout>] 结 ...
- Servlet之ServletContext获取web上下文路径、全局参数、和Attribute（域）
1)获取web上下文路径 public void doGet(HttpServletRequest request, HttpServletResponse response) throws Serv ...