织梦DEDECMS多彩色TAG做法

dede模板实现彩色TAG代码主要由JS+CSS实现

作用方法：

1、建一个新的*.html文档，将以下代码拷进去，然后保存

2、在首页相应的位置进行调用

代码如下：

1. <styletype="text/css">
2. .tagCloud{padding:06px;}
3. .tagClouda{margin:08px00;line-height:22px;}
4. .color0{color:#2F5FC2;}
5. .color1{color:#AC1BF2;}
6. .color2{color:#9E6FC5;}
7. .color3{color:#FBA426;}
8. .color4{color:#2739CF;}
9. .color5{color:#C8A453;}
10. .color6{color:#AB2846;}
11. .weight0{font-weight:100;}
12. .weight1{font-weight:300;}
13. .weight2{font-weight:500;}
14. .weight3{font-weight:700;}
15. .weight4{font-weight:900;}
16. .weight5{font-weight:bold;}
17. .weight6{font-weight:bolder;}
18. .size0{font-size:12px;}
19. .size1{font-size:13px;}
20. .size2{font-size:14px;}
21. .size3{font-size:16px;}
22. .size4{font-size:20px;}
23. .size5{font-size:22px;}
24. .size6{font-size:24px;}
25. </style>
26. <scriptlanguage="javascript"type="text/javascript">
27. functionsetTagCloudStyle(){
28. varcolors=newArray("color0","color1","color2","color3","color4",
29. "color5","color6");
30. varsizes=newArray("size0","size1","size2","size3");
31. varweights=newArray("weight0","weight1","weight2","weight3",
32. "weight4","weight5","weight6");
33. varcolorsLen=colors.length;//获取颜色样式个数
34. varsizesLen=sizes.length;//获取字体大小样式个数
35. varweightsLen=weights.length;//获取字体粗细样式个数
37. vartagCloud=document.getElementById("tagCloud");
38. vartagLinks=tagCloud.getElementsByTagName("a");
39. vartagLinksLen=tagLinks.length;
40. for(i=0;i<tagLinksLen;i++){
41. tagLinks[i].className=colors[Math.floor(colorsLen*Math.random())]+"
42. "+sizes[Math.floor(sizesLen*Math.random())]+""+ weights[Math.floor(weightsLen*Math.random())];
43. //随机设置每个<a>标签的样式,以实现不同效果.
44. }
45. }
47. if(document.addEventListener){
48. window.addEventListener('load',setTagCloudStyle,false);
49. }else{
50. window.attachEvent('onload',setTagCloudStyle);
51. }
52. //绑定onload事件,在文档载入完毕启动setTagCloudStyle()函数;
53. </script>
54. <divclass="tagCloud"id="tagCloud">{dede:tagrow='20'getall='1'sort='month'}<ahref='http://www.dede58.com/[field:link/]'>[field:tag/]</a>{/dede:tag}</div>