测试花飞飞

马黑黑

马黑黑

测试代码

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 700px;
   
5.          height: 460px;
   
6.         border: 1px solid purple;
   
7.         position: relative;
   
8. }
   
9. li-zi {
   
10.         position: absolute;
    
11.         animation: rot 6s infinite linear;
    
12. }
    
13. @keyframes rot { to { transform: rotate(2turn); } }
    
14. </style>
    
15. 
    
16. <div id="mydiv"></div>
    
17. 
    
18. <script>
    
19. 
    
20. class Lizi {
    
21.         constructor(pa) {
    
22.                 this.pa = pa;
    
23.                 this.left = 10;
    
24.                 this.top = 10;
    
25.                 this.xstep = 1;
    
26.                 this.ystep = 1;
    
27.                 this.ele = document.createElement('li-zi');
    
28.         }
    
29. 
    
30.         creating() {  
    
31.                 this.ele.style.cssText = `
    
32.                         left: ${this.left}px;
    
33.                         top: ${this.top}px;
    
34.                 `;
    
35.                 this.pa.appendChild(this.ele);
    
36.                 this.moving();
    
37.         }
    
38. 
    
39.         moving() {
    
40.                 this.left += this.xstep;
    
41.                 this.top += this.ystep;
    
42.                 if(this.left <= 0 || this.left >= this.pa.offsetWidth - this.ele.offsetWidth) this.xstep = -this.xstep;
    
43.                 if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.ele.offsetHeight) this.ystep = -this.ystep;
    
44.                 this.ele.style.left = this.left + 'px';
    
45.                 this.ele.style.top = this.top + 'px';
    
46.                 requestAnimationFrame(this.moving.bind(this));
    
47.         }
    
48. }
    
49. 
    
50. let stepAr = [0.5,0.7,0.9,1,1.2,1.5];
    
51. let txtAr = ['\u{1F338}','\u{1F4AE}','\u{1F33A}','\u{1F3F5}','\u2740'];
    
52. 
    
53. Array.from({length: 50}).forEach((element) => {
    
54.         let xIdx = Math.floor(Math.random() * stepAr.length),
    
55.                 yIdx = Math.floor(Math.random() * stepAr.length),
    
56.                 txtIdx = Math.floor(Math.random() * txtAr.length);
    
57.         element = new Lizi(mydiv);
    
58.         element.xstep = stepAr[xIdx];
    
59.         element.ystep = stepAr[yIdx];
    
60.         element.bg = 'none';
    
61.         element.ele.innerText = txtAr[txtIdx];
    
62.         element.creating();
    
63.        
    
64.         element.ele.style.fontSize = 10 + Math.ceil(Math.random() * 20) + 'px';
    
65.         element.ele.style.color = '#' + Math.random().toString(16).substr(-6);
    
66. });
    
67. console.log('\u{1F3F5}');
    
68. </script>

复制代码

马黑黑

在这个论坛里，由于网页使用的编码是 GBK，JS要使用颜文字，可以考虑用 Unicode 码。凡有字母的Unicode码，这样表示：

\u{1F3F5}

没有字母的，可以按上面的方法表示，也可以不用花括号：

\u2740

南无月

let txtAr = ['\u{1F338}','\u{1F4AE}','\u{1F33A}','\u{1F3F5}','\u2740'];
多了这一句设各种形状的花花……

还有这一句：console.log('\u{1F3F5}');

马黑黑

南无月 发表于 2023-7-8 19:50
let txtAr = ['%u{1F338}','%u{1F4AE}','%u{1F33A}','%u{1F3F5}','%u2740'];
多了这一句设各种形状的花花 ...

console.log 这句可以也应该删掉

南无月

马黑黑 发表于 2023-7-8 19:52
console.log 这句可以也应该删掉

我就在纳闷为啥单调这一个类型的花花

马黑黑

南无月 发表于 2023-7-8 19:53
我就在纳闷为啥单调这一个类型的花花

这个是测试用的。按F12看看效果

花飞飞

马黑黑 发表于 2023-7-8 19:54
这个是测试用的。按F12看看效果

整个页面变紫色儿了？

马黑黑

花飞飞 发表于 2023-7-8 19:57
整个页面变紫色儿了？

颜文字有一部分有自己的颜色，有一部分早期的木有，就需要设置 color 属性

花飞飞

这贴从左上角一起出来，碰边解散

马黑黑

花飞飞 发表于 2023-7-8 19:59
这贴从左上角一起出来，碰边解散

实例化时没有设置粒子的 left 和 top，都待在 Lizi 类默认的 {10，10} 这个地儿

花飞飞

马黑黑 发表于 2023-7-8 20:02
实例化时没有设置粒子的 left 和 top，都待在 Lizi 类默认的 {10，10} 这个地儿

原来如此。。。第二个测试贴更自然。

马黑黑

花飞飞 发表于 2023-7-8 20:03
原来如此。。。第二个测试贴更自然。

第一个其实也行，突然间散开也是一个创意

花飞飞

马黑黑 发表于 2023-7-8 18:38
在这个论坛里，由于网页使用的编码是 GBK，JS要使用颜文字，可以考虑用 Unicode 码。凡有字母的Unicode码， ...

没有字母的，可以按上面的方法表示，也可以不用花括号：

\u2740

这个也是有字母的

红影

从左上角一下子飞出这么多花儿，这是天女散花么

马黑黑

花飞飞 发表于 2023-7-8 20:06
没有字母的，可以按上面的方法表示，也可以不用花括号：

%u2740

\u 是引用Unicode编码字符的前缀，2740才是 &#10048; 的Unicode编码

马黑黑

红影 发表于 2023-7-8 20:07
从左上角一下子飞出这么多花儿，这是天女散花么

角女散花

花飞飞

马黑黑 发表于 2023-7-8 20:07
%u 是引用Unicode编码字符的前缀，2740才是 &#10048; 的Unicode编码

还是不要花括号，用斜杠的好记。先入为主，你先教的这个。。

马黑黑

花飞飞 发表于 2023-7-8 20:09
还是不要花括号，用斜杠的好记。先入为主，你先教的这个。。

你要分清环境：

之前说的是 CSS 伪元素，用 \编码字符

这里说的是 JS

花飞飞

马黑黑 发表于 2023-7-8 20:10
你要分清环境：

之前说的是 CSS 伪元素，用 \编码字符

我对换的新环境还不太敏感。。
好的，我以后注意区分环境
边走边嘟囔一句：我怎么感觉脚下处处都会踩坑