`

JavaScript 一些例子

JavaScriptXHTMLHTMLGo浏览器 
阅读更多
1，列表节点操作 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>brother child demo</title>
<script type="text/javascript">
window.onload = function()
{
	var ul = document.getElementById('parent');
	/*  hack for gecko */
	for(var i = 0; i < ul.childNodes.length; i ++)
	{
		if(ul.childNodes[i].nodeType == 3)
			ul.childNodes[i].parentNode.removeChild(ul.childNodes[i]);//删除纯文本节点
	}
	for(var i = 0; i < ul.childNodes.length; i ++)
	{
		ul.childNodes[i].onmouseover = function()		// 定义当鼠标划过时需要执行的程序
		{
			if(this.previousSibling)		// this指针指向当前对象，这里指ul.childNodes[i]
			{
				this.previousSibling.style.backgroundColor = '#ff0'; //黄色
			}
			if(this.nextSibling)
			{
				this.nextSibling.style.backgroundColor = '#ff0'; //
			}
			this.style.backgroundColor = '#f00'; //自身为红色
		}
		ul.childNodes[i].onmouseout = function()		// 定义当鼠标划离时需要执行的程序
		{
			if(this.previousSibling)		// this指针指向当前对象，这里指ul.childNodes[i]
			{
				this.previousSibling.style.backgroundColor = '#fff';
			}
			if(this.nextSibling)
			{
				this.nextSibling.style.backgroundColor = '#fff';
			}
			this.style.backgroundColor = '#fff';
		}
	}
}
</script>
</head>

<body>
	<ul id="parent">
    	<li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
    </ul>
</body>
</html>


2，子节点操作 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>child node demo</title>
<script type="text/javascript">
window.onload=function(){
var ul=document.getElementById("parent");
ul.firstChild.style.backgroundColor='#FFF';
ul.lastChild.style.backgroundColor='#F00';
for(var i=1;i<ul.childNodes.length-1;i++){
ul.childNodes[i].style.backgroundColor='#eee';
if(ul.childNodes[i].nodeType==3)ul.childNodes[i].parentNode.removeChild(childNodes[i]);
}
}
</script>
</head>

<body>
	<h1>parent</h1>
	<ul id="parent">
    	<li>firstChild</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>lastChild</li>
    </ul>
</body>
</html>


3，网页上时间显示 

<!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 getTimeString(){ //
var t = new Date();
var year = t.getFullYear();
var month = t.getMonth()+1; //month从0开始
var d = t.getDate();
var hour = t.getHours();
var minute = t.getMinutes();
var second = t.getSeconds();
var str = year+'-'+month+'-'+d+' '+hour+':'+minute+':'+second;
return str;
}

function refresh(){
document.getElementById("time").innerHTML=getTimeString();
}
window.onload=function(){  //每隔一秒执行一次refresh函数
setInterval(refresh,1000);
}
</script>
</head>
<body>
<h1>自动更新时间,每隔1秒刷新一次</h1>
<div id = "time"></div>
</body>
</html>


4，通过标签名引用文档元素 
<!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(){ //
var links = document.body.getElementsByTagName("a");
for(var i =0 ;i<links.length;i++){
links[i].style.backgroundColor='#FF0';
}
}

</script>
</head>
<body>


<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>


window对象的history属性 

<!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的history属性得到历史记录</title>
<script language="JavaScript">
function historyBack(){
history.back();
}
function historyForward(){
history.forward();
}
function historyGo(){
var n =parseInt(document.getElementById("txtHistory").value);
history.go(n);
}

</script>
</head>
<body>
<h1>history_demo_1<h1>
history_demo_1.html
<a href="history_demo_2.html">history_demo_2</a>

<input type ="text" id="txtHistory" />

<input type ="button" id="btnGo" value="History.go" onclick="historyGo();" />
<br/>
<input type ="button" id="btnBack" value="History.back" onclick="historyBack();" />
<br/>
<input type ="button" id="btnForward" value="History.forward" onclick="historyForward();" />
</body>
</html>


history_demo_2.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的history属性得到历史记录</title>
<script language="JavaScript">
function historyBack(){
history.back();
}
function historyForward(){
history.forward();
}
function historyGo(){
var n =parseInt(document.getElementById("txtHistory").value);
history.go(n);
}

</script>
</head>
<body>
<h1>history_demo_2<h1>
<a href="history_demo_1.html">history_demo_1</a>
<br/>
<a href="history_demo_3.html">history_demo_3</a>

<input type ="text" id="txtHistory" />

<input type ="button" id="btnGo" value="History.go" onclick="historyGo();" />
<br/>
<input type ="button" id="btnBack" value="History.back" onclick="historyBack();" />
<br/>
<input type ="button" id="btnForward" value="History.forward" onclick="historyForward();" />
</body>
</html>


history_demo_3.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的history属性得到历史记录</title>
<script language="JavaScript">
function historyBack(){
history.back();
}
function historyForward(){
history.forward();
}
function historyGo(){
var n =parseInt(document.getElementById("txtHistory").value);
history.go(n);
}

</script>
</head>
<body>
<h1>history_demo_3<h1>
<a href="history_demo_1.html">history_demo_1</a>
<a href="history_demo_2.html">history_demo_2</a>

<input type ="text" id="txtHistory" />

<input type ="button" id="btnGo" value="History.go" onclick="historyGo();" />
<br/>
<input type ="button" id="btnBack" value="History.back" onclick="historyBack();" />
<br/>
<input type ="button" id="btnForward" value="History.forward" onclick="historyForward();" />
</body>
</html>


事件处理的例子 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>addEventListener demo</title>
<style type="text/css">
#demo {
	width:300px;
	height:300px;
	border:1px solid black;
	margin:30px;
}
</style>
<script type="text/javascript">
var div = document.getElementById('demo'); //在浏览器中没有效果？浏览器的问题?
function init()									//注册div的mouseover和mouseout事件处理程序
{
	
	div.addEventListener('mouseover',setBackgroundColor,false);
	div.addEventListener('mouseover',setBorderStyle,false);
	div.addEventListener('mouseout',removeBackgroundColor,false);
	div.addEventListener('mouseout',removeBorderStyle,false);
}
function setBackgroundColor()					//设置div的背景色为红色
{
	document.getElementById('demo').style.backgroundColor = '#f00';
}
function removeBackgroundColor()				//设置div的背景色为白色
{
	document.getElementById('demo').style.backgroundColor = '#fff';
}
function setBorderStyle()						//设置div的边框粗细为10像素
{
	document.getElementById('demo').style.border = '10px solid black';
}
function removeBorderStyle()					//设置div的边框粗细为1像素
{
	document.getElementById('demo').style.border = '1px solid black';
}
window.addEventListener('load',init,false);		//在window的load事件被触发时执行init函数
</script>
</head>

<body>
<h1>addEventListener demo</h1>
<div id="demo"></div>
</body>
</html>
分享到：
| JavaScript的windows对象，document对象一 ...
评论
发表评论

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

相关推荐

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