南芝 - 我才12岁（飞鸟尽，良弓藏，2011，背包去旅行！） » JavaScript

高亮当前位置

南芝 — Wed, 20 Aug 2008 09:51:02 +0000

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

原理很简单，就是首先获取当前的网址，然后遍历菜单栏，如果当前网址包含了菜单栏内的链接地址，就给这个链接的 class 定义为 here，从而达到高亮的效果。但是我在使用的过程中遇到了一些特殊情况，这段代码就不能满足我的要求了。

先看一下我的菜单栏：


    首页
第二页
第三页


如果我是用了上述 js 代码，那么当我停留在第二页或者第三页的时候首页同时也会被高亮，这并不是我想要的结果，解决方法有二：

第一种方法，我可以在首页的网址后边再加一个 index.php 或者其他的后缀（我的博客现在就这么搞。。。），这样子就可以解决问题，优点是简单，缺点是无法解决更复杂的菜单，比如我在一个使用了 URL 静态化的二级页面，这种方法将无法实施。

第二种方法，采用 split() 获得更精确的定位。



split() 方法用于把一个字符串分割成字符串数组，这里我们将网址通过“/”进行拆分，首先是拆分当前网址：

var windowLocation = window.location.href.split("/");


现在我们将网址拆分成一个数组，然后我们将获得网址最后的部分，但是需要注意的是，http://www.12sui.cn/ 和 http://www.12sui.cn 是两个不同的网址，如果我们漏掉了其中的一个，可能会导致我们的脚本无效，因此我们需要判断这个网址的末尾是否含有“/”。

JS 代码：

var windowLocation = window.location.href.split("/");
var locationLong = windowLocation.length;
var locationHref;
if(windowLocation[locationLong-1] == "") {
    locationHref = windowLocation[locationLong-2];
} else {
    locationHref = windowLocation[locationLong-1];
}


当当前的网址含有“/”也就是 windowLocation 的最后一个为“”的时候，我们就取倒数第二个值，否则我们就取倒数第一个值。取好当前网址的值后，同理我们也要这样子取一下菜单栏的地址：

var menu = document.getElementById("menu");
var menuLinks = menu.getElementsByTagName("a");
for(var i=0; i

这段代码就可以解决我们的问题了，优点是实用性较高，但是代码有些复杂。

赋值运算符“=”在IE浏览器下的bug？

南芝 — Mon, 11 Aug 2008 06:55:40 +0000

昨天在给自己网站做一个效果的时候发现的一个问题，不知道算不算是 IE 的bug。

首先看一下代码：





赋值运算符“=”


测试页面

如我们所想，得到的结果应该是一个正常的结果，可以在这里看到演示。

现在我们将打印移到最下边，看看是什么结果：





赋值运算符“=”


测试页面

可以看到，在 IE 浏览器下（IE6、IE7、IE8 Beta1均包含）所得到的结果都少一个右“)”，而在其他现代浏览器下正常，可以在这里看到演示。

这是不是 IE 浏览器的一个 bug 呢？

JavaScript 实现标签云效果

南芝 — Thu, 24 Jul 2008 10:16:32 +0000

很多初学者会对标签云效果（不了解？就我这里的头部那些标签）感兴趣，其实使用 JavaScript 制作起来是相当容易的，原理很简单，就是随机为每一个标签添加样式，只需要用到 Math.random() 和 Math.floor(x)。

先看 HTML 代码：


    12岁 12岁 12岁 12岁 12岁 12岁 12岁 12岁 12岁 12岁 12岁

然后我们在 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; iMath.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);

应该很好的理解把，Math.floor(x) 是对一个数进行下舍入，而 Math.random() 是在 0 – 1 之间随机取数。

然后我们来思考一下我们的做法是否符合标准，有做到行为和表现分离吗？其实，现在用 JS 控制表现已经是不好了哈，但是 CSS 不能实现，我们也只能使用 JS 了，如果你执意要在 CSS 文件内定义样式，那么可以这么来做：

修改后的 CSS 代码：

.colors0 { color: #FF0000;}

.colors1 { color: #FFCC00;} 
.colors2 { color: #FF9900;} 
.colors3 { color: #FF00CC;} 
.colors4 { color: #0099CC;}

.fontsize0 { font-size:12px;}
.fontsize1 { font-size:14px;}
.fontsize2 { font-size:16px;}
.fontweight0 { font-weight:400;}
.fontweight1 { font-weight:500;}
.fontweight2 { font-weight:600;}
.fontweight3 { font-weight:700;}

修改后的 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("colors0","colors1","colors2","colors3","colors4"); //设定字体的颜色随机的种类
        styles[1] = new Array("fontsize0","fontsize1","fontsize2"); //设定字体的大小随机的种类
        styles[2] = new Array("fontweight0","fontweight1","fontweight2","fontweight3"); //设定字体的粗细随机的种类
        for(var i=0; iMath.random())];
            var style1 = styles[1][Math.floor(styles[1].lengthMath.random())];
            var style2 = styles[2][Math.floor(styles[2].length*Math.random())];
            tagLinks[i].className = style0 + " " + style1 + " " + style2; //设定字体的样式
        }
    }
}

addLoadEvent(tagCloud);

现在已经完成了，也不是很麻烦把，哈哈，其实我还是喜欢使用第一种方法，比较方便。可以在这里看到一个完整的版本。

document.createElement与onclick事件

南芝 — Tue, 01 Jul 2008 03:02:12 +0000

有时候我们需要在页面中动态的创建一些节点，比如标签，然后对其添加一下触发的事件，比如下边这个很简单的例子：

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

这个例子很简单，就是创建一个，然后让用户在点击的时候触发一个事件。

昨天在做 faq 页面的时候，觉得应该把文章里的 pre 标签后边添加一个复制按钮，这样子方便大家复制代码，然后就这么写，但是很显然，情景不一样了，实现起来也没有这么简单，因此想到了下边这个方法：

function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function() {
  oldonload();
  func();
  }
 }
}

function insertAfter(newElement,targetElement) {
 var parent = targetElement.parentNode;
 if (parent.lastChild == targetElement) {
  parent.appendChild(newElement);
 } else {
  parent.insertBefore(newElement,targetElement.nextSibling);
 }
}

function copycode(targetCode) {
 for(var i=0; i

function copypre() {
 var targetCode = document.getElementsByTagName("pre");
 if(document.all) {
  copycode(targetCode);
 }
}

addLoadEvent(copypre);

貌似有些麻烦，我是新手，如果各位有好的方法的话可以和我交流一下。

例子链接分别为：

1.http://www.12sui.cn/test/01/

2.http://www.12sui.cn/test/02/