<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器对象</title>
</head>
<body onload="myWin()">
<button id = "btn" onclick="btnClicked()">按钮</button>
<button id = "btnStopTime" onclick="stopTime()">停止计时</button>
<!--<button id = "btn1" onclick="myWin()">开始延时</button>-->
<button id = "btn2" onclick="stopWin()">停止延时</button>
<button id="btn3" onclick="getLoc()">测试location</button>
<p id = "ptime"></p>
<script>
//-------------------------window对象---------------------------//
// 获得当前窗口的尺寸
// window.document.write("宽度"+window.innerWidth+"高度"+window.innerHeight);
// function btnClicked() {
// 打开一个新窗口,并设置新窗口的属性
// 创建一个新的HTML5文件,名为"obindex"
// window.open("obindex.html","windowName","height = 200,width = 200,top = 100,left = 100,toolbar = no,menubar = no");
// window.open("www.baidu.com"); 不能使用
// 关闭一个窗口
// window.close();
// }
/*
// ---------------------------计时器------------------------------//
// 添加计时器
var myTime = setInterval(function(){
getTime();
},1000); //单位是毫秒
function getTime(){
var d = new Date();
var a = d.toLocaleTimeString(); // 转换为字符串
document.getElementById("ptime").innerHTML = a;
}
// 停止计时器
function stopTime(){
document.getElementById("btnBeginTime");
clearInterval(myTime);
}
*/
/*
// 延时执行
var win;
function myWin(){
// 第一种:弹出一次
// win = setTimeout(function(){alert("hello")},3000);
// 第二种:反复弹出
alert("hello");
win = setTimeout(function(){myWin()},3000);
}
// 停止延时
// 先把延时程序在 body中 onload,让它一打开界面就出现,然后点击后停止
function stopWin(){
clearTimeout(win);
}
*/
// -----------------History对象--------------------//
// window.histoty对象包含浏览器的历史(url)的集合
// 方法:
// history.back() - 与在浏览器点击后退按钮相同
// history.forward() - 与浏览器中向前作用相同
// history.go() - 进入历史中的某个界面
/*
使用范例:
<form>
<input type="text" id="userName">
</form>
<button id="btn" onclick="safe()">按钮</button>
<script>
function safe(){
var name = document.getElementById("userName").value;
if (name == "hello"){
history.go(-1)
}else {
alert("输入错误");
}
}
</script>
*/
// -----------------Location对象--------------------//
// window.location 对象用于获得当前页面的地址(url),并把浏览器重定向到新的界面
/*
location.hostname - 返回web主机的域名
location.pathname - 返回当前页面的路径和文件名
location.port - 返回web主机的端口
location.protocol - 返回所使用的web协议(http://或https://)
location.href - 返回当前页面的url
location.assign - 方法加载新的文档
*/
function getLoc(){
// 点击按钮,将本界面的url显示出来(其他的方法使用方式一样,就不列举了)
// document.getElementById("ptime").innerHTML = window.location.href;
// 点击按钮后会跳转到新的界面,和<a>效果类似
location.assign("http://www.baidu.com");
}
// -----------------Screen对象--------------------//
// 包含有关用户的信息
document.write("可用高度"+screen.availHeight+",可用宽度:"+screen.availWidth+"<br>");
document.write("高度:"+screen.height+",宽度:"+screen.width);
</script>
</body>
</html>
JavaScript -- 浏览器对象小结
最新推荐文章于 2023-03-24 16:07:05 发布