论坛 › 马黑黑教程专版 › 测试花飞飞

马黑黑 发表于 2023-7-8 18:19

测试花飞飞

本帖最后由 马黑黑 于 2023-7-8 18:33 编辑 <br /><br /><style>
#mydiv {
        margin: 20px auto;
        width: 700px;
       height: 460px;
        border: 1px solid purple;
        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.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);
});
console.log('\u{1F3F5}');
</script>

马黑黑 发表于 2023-7-8 18:34

测试代码
<style>
#mydiv {
        margin: 20px auto;
        width: 700px;
       height: 460px;
        border: 1px solid purple;
        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.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);
});
console.log('\u{1F3F5}');
</script>

马黑黑 发表于 2023-7-8 18:38

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

\u{1F3F5}

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

\u2740

南无月 发表于 2023-7-8 19:50

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

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

马黑黑 发表于 2023-7-8 19:52

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

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

南无月 发表于 2023-7-8 19:53

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

{:4_173:}我就在纳闷为啥单调这一个类型的花花

马黑黑 发表于 2023-7-8 19:54

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

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

花飞飞 发表于 2023-7-8 19:57

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

整个页面变紫色儿了？

马黑黑 发表于 2023-7-8 19:58

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

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

花飞飞 发表于 2023-7-8 19:59

这贴从左上角一起出来，{:4_170:}碰边解散

马黑黑 发表于 2023-7-8 20:02

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

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

花飞飞 发表于 2023-7-8 20:03

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

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

马黑黑 发表于 2023-7-8 20:05

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

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

花飞飞 发表于 2023-7-8 20:06

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

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

\u2740

这个也是有字母的

红影 发表于 2023-7-8 20:07

从左上角一下子飞出这么多花儿，这是天女散花么{:4_173:}

马黑黑 发表于 2023-7-8 20:07

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

%u2740


\u 是引用Unicode编码字符的前缀，2740才是 ❀ 的Unicode编码

马黑黑 发表于 2023-7-8 20:08

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

角女散花

花飞飞 发表于 2023-7-8 20:09

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

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

马黑黑 发表于 2023-7-8 20:10

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

你要分清环境：

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

这里说的是 JS

花飞飞 发表于 2023-7-8 20:13

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

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


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

查看完整版本: 测试花飞飞