东篱来玩玩一千个小球

马黑黑

马黑黑

代码：

1. <style>
   
2. #papa { left: -214px; width: 1024px; height: 600px; box-shadow: 4px 4px 30px #000; position: relative; }
   
3. .ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #111; }
   
4. </style>
   
5. 
   
6. <div id="papa"></div>
   
7. 
   
8. <script>
   
9. let all = 1000;
   
10. let pa_w = papa.offsetWidth, pa_h = papa.offsetHeight;
    
11. let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
    
12. 
    
13. Array.from({length:all}).forEach((x,y) =>{
    
14.         x = document.createElement('span');
    
15.         x.className = 'ball';
    
16.         let wh = num(10,30);
    
17.         x.style.cssText = `background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}),rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
    
18.                 width: ${wh}px; height:${wh}px; left: ${num(0, pa_w - wh)}px; top: ${num(0, pa_h - wh)}px; transition: all ${0.1 * num(2,20)}s linear ${0.1 * num(2,20)}s`;
    
19.         papa.appendChild(x);
    
20.         console.log(x.style.transition);
    
21. });
    
22. let balls = document.querySelectorAll('.ball');
    
23. move();
    
24. 
    
25. function move() {
    
26.         for(obj of balls) {
    
27.                 let xx = Math.floor((papa.offsetWidth - obj.offsetWidth) * Math.random());
    
28.                 let yy = Math.floor((papa.offsetHeight - obj.offsetHeight) * Math.random());
    
29.                 obj.style.left = xx + 'px';
    
30.                 obj.style.top = yy + 'px';
    
31.         }
    
32. }
    
33. let tt = setInterval(move, 2000);
    
34. </script>
    

复制代码

马黑黑

代码解释： https://www.huachaowang.com/foru ... &extra=page%3D1

本例与那边的例子大同小异，原理相同。唯一需要提及的是，本例中，每一个小球的 transition 都是个性化的，还引入了不同的延时。

马黑黑

@红影 来看看，打开这个帖子时，风扇是否会加速

马黑黑

@红影

马黑黑

又 call 不了人，不在服务区

绿叶清舟

眼都花了

马黑黑

绿叶清舟 发表于 2022-7-10 21:12
眼都花了

我就试一下，1000个元素，有木有机器吃不消的

红影

马黑黑 发表于 2022-7-10 20:59
@红影 来看看，打开这个帖子时，风扇是否会加速

猜对了，我这里一打开的确会风扇加速

红影

的确看得眼花缭乱啊

马黑黑

红影 发表于 2022-7-10 22:28
的确看得眼花缭乱啊

可以万花丛中盯一花

马黑黑

红影 发表于 2022-7-10 22:27
猜对了，我这里一打开的确会风扇加速

1000个就加速，性能落伍了

四海八荒

发现一个偷懒的小球一直没动

马黑黑

四海八荒 发表于 2022-7-11 05:24
发现一个偷懒的小球一直没动

表面看，有可能。不过它不会永远不动，也不是不动，只是它动的幅度很小。持续极小幅度运动的概率非常小但会有，总数越大这种概率跟着增大。

这相当与懒人，一定总数中，终会有很懒的人存在。

樵歌

左边右边各有一个小球没动。

梦油

黑黑朋友早晨好！这移动的小球颇像一幅抽象派的美术作品。

大猫咪

这个好玩，  象万花筒   

马黑黑

大猫咪 发表于 2022-7-11 10:54
这个好玩，  象万花筒

就是太多了

红影

马黑黑 发表于 2022-7-10 23:00
可以万花丛中盯一花

怎么可能盯得住，还没来得及看呢，就已经跑了

红影

马黑黑 发表于 2022-7-10 23:01
1000个就加速，性能落伍了

电脑时间长了，不过能用就还用着了，穷人，只能节约点了