本站所引用的固定标签云实例，在这里分享给大家。
该标签云的实现主要是从两方面着手：
1、随机颜色 方法延伸js获取随机颜色
function GetColor()
{
var r = Math.floor(Math.random() * 255).toString(16);
var g = Math.floor(Math.random() * 255).toString(16);
var b = Math.floor(Math.random() * 255).toString(16);
r = r.length == 1 ? "0" + r : r;
g = g.length == 1 ? "0" + g : g;
b = b.length == 1 ? "0" + b : b;
return "#" + r + g + b;
}
2、随机字体大小（本文固定几个字体大小随机显示）
[0.8,0.9,1,1.5,0.8,0.9,1][Math.floor(Math.random()*7)]//是0--6之间随机显示大小，当然你可以根据你的喜好来调。
<!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>
<style>
.tagCloud{width:280px;margin:0 auto;}
.tagCloud i {border-left: 1px solid #EEEEEE;display: inline-block;font-size: 0;margin: 0 5px;width: 1px;}
.tagCloud a {line-height: 15px;text-decoration: none;}
</style>
</head>
<body>
<div class="tagCloud" id="tagCloud"><h2 class="rh2">热门标签</h2><div id="ctl00_ContentPlaceHolder1_could_div"><a href="s.aspx?tag=3dsmax">3dsmax</a><i></i><a href="s.aspx?tag=blend3">blend3</a><i></i><a href="s.aspx?tag=ckeditor">ckeditor</a><i></i><a href="s.aspx?tag=css">css</a><i></i><a href="s.aspx?tag=finder">finder</a><i></i><a href="s.aspx?tag=iframe">iframe</a><i></i><a href="s.aspx?tag=js">js</a><i></i><a href="s.aspx?tag=js控制">js控制</a><i></i><a href="s.aspx?tag=js正则">js正则</a><i></i><a href="s.aspx?tag=kindeditor">kindeditor</a><i></i><a href="s.aspx?tag=LazyLoad">LazyLoad</a><i></i><a href="s.aspx?tag=net">net</a><i></i><a href="s.aspx?tag=Perl风格">Perl风格</a><i></i><a href="s.aspx?tag=ps">ps</a><i></i><a href="s.aspx?tag=RegExp">RegExp</a><i></i><a href="s.aspx?tag=repeater">repeater</a><i></i><a href="s.aspx?tag=SEO">SEO</a><i></i><a href="s.aspx?tag=Silverlight">Silverlight</a><i></i><a href="s.aspx?tag=swfupload">swfupload</a><i></i><a href="s.aspx?tag=tab切换">tab切换</a><i></i><a href="s.aspx?tag=XML">XML</a><i></i><a href="s.aspx?tag=奥特加">奥特加</a><i></i><a href="s.aspx?tag=编辑器">编辑器</a><i></i><a href="s.aspx?tag=标签">标签</a><i></i><a href="s.aspx?tag=博客">博客</a><i></i><a href="s.aspx?tag=参考">参考</a><i></i><a href="s.aspx?tag=成功">成功</a><i></i><a href="s.aspx?tag=承受">承受</a><i></i><a href="s.aspx?tag=错位">错位</a><i></i><a href="s.aspx?tag=代码">代码</a><i></i><a href="s.aspx?tag=代码运行">代码运行</a><i></i><a href="s.aspx?tag=弹出窗口">弹出窗口</a><i></i><a href="s.aspx?tag=调用">调用</a><i></i><a href="s.aspx?tag=动画设计">动画设计</a><i></i><a href="s.aspx?tag=多tab">多tab</a><i></i><a href="s.aspx?tag=分页">分页</a><i></i><a href="s.aspx?tag=浮动">浮动</a><i></i><a href="s.aspx?tag=赋值">赋值</a><i></i><a href="s.aspx?tag=加载效果">加载效果</a><i></i><a href="s.aspx?tag=兼容">兼容</a><i></i><a href="s.aspx?tag=教程">教程</a><i></i><a href="s.aspx?tag=开水">开水</a><i></i><a href="s.aspx?tag=坎">坎</a><i></i><a href="s.aspx?tag=可添加删除">可添加删除</a><i></i><a href="s.aspx?tag=控制">控制</a><i></i><a href="s.aspx?tag=链接">链接</a><i></i><a href="s.aspx?tag=美文">美文</a><i></i><a href="s.aspx?tag=免费收录">免费收录</a><i></i><a href="s.aspx?tag=批量上传">批量上传</a><i></i><a href="s.aspx?tag=评论">评论</a><i></i><a href="s.aspx?tag=牵挂">牵挂</a><i></i><a href="s.aspx?tag=潜力">潜力</a><i></i><a href="s.aspx?tag=情绪">情绪</a><i></i><a href="s.aspx?tag=全屏">全屏</a><i></i><a href="s.aspx?tag=上传功能">上传功能</a><i></i><a href="s.aspx?tag=上下滚动">上下滚动</a><i></i><a href="s.aspx?tag=鼠标事件">鼠标事件</a><i></i><a href="s.aspx?tag=数学">数学</a><i></i><a href="s.aspx?tag=思念">思念</a><i></i><a href="s.aspx?tag=搜索引擎">搜索引擎</a><i></i><a href="s.aspx?tag=缩小放大">缩小放大</a><i></i><a href="s.aspx?tag=图片">图片</a><i></i><a href="s.aspx?tag=退出">退出</a><i></i><a href="s.aspx?tag=网络营销">网络营销</a><i></i><a href="s.aspx?tag=温馨">温馨</a><i></i><a href="s.aspx?tag=文字特效">文字特效</a><i></i><a href="s.aspx?tag=稳定">稳定</a><i></i><a href="s.aspx?tag=西班牙">西班牙</a><i></i><a href="s.aspx?tag=显示节点">显示节点</a><i></i><a href="s.aspx?tag=延迟加载">延迟加载</a><i></i><a href="s.aspx?tag=样式名称">样式名称</a><i></i><a href="s.aspx?tag=用豆号分节">用豆号分节</a><i></i><a href="s.aspx?tag=用户">用户</a><i></i><a href="s.aspx?tag=游戏">游戏</a><i></i><a href="s.aspx?tag=遮罩层">遮罩层</a><i></i><a href="s.aspx?tag=智慧">智慧</a><i></i><a href="s.aspx?tag=子父窗口">子父窗口</a><i></i><a href="s.aspx?tag=自动切换">自动切换</a><i></i><a href="s.aspx?tag=自动上传">自动上传</a><i></i><a href="s.aspx?tag=左右滚动">左右滚动</a><i></i></div></div>
</body>
<script type="text/javascript">
function $2(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);// W3C DOM
} else if (document.all && document.all(objectId)) {
return document.all(objectId);// MSIE 4 DOM
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];// NN 4 DOM.. note: this won''t find nested layers
} else {
return false;
}
}
function GetColor()
{
var r = Math.floor(Math.random() * 255).toString(16);
var g = Math.floor(Math.random() * 255).toString(16);
var b = Math.floor(Math.random() * 255).toString(16);
r = r.length == 1 ? "0" + r : r;
g = g.length == 1 ? "0" + g : g;
b = b.length == 1 ? "0" + b : b;
return "#" + r + g + b;
}
function setTagCloudStyle(){
if($2("tagCloud"))
{
var tagLinks = $2("tagCloud").getElementsByTagName("a");
var tagLinksLen = tagLinks.length;
for(i = 0 ; i < tagLinksLen ; i++){
//[1,1.2,1.4,1.6,1.8,2,2.4][a] //这里的a就是随机生成的数字，当然只能是0--6之间，因此
tagLinks[i].style.fontSize=[0.8,0.9,1,1.5,0.8,0.9,1][Math.floor(Math.random()*7)]+''em'';
var std=GetColor();
tagLinks[i].style.color=std;
}
}
}
setTagCloudStyle();
</script>
</html>
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)