您的位置：首页 > Web前端 > JavaScript

JavaScript -- 浏览器对象小结

2016-05-03 19:13 561 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航