JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）
DOM编程
1、为什么要学习DOM
(1) 通过dom编程，我们可以写出各种网页游戏
（2）dom编程也是ajax的重要基础
2、DOM编程介绍
DOM = Document Object Model(文档对象模型)
DOM是HTML与XML的应用编程接口(API)
BOM和DOM相辅相成的关系
BOM为纲，DOM为目，DOM是BOM的具体体现
3、DOM对象
3.1 Windows对象
3.1.1 confirm
function test(){
var res= window.confirm("你要删除");
if(res){
window.alert("删除");
}else{
window.alert("放弃删除");
}
}
<input type="button" value="删除" onclick="test()"/>
3.1.2 setInterval();
该函数可以根据指定的时间，循环的执行某个函数，或者表达式需求，请 每隔1s弹出
hello world
function sayHello(){
window.alert("hello");
}
function showTime(){
//在元素间的文本就是通过对象.innerText
document.getElementById("mytime").innerText = new Date().toLocaleString
();
}
setInterval("showTime()",1000);
<span id="mytime"></span>
//需求 小人动态
var n=1; //让静态图片动起来
function runChild(){
//得到myimg对象
var myimg = document.getElementById("myimg");
myimg.src = ((n++%8)+1)+".png";
}
setInterval("runChild",1000);
<img src="1.png" id="myimg"/> //扩展要求：小人走10步就停止。
3.1.3 clearInterval()
var n=1;
var count=0;
//让静态图片动起来
function runChild(){
count++;
if(count==11){
clearInterval(myTimer);
}
//得到myimg对象
var myimg = document.getElementById("myimg");
myimg.src = ((n++%8)+1)+".png";
}
var myTimer=setInterval("runChild",1000);
<img src="1.png" id="myimg"/>
3.1.4 setTimeout();
在指定的毫秒数后调用函数后表达式（但是只调用一次）
需求 再打开页面后，5秒后弹出 hello
setTimeout("sayHello()",5000);
var n=1;
var count=0;
//让静态图片动起来
function runChild(){
count++;
//小人走10步，停5秒
if(count==11){
clearInterval(myTimer);
setTimeout("reRun()",5000); //只调用一次小人走路的方法
count=0;
}
//得到myimg对象
var myimg = document.getElementById("myimg");
myimg.src = ((n++%8)+1)+".png";
}
var myTimer=setInterval("runChild()",1000); function reRun(){
//重新设置调用小人走路的方法，1秒调用一次，同时count在计小人的走几步，走到第11步，就清除myTimer的对象。
myTimer=setInterval("runChild()",1000);
}
<img src="1.png" id="myimg"/>
3.1.5 clearTimeout()
function test(){
window.alert("abc");
}
var mytimer=setTimerout("test()",3000);
//取消timeout
clearTimerout(mytimer);
3.1.6 moveTo() moveBy()
案例：
window.moveTo(100,100); //相对屏幕的左上角移动
window.moveBy(50,50); //相对当前窗口的左上角移动
function test2(){
window.moveTo(100,100);
}
<body>
我是一个窗口
<input type="button" onclick="test2()" value="移动"/>
</body>
3.1.7 resizeTo()resizeBy()
window.resizeTo(100,100); //把窗口调整到100,100
window.resizeBy(100,100); //把窗口再增加 100,100
function test2(){
window.moveTo(200,200); //调整窗口大小
}
<body>
我是一个窗口
<input type="button" onclick="test2()" value="改变大小"/>
</body>
3.1.8 开一个新窗口
function test2(){
//window.open("newWindow.html","_self");//还在原来页面开一个新窗口，替换原页面窗口
//window.open("newWindow.html","_blank"); //重新打开一个新窗口
window.open("newWindow.html","_blank","channelmode=yes,resizable=no,titlebar=no,location=no");
}
<body>
我是一个窗口
<input type="button" onclick="test2()" value="打开新窗口"/>
</body>
3.1.9 opener
父窗口和子窗口通信
//演示子窗口发消息给父窗口
<script language="javascript" type="text/javascript">
var newWindow;
function test2(){
newWindow = window.open("newWindow.html","_blank");
//newWindow.document.info2.value ="哈哈";
} function $(id){
return document.getElementById(id);
} </script>
</head>
<body>
我是一个窗口
<input type="button" value="打开新窗口" onclick="test2();" />
<span id="myspan">消息</span>
</body> //newWindow.html
<script language="javascript" type="text/javascript">
function notify(){
var val = document.getElementById("info").value;
opener.document.getElementById("myspan").innerText =val;
}
</script>
</head>
<body>
我是子窗口
<input type="text" id="info"/><input type="button" value="通知给父窗口" onclick="notify();"/>
</body>
//父窗口与子窗口相互通信
var newWindow;
function test2(){
//newWindow其实就是指向新窗口的引用
newWindow = window.open("newWindow.html","_blank");
//newWindow.document.info.value ="哈哈";
} function test3(){
newWindow.document.getElementById("info").value = $("info2").value;
} function $(id){
return document.getElementById(id);
}
<body>
我是一个窗口
<input type="button" onclick="test2()" value="打开新窗口"/>
<span id="myspan">消息</span>
<input type="text" id="info2"><input type="button" value="通知给子窗口" onclick="test3();"/>
</body> //newWindow.html
<script language="javascript">
function notify(){
var val=document.getElementById("info").value;
opener.document.getElementById("myspan").innerText=val;
}
</script>
我是新窗口
<input type="text" id="info"/> <input type="button" value="通知给父窗口" onclick="nofity();"/>
3.1.10登陆页面，登陆成功后，5秒钟跳转到另一个页面
//login.html
<script language="javascript">
function checkuser(){
if($('uname').value=="shunping"&&$("pwd").value=="123"){
return true;
}else{
$('uname').value ="";
$("pwd").value="";
return false;
}
} function $(id){
return document.getElementById(id);
}
</script>
<form action = "ok.html">
u:<input type="text" id="uname"/><br/>
p:<input type="password" id="pwd"/><br/>
<input type="submit" value="登陆" onclick="return checkuser();"/> //ok.html
<script language="javascript">
//setTimeout("javascript:window.open('manage.html')",5000);
function tiao(){
clearInterval(mytime);
window.open('manage.html',"_self");
}
setTimeout("tiao()",5000); function changeSec(){
//得到myspan的值
$("myspan").innerText =parseInt($("myspan").innerText)-1;
}
var mytime=setInterval("changeSec()",1000); function $(id){
return document.getElementById(id);
}
</script>
登陆成功<span id="myspan">5</span>秒后自动跳转到管理页面 //manage.html
管理页面
3.1.11在浏览器状态栏显示可以移动的文字
var space_num = 0;
var dir =1;
function myScroll(){
var space_my="";
space_num = space_num + 1 * dir;
if(space_num > 50 || space_num <0){
dir = dir * -1;
}
for(var i=0;i<space_num;i++){
space_my = space_my + " ";
}
window.status =space_my + "世界你好！";
} function startIt(){
setInterval("myScroll()",100);
}
<body onload="startIt()">
3.2 histroy对象
作用： 该对象包含客户端访问过的URL信息
//histstroy.back() = histroy.go(-1);
代码： a.html
<a href="b.html">goto b</a> b.html
<script language="javascript">
function back(){
window.alert(history.length);//每次点击一次“返回上级页面”， history.length 就会累加数字 1，除非关闭页面。
history.back();
history.go(-1); //等价于histroy.go(-1);
}
</script>
<a href="#" onclick="back();">返回上级页面</a>
3.3 location对象
<script language="javascript">
function test(){
location.reload();
window.alert(locaiton.href+""+location.hostname+""+location.port);
document.write(location.hostname); //获取网页地址中的主机名
}
</script>
<body>
<input type="button" value="刷新页面" onclick="test()"/>aaaabbs
</body>
3.4 navigator对象 该对象包含当前浏览器的各信息
<script language="javascript">
function test(){
document.write("<p>Name:");
document.write(navigator.appName + "</p>" +navigator.platform+"</p>"+navigator.systemLanguage);//navigator.systemLanguage 只有IE是可使用
}
</script>
<body>
<input type="button" value="刷新页面" onclick="test()"/>aaaabbs
</body>
3.5 screen对象
<script language="javascript">
document.write(screen.height+" "+screen.width);
document.write(screen.availHeight);
</script>
3.6 event对象
3.6.1 直接和某个html控件绑定，比如：
<script language="javascript">
function test(){
//编写代码
}
</script>
<input type="button" value="确定" id="" onclick="test()"/>
3.6.2 通过getElementById() 获取到元素后，再绑定监听，如下：
<script language="javascript">
function test(){
document.write("hello");
}
</script>
<body>
<input type="button" id="but1" value="确定"/>
<script language="javascript">
document.getElementById("but1").onclick=test;
</script>
</body>
3.6.3 如果我们有一个投票系统，但是只能投一次，就不让用了。
<script language="javascript">
function test(){
document.write("你投了一次票");
//解除事件绑定,在IE内核的浏览器中使用
//document.getElementById("but1").detachEvent('onclick',test);
document.getElementById("but1").removeEventListener("click",test,true); //使用在除了IE内核的其他浏览器中
}
</script>
<body>
<input type="button" id="but1" value="投票"/>
<script language="javascript">
//给一个按钮绑定事件
//document.getElementById("but1").attachEvent('onclick',test);
document.getElementById("but1").addEventListener("click",test,true); //使用在除了IE内核的其他浏览器中
</script>
</body>
3.6.4 event.keyCode验证录入的是否为数字，如果不是数字，自动清空，不让录入。
<script language="javascript">
function test(event){
if(event.keyCode<48 || event.keyCode>57){
window.alert("你输入的不是数");
//window.event.returnValue=false;
return false; //清空文本框中的内容
}
}
</script>
<input type="text" onkeypress="return test(event)" id="text1"/>
<input type="button" onclick="test()" value="提交"/>
JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）的更多相关文章
- (转)浏览器对象window,history,location,navigator,screen
1.window对象:当前的浏览器窗口 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成员 全局变量是w ...
- JavaScript的DOM（文档对象）基础语法总结1
---恢复内容开始--- 前言:HTML文档可以说由节点构成的集合,DOM节点有: 1). 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签 ...
- HTML DOM部分---事件 windows对象；
<!--DOM操作windows对象操作 对浏览器进行操作document对象操作 对浏览器内页面文件进行操作 window.shuxing;属性调用格式window.fangfa();方法调用 ...
- 《JAVASCRIPT高级程序设计》window/location/navigator/screen/history对象
如果要在web中使用JAVASCRIPT,那么BOM(浏览器对象模型)毫无疑问是最重要的部分.BOM提供了很多对象,例如,window.location.navigator.screen.histor ...
- JavaScript基础16——js的BOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript基础原始数据类型的封装对象(013)
JavaScript提供了5种原始数据类型:number, string, boolean, null, and undefined.对于前面3个,即number, string, 和boolean提 ...
- Javaweb学习笔记——（三）——————JavaScript基础&DOM基础
day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...
- JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
- JavaScript基础 DOM的操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 一.属性和方法: window对象——浏览器 ...
随机推荐
- s3c2440 移值u-boot-2016.03 第1篇 新建单板
目前除RC版外,最新的就是 u-boot-2016.03.tar.bz2 ,大概看了几个年份的u-boot 发现,现在 更像是 linux kernel .有 menuconfig . 对比2012年 ...
- javascript百度地图添加一个普通标注点（2014-3-8 记）
1.导入jquery.js文件:<script type="text/javascript" src="js/jquery.js"></scr ...
- Java 中System里getProperty(something)
Java 中System里getProperty 方法获得系统参数 Key Description of Associated Value 中文描述 java.version Java Runtime ...
- java 字符串类型String
在本质上,字符串实际上一个char类型的数组,由java.lang.String类来表示,该类具有一系列的属性和方法,提供对字符串的一些操作.除此之外,java还提供了StringBuffer类来处理 ...
- linux centos 6.5 运行MySQL Workbench 6.0找不到 libmysqlclient.so.16和libmysqlclient_r.so.16
找到已安装mysql/lib目录下有类似文件: -rw-r--r-- root root 12月 : libmysqlclient.a lrwxrwxrwx root root 12月 : libmy ...
- 获取ip
需要引用System.Web http://stackoverflow.com/questions/4879837/smart-way-to-get-the-public-internet-ip-ad ...
- http知识
http请求的过程:客户端发起请求,创建端口:http服务器在端口监听客户端请求:http服务器向客户端返回状态和内容. 浏览器搜索自身的DNS缓存-->搜索操作系统自身的DNS缓存(浏览器没有 ...
- JQuery对表格进行排序
添加相关jar <script type="text/javascript" src="jquery-1.1.3.pack.js"></scr ...
- ThinkPHP 3.2 模板中的Angularjs 的变量{{$first}} 无法被解析
ThinkPHP 3.2 模板中的Angularjs 的变量"{{$first}}" 无法被解析, 模板解析冲突,例如在angularjs 的变量"{{$first}}& ...
- CSS样式汇总
1. Overflow: 是否隐藏超出容器范围之外的内容,主要参数包括Hidden(隐藏),Auto(根据容器内容自动显示滚动条),scroll(显示滚动条,即使内容不超出容器范围,也会显示一个边框, ...