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对象——浏览器 ...
随机推荐
- quick cocos2dx lua 内存释放
前言 对于内存的优化,网上有很多例子和教程.总体来说,就那么几种解决方案,在最后我会简单提下,这里先说下在quick中,对于图片的处理. 1.查看内存调试信息 对于quick框架的了解,我们可以参考\ ...
- HTML5视频播放在ios下浮动元素无法点击的解决方案
最近许多人在微博上问到在iPad.iPhone.iTouch等设备上使用HTML5播放视频,在视频上方悬浮一个div元素,div内的元素无法点击的情况,而在PC浏览器上没有这个问题. 这个现象是设备特 ...
- JAVA线程同步辅助类CountDownLatch
一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在当前计数到达 ...
- C#连接上sql server 2008 第一次实践
花了一早上的时间,终于连接上了我的本地数据库,我想应该记一下! 先贴个代码: using System; using System.Collections.Generic; using System. ...
- Adobe Edge Animate CC 不再开发更新！
Adobe Edge Animate CC停止开发更新! http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services ...
- jquery mobile 和phonegap开发总结之三跨域加载页面
跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...
- windows下MySQL 5.7+ 解压缩版安装配置方法
方法来自伟大的互联网. 1.去官网下载.zip格式的MySQL Server的压缩包,根据需要选择x86或x64版.注意:下载是需要注册账户并登录的. 2.解压缩至你想要的位置. 3.复制解压目录下m ...
- mac 激活Ultra Edit16
一.文本编辑器UltraEdit 参照Ultra Edit16.10 Mac 破解下载,或者官方下载 Ultra Edit16即可 printf of=/Applications/UltraEdit. ...
- Less入门到上手——前端开发利器<一>
摘录less官网的解释: LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. ...
- MFC编程入门之十（对话框：设置对话框控件的Tab顺序）
前面几节为大家演示了加法计算器程序完整的编写过程,本节主要讲对话框上控件的Tab顺序如何调整. 上一讲为"计算"按钮添加了消息处理函数后,加法计算器已经能够进行浮点数的加法运算.但 ...