先看看源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必备利器）
Javascript
<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>
![]()
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述