`

JavaScript的windows对象，document对象一些例子

WindowsJavaScriptXHTMLHTML浏览器 
阅读更多
window对象的方法，resizeTo和moveTo
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>window的方法</title>
<script language="JavaScript">
function resizeWindow(){
resizeTo(300,200);

window.status ="success"; //设置状态栏成功，浏览器窗口的左下方
}

function moveWindow(){
moveTo(200,100); //窗口的位置

}


</script>
</head>
<body>

<input type ="button" id="btnResize" value="Resize window" onclick="resizeWindow();" />
<br/>
<input type ="button" id="btnMove" value="Move window" onclick="moveWindow();" />

</body>
</html>

window对象的document属性 
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>window的document属性</title>
<script language="JavaScript">

function modifyDocumentTitle(){ //改变文档标题
var title = document.getElementById("txtTitle").value;
document.title=title;
document.getElementById("title").innerHTML=title;
}
document.write('<h1 id="title">'+document.title+'</h1>');
</script>
</head>
<body>

<h1>document对象</h1>

<input type ="text" id="txtTitle" />
<input type = "button" id="btnEdit" value="modify document title" onclick ="modifyDocumentTitle();" />

</body>
</html>


location属性
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>location属性得到html的url地址</title>
<script language="JavaScript">
function doJump(){
var url=document.getElementById("txtURL").value;
window.location.href=url; //页面跳转至url

alert(window.location); 
</script>
</head>
<body>
<input type ="text" id="txtURL" />
<br/>
<input type ="button" id="btnJump" value="Jump" onclick="doJump();" />
</body>
</html>


navigator属性 

<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>window的navigator属性</title>

</head>
<body>

<h1>取得用户浏览器的信息</h1>
<script language="JavaScript">

document.write("web浏览器名称:"+navigator.appName);
document.write("<br/>浏览器的版本号:"+navigator.appVersion);
document.write("<br/>userAgent:"+navigator.userAgent);
document.write("<br/>浏览器的代码名:"+navigator.appCodeName);
document.write("<br/>运行浏览器的硬件平台:"+navigator.platform);

</script>
</body>
</html>


<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>set timeout</title>
<script language="JavaScript">

window.onload=function(){
document.getElementById("btn").onclick=function(){
document.getElementById("btn").disabled=true;
window.setTimeout(function(){
document.getElementById("btn").disabled=false;},5000);
}
}

</script>
</head>
<body>
<input type = "button" id="btn" name ="btn" value="click me" />
</body>
</html>


<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>set interval</title>
<script language="JavaScript">


var i=0;
function refreshContainer(){
i++;
document.getElementById("container").innerHTML=i/100;} //??????????

window.onload=function(){
var interval=window.setInterval(refreshContainer,1); //每隔1毫秒更新一次
document.getElementById("btnStop").onclick=function(){
window.clearInterval(interval);//消除
}

}

</script>
</head>
<body>


<span id="container">0</span>
<input type = "button" id="btnStop" name ="btnStop" value="stop" />
</body>
</html>


<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>window的screen属性</title>
<script language="JavaScript">
var width = screen.availWidth;
var height=screen.availHeight;
document.write("屏幕的宽度:"+width);
document.write("<br/>屏幕的高度:"+height);
window.resizeTo(400,200);
window.moveTo(width/2-200,height/2-100);



</script>
</head>
<body>

<h1>取得客户端显示器的参数</h1>


</body>
</html>


使用document的cookie属性 

<?xml version = "1.0" encoding="utf-8" ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>使用document的cookie属性</title>
		<script type = "text/javascript">
			var now = new Date();
			var hour = now.getHours();
			var name ;
			if(hour<12){
				document.write("<h1> Good morning ");
			}
			else{
				hour = hour - 12;
				if(hour<6) 	document.write("<h1> Good afternoon ");
				else 	document.write("<h1> Good evening ");
			}
			if(document.cookie){ //查看是否有cookie
				var myCookie = unescape(document.cookie); //将十六进制变回web可显示的字符
				var cookieTookens = myCookie.split("=");
				name = cookieTookens[1]; //取出cookie的值
				
			}
			else {//if there is no cookie,ask user to input name
				name = window.prompt("Please enter your name:","zhoujunmei");
				document.cookie="name="+escape(name); //escape将任何非字母字符变成相应的十六进制转义序列，%XX，如空格为%20
			}
			document.writeln(name+",welcome to JavaScript</h1>");
			document.writeln("<a href = 'javascript:wrongPerson()'>"+"Click here if you are not"+name+"</a>");
			
			function wrongPerson(){
				document.cookie ="name=null;"+" expires=Thu,01-Jan-95 00:00:01 GMT";
				location.reload();
				
			}
			
			 
			
		</script>
	</head>
	<body>
		<p> Click Refresh to run the script again</p>
	</body>
</html>


document的images属性 

<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>文档的图像</title>
<script language="JavaScript">

function addImageBorder(){ //
for(var i=0;i<document.images.length;i++){
document.images[i].style.border='3px solid #000'; //style是一个对象，
}
}
</script>
</head>
<body>

<h1>document对象的images属性是一个数组</h1>
<img src="test.jpg" alt="荷花" width="150" height="80" />
<img src="test.jpg" alt="荷花" width="150" height="80" />
<img src="test.jpg" alt="荷花" width="150" height="80" />
<img src="test.jpg" alt="荷花" width="150" height="80" />

<input type = "button" id="btnEdit" value="add image border" onclick ="addImageBorder();" />

</body>
</html>




document的links属性 
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>文档的超链接</title>
<script language="JavaScript">

function modifyLinkColor(){ //
for(var i=0;i<document.links.length;i++){
document.links[i].style.backgroundColor='#FF0'; //style是一个对象，
}
}
</script>
</head>
<body>

<h1>document对象的links属性是一个数组,此外还有forms属性也是数组</h1>
<a href ="http://www.sina.com">新浪网站</a>
<a href ="http://www.sina.com">新浪网站</a>
<a href ="http://www.sina.com">新浪网站</a>
<input type = "button" id="btnEdit" value="modify links bgcolor" onclick ="modifyLinkColor();" />
</body>
</html>



<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>DOM实例</title>
<script language="JavaScript">


window.onload=function(){
var topic = document.getElementById("topic");
alert(topic.innerHTML);}

</script>
</head>
<body>
<h1>通过id引用节点,每个节点的id是唯一的</h1>
<h2 id="topic">topic</h2>
<p>something<strong>important</strong></p>

</body>
</html>


<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>DOM实例，name</title>
<script language="JavaScript">

function showCheckedData(){
var elms = document.getElementsByName("demo");
var values=[];//数组
for(var i=0;i<elms.length;i++){
if(elms[i].checked){
values.push(elms[i].value); //
}
}
alert(values.join(',')); //数组转化为字符串
}
</script>
</head>
<body>
<h1>通过节点的name属性，引用节点，</h1>
<form action="" method ="post">
<label>1:<input type = "checkbox" name ="demo" value="1" /></label>
<label>2:<input type = "checkbox" name ="demo" value="2" /></label>
<label>3:<input type = "checkbox" name ="demo" value="3" /></label>
<label>4:<input type = "checkbox" name ="demo" value="4" /></label>
<br/>
<input type="button" value="show checked data" onclick="showCheckedData();" />
</form>

</body>
</html>



  • 大小: 32.3 KB
  • 大小: 15.7 KB
分享到：
| cmd运行，一闪而过的解决办法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Java语言基础下载

    document中三个主要的对象 539 文档对象的基本元素 541 窗口及输入输出 544 输出流及文档对象 546 简单的输入、输出例子 547 内容总结 551 独立实践 552 第二十八章： Servlet 553 学习目标 553 Java Servlet概述 ...

    JavaScript高级教程

    第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................

    js使用小技巧

    对象绑定事件 document.all.xxx.detachEvent("onclick",a); 插件数目 navigator.plugins 取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 ...

    asp.net知识库

    在ASP.NET中使用WINDOWS验证方式连接SQL SERVER数据库 改进ADO.Net数据库访问方式 ASP.NET 2.0 绑定高级技巧 简单实用的DataSet更新数据库的类+总结 [ADO.NET]由数据库触发器引发的问题 为ASP.NET封装的SQL数据库...

    亮剑.NET深入体验与实战精要2

    读者可以在欣赏一个个有趣例子的过程中，不知不觉具备开发真正商业项目的能力。 本书集实用性、思想性、趣味性于一体，内容共分为技术基础总结、系统架构设计思想及项目实战解析三部分，随书所附光盘收录大量实例...

    亮剑.NET深入体验与实战精要3

    读者可以在欣赏一个个有趣例子的过程中，不知不觉具备开发真正商业项目的能力。 本书集实用性、思想性、趣味性于一体，内容共分为技术基础总结、系统架构设计思想及项目实战解析三部分，随书所附光盘收录大量实例...

    XML轻松学习手册--XML肯定是未来的发展趋势，不论是网页设计师还是网络程序员，都应该及时学习和了解

    DOM全称是document object model(文档对象模型)，DOM是用来干什么的呢？假设把你的文档看成一个单独的对象，DOM就是如何用HTML或者XML对这个对象进行操作和控制的标准。 面向对象的思想方法已经非常流行了，在编程...

    XML学习指南 电子书

    第9章介绍怎样通过可用于任意XML文档类型且高度灵活的编程对象，即众所周知的XML文档对象模型（XML Document Object Model），编写脚本来在HTML页中显示XML文档。注意 在本书中，使用术语“页面（page）”来表示HTML...

    XML学习指南

    第9章介绍怎样通过可用于任意XML文档类型且高度灵活的编程对象，即众所周知的XML文档对象模型（XML Document Object Model），编写脚本来在HTML页中显示XML文档。注意 在本书中，使用术语“页面（page）”来表示HTML...

    XML学习指南经典中文版

    第9章介绍怎样通过可用于任意XML文档类型且高度灵活的编程对象，即众所周知的XML文档对象模型（XML Document Object Model），编写脚本来在HTML页中显示XML文档。注意 在本书中，使用术语“页面（page）”来表示HTML...

    ASP.NET2.0高级编程(第4版)1/6

    本书适合有一些基础的ASP.NET初级程序员以及准备迁移到ASP.NET 2.0的编程老手。该书与《ASP.NET 2.0入门经典（第4版）》及其早期版本，曾影响到无数中国Web程序员。 目录 第1章 ASP.NET 2.0概述1 1.1 简史1 1.2 ...

    2.ASP.NET.2.0.高级编程(第4版) [1/7]

    5.11.2 使用ListBox控件的例子 133 5.11.3 给集合添加条目 136 5.12 CheckBox服务器控件 136 5.12.1 确定复选框是否被选中 138 5.12.2 给复选框赋值 138 5.12.3 排列复选框的文本 138 5.13 CheckBoxList服务器...

    ASP.NET常用代码

    &lt;script language="javascript" for="document" event="onkeydown"&gt; if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event....

Magicbox
Global site tag (gtag.js) - Google Analytics