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 kvm qemu
首先使用 grep --color -E "vmx|svm" /proc/cpuinfo 检查 cpu 能不能支持虚拟化,注意 biso 里面要开启虚拟化. 内核开启相应选项 [* ...
- 转：Java对象序列化
Java对象序列化 当两个进程在进行远程通信时,彼此可以发送各种类型的数据.无论是何种类型的数据,都会以二进制序列的形式在网络上传送.发送方需要把这个Java对象转换为字节序列,才能在网络上传送:接收 ...
- springBoot基本配置
Spring Boot 基本配置 1.新建maven jar工程 使用依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" ...
- 《算法》第四章部分程序 part 8
▶ 书中第四章部分程序,包括在加上自己补充的代码,图中找欧拉路径 ● 无向图中寻找欧拉路径,只注释了与欧拉环不同的地方 package package01; import edu.princeton. ...
- Nginx配置HTTPS证书网站
前提: 1.主机需要先安装openssl 2.编译安装nginx时,要加上--with-http_ssl_module 这个ssl模块 现在开始配置:(我当时配置时,主机已安装了openss ...
- react-native react-navigation StackNavigator android导航栏 标题下居中
navigationOptions:({ navigation }) => ({ , textAlign:'center' }}) 如上设置即可,如果有返回箭头,那么右边也要加一个 占位的或者设 ...
- delphi多语言
LoadLangFromStrings http://docwiki.embarcadero.com/Libraries/Berlin/en/FMX.Types.TLang http://blog.c ...
- sublime text3：sublime text3本地服务器方式运行文件
网址:https://blog.csdn.net/md1688/article/details/70562381 1.Ctrl + Shift +P,启动Sublime Text的命令行(如果没有需要 ...
- Sql Server 中由数字转换为指定长度的字符串
一个列的数据类型是 int ,从 1 开始自动增长,另一个列是字符串,现在想把 int 列转换成 九个字符,比如 1 转换后就是 000000001 ,添到字符串列,怎么实现呢? set @imaxU ...
- 单件模式——Head First
一.定义 单件模式(Singleton Pattern)确保一个类只有一个实例,并提供一个全局访问点. 二.适用性 1.当类只能有一个实例而且客户可以从一个众所周知的访问点访问它时. 2.当这个唯一实 ...