物换星移几度秋

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #mama {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         position: relative;
   
5.         z-index: 1;
   
6.         width: 1024px;
   
7.         height: 644px;
   
8.         background: #333 url('https://638183.freep.cn/638183/t23/2/004.jpg');
   
9.         box-shadow: 0 0 6px #000;
   
10.         pointer-events: none;
    
11.         --state: paused;
    
12. }
    
13. #mama::before {
    
14.         position: absolute;
    
15.         content: '\1F3F5';
    
16.         font: normal 60px/60px sans-serif;
    
17.         color: antiquewhite;
    
18.         cursor: pointer;
    
19.         left: calc(50% - 28px);
    
20.         bottom: 6px;
    
21.         animation: rot 6s infinite linear var(--state);
    
22.         pointer-events: auto;
    
23. }
    
24. li-zi {
    
25.         position: absolute;
    
26.         border-radius: 50%;
    
27.         opacity: .75;
    
28.         transition: background .6s;
    
29. }
    
30. @keyframes rot { to { transform: rotate(360deg); } }
    
31. </style>
    
32. 
    
33. <div id="mama"></div>
    
34. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27937361" autoplay="autoplay" loop="loop"></audio>
    
35. 
    
36. <script>
    
37. (function() {
    
38.         let canMove = false;
    
39. 
    
40.         class Lizi {
    
41.                 constructor(pa,size = 20) {
    
42.                         this.pa = pa;
    
43.                         this.size = size;
    
44.                         this.left = 10;
    
45.                         this.top = 10;
    
46.                         this.xstep = 1;
    
47.                         this.ystep = 1;
    
48.                         this.ele = document.createElement('li-zi');
    
49.                 }
    
50. 
    
51.                 creating() {  
    
52.                         this.ele.style.cssText = `
    
53.                                 width: ${this.size}px;
    
54.                                 height: ${this.size}px;
    
55.                                 left: ${this.left}px;
    
56.                                 top: ${this.top}px;
    
57.                                 background: ${this.bg};
    
58.                         `;
    
59.                         this.pa.appendChild(this.ele);
    
60.                         this.setBg();
    
61.                         this.moving();
    
62.                 }
    
63. 
    
64.                 moving() {
    
65.                         if(canMove) {
    
66.                                 this.left += this.xstep;
    
67.                                 this.top += this.ystep;
    
68.                                 if(this.left <= 0 || this.left >= this.pa.offsetWidth - this.size) {
    
69.                                         this.xstep = -this.xstep;
    
70.                                         this.setBg();
    
71.                                 }
    
72.                                 if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) {
    
73.                                         this.ystep = -this.ystep;
    
74.                                         this.setBg();
    
75.                                 }
    
76.                                 this.ele.style.left = this.left + 'px';
    
77.                                 this.ele.style.top = this.top + 'px';
    
78.                         }
    
79.                         requestAnimationFrame(this.moving.bind(this));
    
80.                 }
    
81. 
    
82.                 setBg() {
    
83.                         this.ele.style.background = '#' + Math.random().toString(16).substr(-6);
    
84.                 }
    
85.         }
    
86. 
    
87.         let stepAr = [0.5,-0.5,1,-1,0.8,-0.8,1.2,-1.2,0.3,-0.3,1.5,-1.5]; //步幅数组
    
88. 
    
89.         Array.from({length: 60}).forEach((element) => {
    
90.                 let xIdx = Math.floor(Math.random() * stepAr.length), yIdx = Math.floor(Math.random() * stepAr.length);
    
91.                 element = new Lizi(mama);
    
92.                 element.size = 8 + Math.ceil(Math.random() * 20);
    
93.                 element.left = Math.floor(Math.random() * (mama.offsetWidth - element.size));
    
94.                 element.top = Math.floor(Math.random() * (mama.offsetHeight - element.size));
    
95.                 element.xstep = stepAr[xIdx];
    
96.                 element.ystep = stepAr[yIdx];
    
97.                 element.creating();
    
98.         });
    
99. 
    
100.         let mState = () => aud.paused ? (mama.style.setProperty('--state','paused'),canMove = false) : (mama.style.setProperty('--state','running'),canMove = true);
     
101.         aud.addEventListener('play', mState, false);
     
102.         aud.addEventListener('pause', mState, false);
     
103.         mama.onclick = () => aud.paused ? aud.play() : aud.pause();
     
104. })();
     
105. </script>

复制代码

小文

早安，先生！

红影

黑黑把前面教学内容变成了实例，真好。
看到实例，发现还有一些没懂的地方，我再去看看前面内容。。。。

红影

前面的的确没有setBg()的内容和Array.from({length: 60}).forEach((element)，
看来前面就算看懂了单个的粒子，变成多个的时候，还是有新的内容要学习

马黑黑

小文 发表于 2023-7-8 08:18
早安，先生！

早

马黑黑

醉美水芙蓉 发表于 2023-7-8 09:09
欣赏老师佳作！黑黑老师早上好！

早上好

马黑黑

红影 发表于 2023-7-8 09:26
黑黑把前面教学内容变成了实例，真好。
看到实例，发现还有一些没懂的地方，我再去看看前面内容 ...

类是很灵活的，正如教程里讲到的，属性和方法，想改就该，想删就删，想加就加

红影

这个除了刷新后小球大小有变化外，好像自身也在闪烁，是大小也有微量变化么

马黑黑

红影 发表于 2023-7-8 09:36
前面的的确没有setBg()的内容和Array.from({length: 60}).forEach((element)，
看来前面就算看懂了单个的 ...

setBg() 方法是设置粒子的背景颜色，因为粒子在运动中会触发变色机制，用的多，就封装成一个方法，而原来的 this.bg 属性就没有必要存在了。

Array.from({length: 60}) 是生成一个长度为 60 的数组，forEach(( ...) => { ... }); 是对每一个数组元素的设置。这是实例化类的具体操作，需要学习数组相关的东东，Aarray.from() 是优雅的做法，它可以用 for 语句替代：

for(let i = 0; i < 60; i ++) {
    let xIdx = Math.floor(Math.random() * stepAr.length), yIdx = Math.floor(Math.random() * stepAr.length);
    let element = new Lizi(mama);
    element.size = 8 + Math.ceil(Math.random() * 20);
    element.left = Math.floor(Math.random() * (mama.offsetWidth - element.size));
    element.top = Math.floor(Math.random() * (mama.offsetHeight - element.size));
    element.xstep = stepAr[xIdx];
    element.ystep = stepAr[yIdx];
    element.creating();
}

马黑黑

红影 发表于 2023-7-8 09:44
这个除了刷新后小球大小有变化外，好像自身也在闪烁，是大小也有微量变化么

小球在运动过程中会变色，尺寸不改变

红影

马黑黑 发表于 2023-7-8 09:39
类是很灵活的，正如教程里讲到的，属性和方法，想改就该，想删就删，想加就加

一个全新的方法

红影

马黑黑 发表于 2023-7-8 09:50
小球在运动过程中会变色，尺寸不改变

那估计是变色引起的感觉。

红影

马黑黑 发表于 2023-7-8 09:47
setBg() 方法是设置粒子的背景颜色，因为粒子在运动中会触发变色机制，用的多，就封装成一个方法，而原来 ...

是的，小球由原来教学时的单个变成了数组。
Aarray.from() 是优雅的做法——这个说法真有趣

马黑黑

红影 发表于 2023-7-8 11:38
是的，小球由原来教学时的单个变成了数组。
Aarray.from() 是优雅的做法——这个说法真有趣

类里的小球就一个，我编写的这个 Lizi 类，它只针对一个粒子。

Array.from() 比起 for 语句的确优雅，它基于数组、类数组或可迭代的任何对象，对之进行从容操作。

马黑黑

红影 发表于 2023-7-8 11:35
那估计是变色引起的感觉。

小球触碰四周边缘时才会变色。小球的尺寸，一旦生成，就不做改变。

马黑黑

红影 发表于 2023-7-8 11:35
一个全新的方法

class 类，是ES6才引入的机制，因为所有的编程语言都有 class，我再使用php时就大量使用 class 创建一些东东

南无月

实例效果很美

马黑黑

南无月 发表于 2023-7-8 13:01
实例效果很美

美不美故乡水