使用 js 实现一个按椭圆随机分布的效果

最新推荐文章于 2024-01-09 11:38:30 发布

原创最新推荐文章于 2024-01-09 11:38:30 发布 · 573 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue

该代码段展示了一个使用Vue.js实现的方法，将文本元素随机分布在椭圆形状内的div中。元素的颜色、字体大小随机变化，中间的名称设置为最大。代码通过计算椭圆坐标并限制元素在div范围内来实现分布效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：随机分布在div 里，共有两种颜色，字体大小随机大小，中间的名称必须是最大的，效果如下。

代码参考：

     // 获取div元素
        var container = document.getElementById("randoms");
        var centerX = container.offsetWidth / 2.5; // 椭圆的中心点横坐标
        var centerY = container.offsetHeight / 2.5; // 椭圆的中心点纵坐标
        var a = container.offsetWidth / 2.5; // 长轴的长度
        var b = container.offsetHeight / 2.5; // 短轴的长度
        var theta = 0; // 角度

        // 创建中间的span元素
        var middleSpan = document.createElement("span");
        middleSpan.innerText = "中间内容";
        middleSpan.style.fontSize = "26px";
        middleSpan.style.fontFamily = "微软雅黑";
        middleSpan.style.color = "#1B52FD";
        middleSpan.style.position = "absolute";
        middleSpan.style.top = centerY -30 + "px";
        middleSpan.style.left = centerX-30 + "px";
        container.appendChild(middleSpan);

        for (var i = 0; i < this.numbers.length; i++) {
          var number = this.numbers[i];
          var span = document.createElement("span");
          span.innerText = number;
          span.style.fontSize = Math.floor(Math.random() * 18 + 12) + "px";
          span.style.fontFamily = "微软雅黑";
          // 计算椭圆上的点的坐标
          var x = centerX + a * Math.cos(theta);
          var y = centerY + b * Math.sin(theta);

          // 确保不超出"randoms"这个div
          x = Math.max(0, Math.min(x, container.offsetWidth-30));
          y = Math.max(0, Math.min(y, container.offsetHeight-30));

          span.style.position = "absolute";
          span.style.top = y + 10+ "px";
          span.style.left = x + 10 + "px";

          var color = Math.floor(Math.random() * 2) === 0 ? "#1B52FD" : "#FE973E";
          span.style.color = color;

          if (i === Math.floor(this.numbers.length / 2)) {
            span.style.fontSize = "22px";
            span.style.color = "#FE973E";
          }
          container.appendChild(span);
          // 增加角度，使得下一个数字的位置在椭圆上均匀分布
          theta += (2.5 * Math.PI) / this.numbers.length;
        }

其中源数据：numbers:['admin','zxp','zxp1','admin','admin','admin','admin','admin']。

直接vue 里执行这个方法就行。