马黑黑 发表于 2023-7-8 16:50
取多取少取决于你对粒子运行速度的差异性的要求。一般来说，至少要有两个，一正一负，以保证粒子运行方向 ...
stepAr.length 是数组 stepAr 的长度，然后乘以前面的浮点数，得到的是一个数组元素的索引，是对应数组里的数字的？就这个没懂，通常不是直接得到乘完的数据么，为什么这个变成了索引？
马黑黑 发表于 2023-7-8 16:56
那应该是你的设计有问题。试下这么设置CSS：
是的，是我弄错了{:4_173:}
好了，翻页了，弄个万花筒试验。对了，怎么能让这些粒子不是在这个方块里，而是在圆里呢？也就是xy不是在最大最小里，而是在半径里{:4_173:}
<style>
#mydiv {
margin: 20px auto;
width: 400px;
height: 300px;
border: 1px solid purple;
position: relative;
}
li-zi {
position: absolute;
animation: rot 6s infinite linear;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv"></div>
<script>
class Lizi {
constructor(pa,size = 20) {
this.pa = pa;
this.size = size;
this.bg = 'purple';
this.left = 10;
this.top = 10;
this.xstep = 1;
this.ystep = 1;
this.ele = document.createElement('li-zi');
}
creating() {
this.ele.style.cssText = `
width: ${this.size}px;
height: ${this.size}px;
left: ${this.left}px;
top: ${this.top}px;
background: ${this.bg};
`;
this.pa.appendChild(this.ele);
this.moving();
}
moving() {
this.left += this.xstep;
this.top += this.ystep;
if(this.left <= 0 || this.left >= this.pa.offsetWidth - this.size) this.xstep = -this.xstep;
if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) this.ystep = -this.ystep;
this.ele.style.left = this.left + 'px';
this.ele.style.top = this.top + 'px';
requestAnimationFrame(this.moving.bind(this));
}
}
let stepAr = ; //步幅数组
Array.from({length: 30}).forEach((element) => {
let xIdx = Math.floor(Math.random() * stepAr.length),
yIdx = Math.floor(Math.random() * stepAr.length);
element = new Lizi(mydiv);
element.size = 8 + Math.ceil(Math.random() * 15);
element.left = Math.floor(Math.random() * (mydiv.offsetWidth - element.size));
element.top = Math.floor(Math.random() * (mydiv.offsetHeight - element.size));
element.xstep = stepAr;
element.ystep = stepAr;
element.bg = '#' + Math.random().toString(16).substr(-6);
element.creating();
});
</script>
红影 发表于 2023-7-8 20:47
#mydiv {
margin: 20px auto;
width: 600px;
形状可定制性还是不错的
红影 发表于 2023-7-8 20:36
是的，是我弄错了
还不熟
红影 发表于 2023-7-8 20:32
stepAr.length 是数组 stepAr 的长度，然后乘以前面的浮点数，得到的是一个数组元素的索引，是对应数组里 ...
数组是酱紫：
ar = ;
读取数组的值，比如第一个数组元素： ar ，中括号里的 0 是索引。
我们随机要一个索引号，它只能是整数，基于上面的 ar 数组，0、1、2、3，就这四个，我们要取其中的一个：
Math.floor(浮点数) 得到向下取整的整数，浮点数 换成 Math.random() * 4 ，就会得到 0、1、2、3 的任意一个，而 * 4 的 4，就是 ar.length
马黑黑 发表于 2023-7-8 20:25
脸没混熟
就是，每次都稀里糊涂就过了{:4_173:}
红影 发表于 2023-7-8 21:39
就是，每次都稀里糊涂就过了
不求甚解通常会酱紫
马黑黑 发表于 2023-7-8 21:25
形状可定制性还是不错的
是啊，想要什么形状就是什么形状呢{:4_173:}
红影 发表于 2023-7-8 21:39
是啊，想要什么形状就是什么形状呢
随机形状，试出这个就是本事
马黑黑 发表于 2023-7-8 21:28
还不熟
一不小心又出丑了{:4_173:}
红影 发表于 2023-7-8 21:41
一不小心又出丑了
丑菇凉不愁嫁
马黑黑 发表于 2023-7-8 21:34
数组是酱紫：
ar = ;
你说的这个我知道，是我没说明白，以为这个就直接能对应上数组里的内容了，其实不是，它只是能得到索引好，还要结合另一句，才能得到索引的值。前面迷惑是因为把索引号和对应的索引得到的值搅一起了，意味这句直接就完成了，所以才感觉疑问。谢谢黑黑不厌其烦{:4_187:}
红影 发表于 2023-7-8 21:56
你说的这个我知道，是我没说明白，以为这个就直接能对应上数组里的内容了，其实不是，它只是能得到索引好 ...
读取或设置数组元素，必须通过索引号，但 Array.from({...}) 除外，它可以有 value 和 key 值，所以它优雅；for ... of 也直接读取数组或对象，但没有 key；for... in 通过索引读取数组或对象。
马黑黑 发表于 2023-7-8 21:39
不求甚解通常会酱紫
很多是基础性的东西，也不好意思问。{:4_173:}
马黑黑 发表于 2023-7-8 21:42
丑菇凉不愁嫁
还有这说法。{:4_189:}
马黑黑 发表于 2023-7-8 22:50
读取或设置数组元素，必须通过索引号，但 Array.from({...}) 除外，它可以有 value 和 key 值，所以它优 ...
这几个功能都不熟，黑黑厉害，如数家珍一般。{:4_187:}
红影 发表于 2023-7-9 13:51
这几个功能都不熟，黑黑厉害，如数家珍一般。
这和养猪杀猪卖猪肉差不多
红影 发表于 2023-7-9 13:49
还有这说法。
这是安慰俺们乡下菇凉的好话，不过很准