Jeremy Keith 在《JavaScript DOM编程艺术》一书中为我们做了一个小的例子，例子中使用了一段简单的高亮当前位置的 js 代码，代码如下：
function highlightPage() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("navigation")) return false;
var nav = document.getElementById("navigation");
var links = nav.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
var linkurl = links[i].getAttribute("href");
var currenturl = window.location.href;
if (currenturl.indexOf(linkurl) != -1) {
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
原理很简单，就是首先获取当前的网址，然后遍历菜单栏，如果当前网址包含了菜单栏内的链接地址，就给这个链接的 class 定义为 here，从而达到高亮的效果。但是我在使用的过程中遇到了一些特殊情况，这段代码就不能满足我的要求了。
先看一下我的菜单栏：
<div id="menu">
<ul><li><a href="http://www.12sui.cn/">首页</a></li><li><a href="http://www.12sui.cn/2">第二页</a></li><li><a href="http://www.12sui.cn/3">第三页</a></li></ul>
</div>
如果我是用了上述 js 代码，那么当我停留在第二页或者第三页的时候首页同时也会被高亮，这并不是我想要的结果，解决方法有二：
第一种方法，我可以在首页的网址后边再加一个 index.php 或者其他的后缀（我的博客现在就这么搞。。。），这样子就可以解决问题，优点是简单，缺点是无法解决更复杂的菜单，比如我在一个使用了 URL 静态化的二级页面，这种方法将无法实施。
第二种方法，采用 split() 获得更精确的定位。
继续阅读 »
昨天在给自己网站做一个效果的时候发现的一个问题，不知道算不算是 IE 的bug。
首先看一下代码：
<!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=gb2312" />
<title>赋值运算符“=”</title>
</head>
<body>
<div style="width:100%; height:600px;">测试页面</div>
</body>
</html>
<script>
var bodys = document.getElementsByTagName("body");
var cur_num = Math.floor(34*Math.random());
var cur_style = "url(http://www.jolintown.com/site/cursor/cur/" + cur_num + ".cur)";
alert(cur_style);
bodys[0].style.cursor = cur_style;
</script>
如我们所想，得到的结果应该是一个正常的结果，可以在这里看到演示。
继续阅读 »
很多初学者会对标签云效果（不了解？就我这里的头部那些标签）感兴趣，其实使用 JavaScript 制作起来是相当容易的，原理很简单，就是随机为每一个标签添加样式，只需要用到 Math.random() 和 Math.floor(x)。
先看 HTML 代码：
<div id="tags_cloud">
<a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a>
</div>
然后我们在 JavaScript 里边这么写：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function tagCloud() {
if(document.getElementById("tags_cloud")) {
var tags = document.getElementById("tags_cloud");
var tagLinks = tags.getElementsByTagName("a");
var styles = new Array();
styles[0] = new Array("#FF0000","FFCC00","FF9900","#0099FF","#999999"); //设定字体的颜色随机的种类
styles[1] = new Array("12px","14px","16px"); //设定字体的大小随机的种类
styles[2] = new Array("400","500","600","700"); //设定字体的粗细随机的种类
for(var i=0; i<tagLinks.length; i++) {
tagLinks[i].style.color = styles[0][Math.floor(styles[0].lengthMath.random())]; //设定字体的颜色
tagLinks[i].style.fontSize = styles[1][Math.floor(styles[1].lengthMath.random())]; //设定字体的大小
tagLinks[i].style.fontWeight = styles[2][Math.floor(styles[2].length*Math.random())]; //设定字体的粗细
}
}
}
addLoadEvent(tagCloud);
继续阅读 »
有时候我们需要在页面中动态的创建一些节点，比如 <a> 标签，然后对其添加一下触发的事件，比如下边这个很简单的例子：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function create() {
var bodys = document.getElementsByTagName("body");
var link = document.createElement("a");
link.href = "#";
var text = document.createTextNode("创建一个节点");
link.appendChild(text);
link.onclick = function() {
alert("哈哈");
return false;
}
bodys[0].appendChild(link);
}
addLoadEvent(create);
继续阅读 »