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

该代码段展示了一个使用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 里执行这个方法就行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值