练习一下javascript，顺便给博客页面加个小玩意
一直对这个风格前面的那个椰子树很不爽，正好今天想练习一下javascript就拿它动手了。(每次刷新都会不同哦)中间也学到了一点：不要使用children而是使用childNodes来获得子节点。这样才符合w3c的规范，对FF才有比较好的支持。
不多说了，直接看代码吧。
<!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" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
<style type="text/css">
</style>
</head>
<body>
<div id="divTest">
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
</div>
</div>
<div id="divShow">showhere</div>
<script type="text/javascript" language="javascript" >
//替换随机图片
var alist=document.getElementsByTagName("a");
var acount=alist.length;
var number;
var divShow=document.getElementById("divShow");
var maxCount=0;
for(i=0;i<acount;i++){
if(alist[i].title=="Day link")
{
number = parseInt(15*Math.random());
linString="http://www.cnblogs.com/images/cnblogs_com/justinyoung/titleICO/" + number + ".gif";
divShow.innerText=divShow.innerText + linString + "___";
alist[i].childNodes[0].src=linString;//采用childNodes而不是children是为了兼容FF。采用w3c的方法。
maxCount=maxCount+1;
if (maxCount>14){
break;
}
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
<style type="text/css">
</style>
</head>
<body>
<div id="divTest">
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
<a Title="Day link" href="#"><img src="titleICO_1.gif"></a>
</div>
</div>
<div id="divShow">showhere</div>
<script type="text/javascript" language="javascript" >
//替换随机图片
var alist=document.getElementsByTagName("a");
var acount=alist.length;
var number;
var divShow=document.getElementById("divShow");
var maxCount=0;
for(i=0;i<acount;i++){
if(alist[i].title=="Day link")
{
number = parseInt(15*Math.random());
linString="http://www.cnblogs.com/images/cnblogs_com/justinyoung/titleICO/" + number + ".gif";
divShow.innerText=divShow.innerText + linString + "___";
alist[i].childNodes[0].src=linString;//采用childNodes而不是children是为了兼容FF。采用w3c的方法。
maxCount=maxCount+1;
if (maxCount>14){
break;
}
}
}
</script>
</body>
</html>
keyword:javascript childNodes,javascript children,firefox children,javascript兼容性
浙公网安备 33010602011771号