教你用javascript实现随机标签云效果_附代码

教你用javascript实现随机标签云效果

什么是标签云

标签云是一种展示标签/关键词的方式，通常使用多个字体大小和颜色来区分不同标签的重要程度或分类。标签云设计旨在方便用户快速找到自己想要的内容。

实现标签云的基本原理

使用JavaScript实现标签云的基本原理是：分析页面中的标签内容，给它们设置不同的字体大小和颜色，然后使用CSS样式控制它们的显示效果。

实现随机效果的步骤

实现随机标签云的效果，主要包括以下几个步骤：

1. 获取页面中所有标签内容

可以通过document.querySelectorAll方法获取所有标签元素，并从中抽取出标签内容。

 ```
 var tags = [];
 var elements = document.querySelectorAll('.tag');
 for (var i = 0; i < elements.length; i++) {
    tags.push(elements[i].innerHTML);
 }
 ```

1. 生成随机字体大小

可以使用随机数来生成字体大小，让每个标签的字体大小都有所不同。

 ```
 var minFontSize = 12; // 最小字体大小
 var maxFontSize = 30; // 最大字体大小
 var fontSizeRange = maxFontSize - minFontSize + 1; // 字体大小范围
 var fontSizeList = []; // 存放随机字体大小
 for (var i = 0; i < tags.length; i++) {
    var fontSize = Math.floor(Math.random() * fontSizeRange) + minFontSize;
    fontSizeList.push(fontSize + 'px');
 }
 ```

1. 生成随机颜色

同样可以使用随机数来生成颜色，让每个标签的颜色都有所不同。

 ```
 var colorList = []; // 存放随机颜色
 for (var i = 0; i < tags.length; i++) {
    var color = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
    colorList.push(color);
 }
 ```

1. 设置标签的样式

将字体大小和颜色设置到每个标签的样式中。

 ```
 for (var i = 0; i < elements.length; i++) {
    elements[i].style.fontSize = fontSizeList[i];
    elements[i].style.color = colorList[i];
 }
 ```

示例：

假设页面中有如下标签元素：

<div class="tag">HTML</div>
<div class="tag">CSS</div>
<div class="tag">JavaScript</div>
<div class="tag">jQuery</div>

那么，我们可以根据上述步骤，使用JavaScript实现随机标签云的效果，例如：

var tags = [];
var elements = document.querySelectorAll('.tag');
for (var i = 0; i < elements.length; i++) {
   tags.push(elements[i].innerHTML);
}
var minFontSize = 12;
var maxFontSize = 30;
var fontSizeRange = maxFontSize - minFontSize + 1;
var fontSizeList = [];
for (var i = 0; i < tags.length; i++) {
   var fontSize = Math.floor(Math.random() * fontSizeRange) + minFontSize;
   fontSizeList.push(fontSize + 'px');
}
var colorList = [];
for (var i = 0; i < tags.length; i++) {
   var color = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
   colorList.push(color);
}
for (var i = 0; i < elements.length; i++) {
   elements[i].style.fontSize = fontSizeList[i];
   elements[i].style.color = colorList[i];
}

此时，页面中的每个标签的字体大小和颜色都将是随机的，呈现出随机标签云的效果。

注意：上述代码需要放在页面加载完成后执行，否则可能获取不到所有标签元素。