马黑黑 发表于 2023-7-8 20:05
第一个其实也行，突然间散开也是一个创意
太整齐了，像一队人马出门军训{:4_170:}
南无月 发表于 2023-7-8 20:24
太整齐了，像一队人马出门军训
可以通过步幅数组的设计进行差异化
马黑黑 发表于 2023-7-8 20:25
可以通过步幅数组的设计进行差异化
let stepAr = ;
指改变这句么？
花飞飞 发表于 2023-7-8 20:13
我对换的新环境还不太敏感。。
好的，我以后注意区分环境
边走边嘟囔一句：我怎么感觉脚下处处都会踩坑 ...
做帖子，相当于玩前端，前端有三套马车：
css
html
JS
代码结构：
<!-- css -->
<style>
/* css代码 */
</style>
<!-- html -->
<div id="papa">
<div id="son"></div>
</div>
<!-- js -->
<script>
//JS代码
</script>
南无月 发表于 2023-7-8 20:26
let stepAr = ;
指改变这句么？
是的，有负数值的就好
马黑黑 发表于 2023-7-8 20:29
做帖子，相当于玩前端，前端有三套马车：
css
造了 。。
这是最起码的结构，做贴子天天用。。{:4_170:}
这贴JS部分太长，占的篇幅太大，不小心就踩错了
马黑黑 发表于 2023-7-8 20:31
是的，有负数值的就好
才六个数值，之前粒子贴都翻倍的。
<style>
#mydiv {
margin: 20px auto;
width: 700px;
height: 460px;
border: 1px solid purple;
overflow: hidden;
position: relative;
}
li-zi {
position: absolute;
animation: rot 6s infinite linear;
}
@keyframes rot { to { transform: rotate(2turn); } }
</style>
<div id="mydiv"></div>
<script>
class Lizi {
constructor(pa) {
this.pa = pa;
this.left = 10;
this.top = 10;
this.xstep = 1;
this.ystep = 1;
this.ele = document.createElement('li-zi');
}
creating() {
this.ele.style.cssText = `
left: ${this.left}px;
top: ${this.top}px;
`;
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.ele.offsetWidth) this.xstep = -this.xstep;
if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.ele.offsetHeight) 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 = ;
let txtAr = ['\u{1F338}','\u{1F4AE}','\u{1F33A}','\u{1F3F5}','\u2740'];
Array.from({length: 50}).forEach((element) => {
let xIdx = Math.floor(Math.random() * stepAr.length),
yIdx = Math.floor(Math.random() * stepAr.length),
txtIdx = Math.floor(Math.random() * txtAr.length);
element = new Lizi(mydiv);
element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
element.xstep = stepAr;
element.ystep = stepAr;
element.bg = 'none';
element.ele.innerText = txtAr;
element.creating();
element.ele.style.fontSize = 10 + Math.ceil(Math.random() * 20) + 'px';
element.ele.style.color = '#' + Math.random().toString(16).substr(-6);
});
</script>
这样就好看多了。{:4_170:}
南无月 发表于 2023-7-8 20:46
这样就好看多了。
可以随意调整，直到自己满意。如果可以，还能做更多。
南无月 发表于 2023-7-8 20:34
才六个数值，之前粒子贴都翻倍的。
自己想弄多少就是多少
南无月 发表于 2023-7-8 20:32
造了 。。
这是最起码的结构，做贴子天天用。。
这贴JS部分太长，占的篇幅太大，不小心就踩错 ...
逻辑是清晰的
马黑黑 发表于 2023-7-8 20:08
角女散花
这些比那些点点还好看{:4_204:}
红影 发表于 2023-7-8 21:37
这些比那些点点还好看
点点是基础，会了点点，就会花花
马黑黑 发表于 2023-7-8 21:26
可以随意调整，直到自己满意。如果可以，还能做更多。
试着调了，负值住上飞的。。。如果往下飞，比如雪花，只能都是正值
马黑黑 发表于 2023-7-8 21:28
自己想弄多少就是多少
在试做的时候，发现数量的多少会影响落下的速度。。。
数量越多速度越慢。。。
马黑黑 发表于 2023-7-8 21:29
逻辑是清晰的
恩嗯，结构逻辑都没问题。。。要细心就是了
南无月 发表于 2023-7-9 08:19
恩嗯，结构逻辑都没问题。。。要细心就是了
{:4_181:}
南无月 发表于 2023-7-9 08:18
在试做的时候，发现数量的多少会影响落下的速度。。。
数量越多速度越慢。。。
这是资源消耗的太多，分配给 JS 的差不多用完了