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 对象允 ...
随机推荐
- Docker的概述
什么是Docker 1.容器技术 在计算机的世界中,容器拥有一段漫长且传奇的历史.容器与管理程序虚拟化(hypervisor virtualization,HV)有所不同,管理程序虚拟化通过中间层将一 ...
- Spring MVC 学习笔记11 —— 后端返回json格式数据
Spring MVC 学习笔记11 -- 后端返回json格式数据 我们常常听说json数据,首先,什么是json数据,总结起来,有以下几点: 1. JSON的全称是"JavaScript ...
- 55.1拓展之边框border-width属性。
效果地址:https://scrimba.com/c/cQpDKkSN HTML code: <div class="border1 borders"></div ...
- php用户名密码
http://112.124.47.59:8090/activity/index/free?mobile=15652701923&tcode=f9380859085200714&s=7 ...
- JavaScript取消默认控件并添加新控件（DOM编程艺术第11章）
这一章实现的这个功能我研究了好久,这个思路我感觉已经是现在的我要膜拜的了,我感觉我的逻辑还是有些问题. 第一个问题:vid.height与vid.videoHeight vid.height = vi ...
- <基础> PHP 字符串操作
explode — 使用一个字符串分割另一个字符串 array explode ( string $delimiter , string $string [, int $limit ] ) implo ...
- 功能测试-UI测试思考点
界面是否美观 元素大小 界面元素是否对齐方式统一 界面字体属性是否正确 界面链接及触发动作( 链接的地址是否正确,不允许存在死链的情况 链接打开方式,当前页面还是新开页面 鼠标点击后的颜色是否美观,不 ...
- antd-mobile使用报错
在第一次使用时,按照官网的进行配置,完了报错找不到antd-mobile下面的css 解决方法来源于 :https://github.com/ant-design/ant-design-mobile/ ...
- AIR文件操作(二):使用文件对象操作文件和目录
转载于:http://www.flashj.cn/wp/air-file-operation2.html 文件对象是啥?文件对象(File对象)是在文件系统中指向文件或目录的指针.由于安全原因,只在A ...
- upupw
https://sourceforge.net/projects/upupw/files/ANK/