`

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运行，一闪而过的解决办法
评论
发表评论

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

相关推荐

    javascript模拟windowsxp关机效果代码

    6. **代码组织**：良好的代码组织习惯通常体现在模块化和封装上，JavaScript中的函数和对象可以用来封装相关的逻辑。 7. **浏览器兼容性**：由于JavaScript的实现不同，开发者可能需要考虑代码在不同浏览器上的兼容...

    【温故而知新】JavaScript的BOM之Screen:Location:History对象.md

    通过这个例子，我们可以看到如何利用`Screen`对象来获取用户的屏幕尺寸和分辨率信息。 ### 三、Location对象详解 #### 1. 案例演示 下面展示一个简单的`Location`对象使用示例： ```javascript // 创建Location...

    WINDOWS脚本技术参考手册

    2. **对象模型**：详细讲解各种环境下的对象模型，如DOM（Document Object Model）用于JavaScript，以及WScript和ActiveXObject在VBScript中的应用。 3. **事件处理**：阐述如何使用脚本语言响应用户或系统的事件，...

    易语言利用COM对象取网页

    在易语言中，我们可以利用COM对象来调用Windows系统内已有的功能，比如访问Internet Explorer引擎来获取网页源码。 要实现这个功能，我们需要以下步骤： 1. **创建COM对象**：在易语言中，我们使用“创建对象”...

    js调用MSComm32例子

    总的来说，"js调用MSComm32例子"是一个关于JavaScript与Windows系统底层串口通信的实践，虽然在较新的操作系统上可能需要调整，但这个例子仍然是理解JavaScript与系统资源交互的一个重要参考。在实际应用时，应根据...

    javaScript帮助文档，几百种javaScript特效，jquary（中文，三个打包在一起）

    首先，`JavaScript帮助文档`通常包含了JavaScript的基础语法、对象、函数、事件处理、DOM操作等全面的内容。JavaScript的基础部分包括变量、数据类型、运算符、流程控制语句等，这些是编写任何JavaScript代码的基础...

    C++程序与浏览器交互的例子

    这个控件可以暴露一些方法和属性，然后在JavaScript中通过`window.external`对象调用。例如，在C++中定义一个ActiveX控件： ```cpp [uuid(INSERT_YOUR_UUID), dual, ole Automation] class IMyActiveX : public ...

    JavaScript电子教案-1.pdf

    1. **直接调用**：将JavaScript代码直接放入HTML文档中，如显示当前系统时间的例子所示，通过获取Date对象的属性来获取日期和时间信息。 2. **事件调用**：通过绑定事件监听器来响应用户的特定操作，例如点击按钮时...

    javascript 保存文件 （含两种方法）

    在这个例子中，我们创建了一个Blob对象，它代表了要保存的文本数据。然后，我们使用`window.URL.createObjectURL`生成一个指向Blob的URL，最后创建一个`&lt;a&gt;`标签并模拟点击以触发下载。 需要注意的是，FileSaver.js...

    windows_js_1.3

    JavaScript的`XMLHttpRequest`对象或更现代的`fetch` API都是实现Ajax的关键。尽管标签中提到了Ajax，但在“windows_js_1.3”的上下文中，它可能不是直接相关的，但理解Ajax对于全面掌握Web开发是至关重要的。 总之...

    COM接口调用IE工作的例子

    这可以通过使用WebBrowser对象的`Document`属性实现，该属性提供了对当前加载页面的DOM（Document Object Model）的访问。通过遍历DOM，我们可以提取所需的数据，然后使用文件操作函数（如`CreateObject("Scripting....

    JS 中document.URL 和 windows.location.href 的区别

    在JavaScript中，`document.URL`和`window.location.href`都是用来获取当前页面URL的属性，但它们之间存在一些微妙的差异。理解这些差异对于编写精确的前端代码至关重要。 首先，我们要明确`document`和`window`是...

    javascript+CSS实现的目录树

    这个"javascript+CSS实现的目录树"项目就是这样一个示例，它模仿了Windows资源管理器左侧的目录结构，提供了一个用户友好的界面。 JavaScript作为客户端脚本语言，是实现动态效果和交互的关键。在这个项目中，...

    仿windows计算器

    总的来说，“仿windows计算器”项目是一个综合运用JavaScript编程、DOM操作、CSS样式设计以及数学逻辑的好例子，对于学习JS基础和提高实际编程能力都非常有帮助。通过这个项目，开发者不仅可以掌握基本的网页交互...

    activex跟js数据交换例子程序

    3. **JavaScript交互**：在JavaScript中，可以通过`document.getElementById('myOcx')`获取到ActiveX对象，然后调用其方法或访问属性实现数据交换。例如，如果ActiveX控件有一个名为`getData`的方法，你可以这样调用...

    JavaScript读二进制文件并用ajax传输二进制流的方法

    在JavaScript中，处理二进制文件并使用Ajax传输二进制流是一项常见的任务，尤其是在进行文件上传或数据传输时。由于浏览器之间的差异，实现这一功能需要考虑不同的API和兼容性问题。以下是一份详细的指南，涵盖了...

    javaScript设置注册表打印.pdf

    - JavaScript可以通过ActiveXObject与Windows API交互，如`WScript.Shell`对象可以用来读写Windows注册表。在这个例子中，`RegWrite`方法被用来设置`HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\...

    C#与JS联合编程的传值

    这里的 `window.external` 对象提供了一个接口，使得JavaScript能够访问宿主环境中的对象，包括C#方法。 #### 四、总结 通过以上两个具体的例子可以看出，C#与JavaScript之间的数据传递并不复杂，主要依赖于...

    html和c#交互小例子

    - 在HTML页面中，使用JavaScript调用`window.external`对象来调用C#的方法，或者使用`WebBrowser.Document.InvokeScript`在C#中调用JavaScript函数。 4. **示例代码** C#部分： ```csharp public partial class...

    一个简单控件与网页交互的例子

    在JavaScript中，可以使用`new ActiveXObject()`来实例化一个ActiveX对象，并通过其方法和属性来调用控件功能。在这个例子中，可能有一个方法如`callControl(url)`，其中`url`参数就是从网页获取的链接地址。 `控件...

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