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 对象允 ...
随机推荐
- MySql 索引 查询 优化
官方文档: https://dev.mysql.com/doc/refman/5.7/en/explain-output.html#explain_rows type: 连接类型 system 表只有 ...
- java.lang.ClassNotFoundException: org.thymeleaf.spring5.view.ThymeleafViewRe。。。。。。。。。。。
直接上代码问题: java.lang.IllegalStateException: Failed to introspect Class [org.springframework.boot.autoc ...
- 转：JSON 获取属性值的方法
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript(Standard ECMA-262 ...
- ios8.1.1系统怎么取消下划线
http://zhidao.baidu.com/link?url=y-3oAiOsuCSvoCD-7H2Uvgl_UI1BQQuNvA2jHKCRAGmZSH7_RrwDijKtRouMBa5yF_L ...
- spark快速大数据分析
从上层来看,每个Spark 应用都由一个驱动器程序(driver program)来发起集群上的各种并行操作.驱动器程序包含应用的main 函数,并且定义了集群上的分布式数据集,还对这些分布式数据集应 ...
- 火狐Firefox浏览器所有历史版本下载地址
Mozilla Firefox 频繁的更新,导致许多好用的插件在更新后不能兼容,而且想换回低版本还不容易啊,官网上只看到最新版本和前一个版本的下载. 这里为大家提供了一个下载链接,是来自Mozilla ...
- SonarQube与Jenkins结合提高代码质量
首先,为什么需要SonarQube? 1.WriteClean Code 1)全局健康报告 2)关注新增的问题 3)强制QualityGate 4)Issue详情及建议- 详情参考:https:/ ...
- J2SE 8的流库 --- 收集处理结果
分类:简单计算, 收集到映射表中 , 群组和分组, 下游收集器, 约简操作 reduce() ArrayList<String> arrayList = new ArrayList< ...
- 在Ubuntu下利用Eclipse调试FFmpeg《转》
参考原贴,其中编译命令有略微改动. 第一步:准备编译环境 #sudoapt-get update #-dev libspeex-dev libtheora-dev libtool libva-dev ...
- iOS设计标注处理方法
如果设计只给3x的设计图 在做2x适配时有几种处理方法: 按逻辑像素,大小不变,比如3x手机上一张图的逻辑像素设为24x24point,那么2x手机上这张图的大小也设为24x24point,一般适用于 ...