我才12岁 ?

很多初学者会对标签云效果（不了解？就我这里的头部那些标签）感兴趣，其实使用 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);

应该很好的理解把，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; i<tagLinks.length; i++) {
            var style0 = styles[0][Math.floor(styles[0].lengthMath.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);

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

标签： JavaScript, Math, 标签云

这篇文章发布于 2008年07月24日，星期四，18:16，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。