JavaScript学习记录总结(十)——几个重要的BOM对象
2015-06-30 15:36
841 查看
一、弹出框
<script type="text/javascript">
window.onload=function(){
window.alert("msg alert");
var msg =window.prompt("prompt", "hello"); //msg hello 或者null
alert(msg);
var msg1=window.confirm("hahah"); //msg1 true false;
alert(msg1);
//alert prompt confirm
};
</script>
二、open
<script type="text/javascript">
function openW(){
//定义自己的外观
window.open("window2.html","mypage","width=500,height=500,titlebar=yes,resizable=yes",true);
}
</script>
</head>
<body>
<input type="button" onclick="openW()" value="打开新窗体"/>
</body>
三、window.setInterval
<script type="text/javascript">
//window.self属性 代表当前的窗体
//window.setInterval("函数名()",时间戳); 每隔时间戳 执行一次函数
var id=window.self.setInterval("clock()",1);
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
}
function cls(){
window.self.clearInterval(id);
}
</script>
</head>
<body>
<!-- 输入框 -->
<input type="text" id="clock" size="35" />
<input type="button" value="清空操作" onclick="cls()"/>
</body>
四、window.setTimeout
<script type="text/javascript">
//window.self属性 代表当前的窗体
//window.setTimeout("函数名()",时间戳); 隔时间戳后 执行一次函数
var id=window.self.setTimeout("clock()",3000);
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
//id=window.self.setTimeout("clock()",3000);
}
function cls(){
window.clearTimeout(id);
}
//面试题
</script>
</head>
<body>
<!-- 输入框 -->
<input type="text" id="clock" size="35" />
<input type="button" value="清空操作" onclick="cls()"/>
</body>
五、Location
<script type="text/javascript">
function goUrl()
{
alert(window.location.host);
alert(window.location.hostname);
alert(window.location.port);
alert(window.location.protocol);
alert(window.location.search);
window.location.href="http://www.baidu.com";
}
</script>
</head>
<body>
<input type="button" value="发送新的请求" onclick="goUrl()"/>
</body>
六、History
1.html
<body>
<a href="2.html">进入2.html</a>
<a href="./l.html?name=chj">进入l.html</a>
</body>
2.html
<body>
<!-- <a href="javascript:history.back()">返回1.html</a> -->
<a href="javascript:history.go(-1)">返回1.html</a>
<a href="3.html">进入3.html</a>
<!-- <a href="javascript:history.forward()">前进</a> -->
<a href="javascript:history.go(1)">前进</a>
</body>
3.html
<body>
This is my HTML page. <br>
<!-- <a href="javascript:history.back()">返回2.html</a> -->
<a href="javascript:history.go(-1)">返回12.html</a>
</body>
<script type="text/javascript">
window.onload=function(){
window.alert("msg alert");
var msg =window.prompt("prompt", "hello"); //msg hello 或者null
alert(msg);
var msg1=window.confirm("hahah"); //msg1 true false;
alert(msg1);
//alert prompt confirm
};
</script>
二、open
<script type="text/javascript">
function openW(){
//定义自己的外观
window.open("window2.html","mypage","width=500,height=500,titlebar=yes,resizable=yes",true);
}
</script>
</head>
<body>
<input type="button" onclick="openW()" value="打开新窗体"/>
</body>
三、window.setInterval
<script type="text/javascript">
//window.self属性 代表当前的窗体
//window.setInterval("函数名()",时间戳); 每隔时间戳 执行一次函数
var id=window.self.setInterval("clock()",1);
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
}
function cls(){
window.self.clearInterval(id);
}
</script>
</head>
<body>
<!-- 输入框 -->
<input type="text" id="clock" size="35" />
<input type="button" value="清空操作" onclick="cls()"/>
</body>
四、window.setTimeout
<script type="text/javascript">
//window.self属性 代表当前的窗体
//window.setTimeout("函数名()",时间戳); 隔时间戳后 执行一次函数
var id=window.self.setTimeout("clock()",3000);
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
//id=window.self.setTimeout("clock()",3000);
}
function cls(){
window.clearTimeout(id);
}
//面试题
</script>
</head>
<body>
<!-- 输入框 -->
<input type="text" id="clock" size="35" />
<input type="button" value="清空操作" onclick="cls()"/>
</body>
五、Location
<script type="text/javascript">
function goUrl()
{
alert(window.location.host);
alert(window.location.hostname);
alert(window.location.port);
alert(window.location.protocol);
alert(window.location.search);
window.location.href="http://www.baidu.com";
}
</script>
</head>
<body>
<input type="button" value="发送新的请求" onclick="goUrl()"/>
</body>
六、History
1.html
<body>
<a href="2.html">进入2.html</a>
<a href="./l.html?name=chj">进入l.html</a>
</body>
2.html
<body>
<!-- <a href="javascript:history.back()">返回1.html</a> -->
<a href="javascript:history.go(-1)">返回1.html</a>
<a href="3.html">进入3.html</a>
<!-- <a href="javascript:history.forward()">前进</a> -->
<a href="javascript:history.go(1)">前进</a>
</body>
3.html
<body>
This is my HTML page. <br>
<!-- <a href="javascript:history.back()">返回2.html</a> -->
<a href="javascript:history.go(-1)">返回12.html</a>
</body>
相关文章推荐
- Class com.googlecode.jsonplugin.JSONWriter can not access a member of class*
- HTML5 Json解析
- ExtJs 入门教程十一[网格面板:GridPanel]
- jsp两种注释区别,<%%>和<%!%>的区别
- JS合并的必要性分析
- 使用js的ajax方法读取txt文本里面的JSON数据并追加到Html元素节点上
- js 同一种类 变色
- 菊花文javascript实现
- JavaScript获取页面宽度高度大全
- js的定时器问题
- ecshop 首页图片广告轮播修改flash改为js-方法很简洁
- javascript中filter方法
- JS更换图片
- RapidJSON 代码剖析(四):优化 Grisu
- 利用JavaScript和Google API在网页中加入地图
- gruntjs
- Newtonsoft.Json高级用法
- .net使用Newtonsoft.Json.dll解析json过程的几种特殊情况处理
- JS实现简单的图书馆享元模式实例
- JS建造者模式基本用法实例分析