首页标签列表实现TagCloud效果

先看看源HTML的结构：

<h3>我的标签</h3>
<div id="MyTag">
    <ul>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/Silverlight/">Silverlight</a>(11)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/%e5%bc%82%e5%b8%b8/">异常</a>(2)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/Tips/">Tips</a>(2)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/Firefox/">Firefox</a>(2)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/VS/">VS</a>(2)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/%e9%97%ae%e9%a2%98/">问题</a>(2)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/%e6%8e%a8%e8%8d%90/">推荐</a>(2)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/%e5%bf%ab%e6%8d%b7%e5%90%af%e5%8a%a8/">快捷启动</a>(1)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/%e5%b7%a5%e5%85%b7/">工具</a>(1)
        </li>
        <li>
            <a href="http://www.cnblogs.com/KevinYang/tag/%e8%b4%9d%e5%a1%9e%e5%b0%94/">贝塞尔</a>(1)
        </li>
        <li>
        <a href="http://www.cnblogs.com/KevinYang/tag/"/>更多</a>
    </li>
    </ul>
</div>

我们要做的就是把所有的<li>节点替换成<span>，即下面这样：

<div id="MyTag">
<span class="level5">
    <a href="http://www.cnblogs.com/KevinYang/tag/Silverlight/">Silverlight</a>(7)
</span>
<span class="level3">
    <a href="http://www.cnblogs.com/KevinYang/tag/%e5%bc%82%e5%b8%b8/">异常</a>(2)
</span>
<span class="level1">
    <a href="http://www.cnblogs.com/KevinYang/tag/Xaml%e8%a7%a3%e6%9e%90/">Xaml解析</a>(1)
</span>
<span class="level3">
    <a href="http://www.cnblogs.com/KevinYang/tag/Xaml/">Xaml</a>(1)
</span>
<span>
    <a href="http://www.cnblogs.com/KevinYang/tag/%e7%89%b9%e6%ae%8a%e7%ac%a6%e5%8f%b7/">特殊符号</a>(1)
</span>
<span>
    <a href="http://www.cnblogs.com/KevinYang/tag/Desklight/">Desklight</a>(1)
</span>
<span>
    <a href="http://www.cnblogs.com/KevinYang/tag/%e6%a1%8c%e9%9d%a2/">桌面</a>(1)
</span>
<span>
    <a href="http://www.cnblogs.com/KevinYang/tag/%e5%bf%ab%e6%8d%b7%e5%90%af%e5%8a%a8/">快捷启动</a>(1)
</span>
<span>
    <a href="http://www.cnblogs.com/KevinYang/tag/%e5%91%bd%e4%bb%a4%e8%a1%8c/">命令行</a>(1)
</span>
<span>
    <a href="http://www.cnblogs.com/KevinYang/tag/Firefox/">Firefox</a>(1)
</span>
<span>
<a href="http://www.cnblogs.com/KevinYang/tag/"/>更多</a>
</span>
</div>

我们先在DW中设置一下不同热度的标签显示的样式，这里我按标签包含的文章数不同分为五个级别，对应五个不同的样式。

<style>
        #MyTag{
        line-height:38.4px;
    clear:both;
    width:200px;
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}
#MyTag span{
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 0px;
}
#MyTag a:link, #MyTag a:visited{
    text-decoration:none;
}
#MyTag a:hover, #tagcloud a:active{
    color: #FF0000;
    background-color:#FFC985;
}
.more a:link{
    color:#000000;
    font-size: 12px;
    font-weight: bold;
}
.level1 a:link{
    color:#CC33FF;
    font-size: 12px;
    right: 10px;
    font-weight: normal;
}
.level2 a:link{
    color:#FF9900;
    font-size: 14px;
    right: 10px;
    font-weight: bold;
}
.level3 a:link{
    color:#669933;
    font-size: 18px;
    right: 10px;
    font-weight: bold;
}
.level4 a:link{
    color:#0000FF;
    font-size: 24px;
    right: 10px;
    font-weight: bold;
}
.level5 a:link{
    color:#FF6600;
    font-size: 30px;
    right: 10px;
    font-weight: bold;
}
</style>

OK，样式设置好了之后，我们再来写Javascript。（推荐Aptana，开发JS必备利器）

<script>
            (function(){
                // 定义Tag所在的Div
                var tagRootElID = "MyTag";
                // 最热门的标签所包含的文章数，动态获取
                var maxPostNum = 0;
                var step = 0;
                var levels = 5;
                // 提取链接和标签所含的文章数
                var postCountRe = /(<a[^>]+>.*<\/a>)\s*(\((\d+)\))?/i;
                function getAllTagInfo(){
                
                    var el = document.getElementById(tagRootElID);
                    var lis = el.getElementsByTagName("li");        
                    var anchorList = [],postNumList=[];    
                    for(var i = 0; i < lis.length; i++){
                        var text = lis[i].innerHTML;                        
                        var matches = text.match(postCountRe);
                        //alert(matches.length);
                        if(!matches){continue;}
                        anchorList.push(matches[1]);
                        var pNum = matches[3] ? Number(matches[3]) : 0;
                        maxPostNum = (maxPostNum < pNum) ? pNum : maxPostNum;
                        postNumList.push(pNum);
                    }
                    step = Math.round(maxPostNum / 4);
                    var tagHTML = "";
                    for(var i = 0; i < postNumList.length; i++){
                        var className = getClassName(postNumList[i]);
                        tagHTML += "<span class=" + className +">"+anchorList[i] + "</span>";
                    }
                    el.innerHTML = tagHTML;
                    
                }
                function getClassName(postCount){
                    if(postCount == 0){return "more";}
                    var level = Math.round(postCount / step);                    
                    switch(level){
                        case 0:return "level1";break;
                        case 1:return "level2";break;
                        case 2:return "level3";break;
                        case 3:return "level4";break;
                        default:return "level5";break;
                    }
                }
                getAllTagInfo();
            })();
        </script>

写得比较简单。效果参见页面左边。不过博客园的标签列表貌似不是全部显示出来的，所以看上去不是特别美观。。。

<script>
            (function(){
                // 定义Tag所在的Div
                var tagRootElID = "MyTag";
                // 最热门的标签所包含的文章数，动态获取
                var maxPostNum = 0;
                var step = 0;
                var levels = 5;
                // 提取链接和标签所含的文章数
                var postCountRe = /(<a[^>]+>.*<\/a>)\s*(\((\d+)\))?/i;
                function getAllTagInfo(){
                
                    var el = document.getElementById(tagRootElID);
                    var lis = el.getElementsByTagName("li");        
                    var anchorList = [],postNumList=[];    
                    for(var i = 0; i < lis.length; i++){
                        var text = lis[i].innerHTML;                        
                        var matches = text.match(postCountRe);
                        //alert(matches.length);
                        if(!matches){continue;}
                        anchorList.push(matches[1]);
                        var pNum = matches[3] ? Number(matches[3]) : 0;
                        maxPostNum = (maxPostNum < pNum) ? pNum : maxPostNum;
                        postNumList.push(pNum);
                    }
                    step = Math.round(maxPostNum / 4);
                    var tagHTML = "";
                    for(var i = 0; i < postNumList.length; i++){
                        var className = getClassName(postNumList[i]);
                        tagHTML += "<span class=" + className +">"+anchorList[i] + "</span>";
                    }
                    el.innerHTML = tagHTML;
                    
                }
                function getClassName(postCount){
                    if(postCount == 0){return "more";}
                    var level = Math.round(postCount / step);                    
                    switch(level){
                        case 0:return "level1";break;
                        case 1:return "level2";break;
                        case 2:return "level3";break;
                        case 3:return "level4";break;
                        default:return "level5";break;
                    }
                }
                getAllTagInfo();
            })();
        </script>