马黑黑 发表于 2023-4-18 17:32

css-doodle随机取汉字

<script>
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);
</script>

<css-doodle click-to-update>
        :doodle {
                @grid: 5 / 300px;
        }
        background: tan;
        :after {
                content: @p([一-龥]);
                font-size: 2em;
        }
</css-doodle>

马黑黑 发表于 2023-4-18 17:33

单击 css-doodle 元素，会自动更换文字

马黑黑 发表于 2023-4-18 17:34

css-doodle代码：
<css-doodle click-to-update>
        :doodle {
                @grid: 5 / 300px;
        }
        background: tan;
        :after {
                content: @p([一-龥]);
                font-size: 2em;
        }
</css-doodle>

马黑黑 发表于 2023-4-18 17:40

css-doodle随机取汉字原理：

@pick() 函数支持正则表达式。本例中，语句

    content: @p([一-龥]);

是给单元格伪元素 :after 的 content 属性赋值，@p() 是 @pick() 的缩写，函数内的参数 [一-龥] 是一个匹配GBK汉字的正则表达式。

花飞飞 发表于 2023-4-18 17:55

马黑黑 发表于 2023-4-18 17:33
单击 css-doodle 元素，会自动更换文字

每次点击出现不同的汉字，繁体字库

马黑黑 发表于 2023-4-18 17:59

花飞飞 发表于 2023-4-18 17:55
每次点击出现不同的汉字，繁体字库

不是繁体字库，只是从概率上讲，偏僻字数量众多出现的概率也偏高而已。

马黑黑 发表于 2023-4-18 18:00

花飞飞 发表于 2023-4-18 17:55
每次点击出现不同的汉字，繁体字库

多点几次，你会看到你熟悉的汉字

红影 发表于 2023-4-18 21:01

好多不认识的人，严重怀疑我认识的汉字不足3千{:4_173:}

红影 发表于 2023-4-18 21:02

这个代码这么简单，就能囊括所有汉字，厉害了{:4_199:}

千羽 发表于 2023-4-18 22:13

挺神奇的，每点击一次，字幅就会更换一次，黑黑老师棒棒哒{:4_187:}

马黑黑 发表于 2023-4-18 23:05

千羽 发表于 2023-4-18 22:13
挺神奇的，每点击一次，字幅就会更换一次，黑黑老师棒棒哒

棒棒哒是羽图

马黑黑 发表于 2023-4-18 23:06

红影 发表于 2023-4-18 21:02
这个代码这么简单，就能囊括所有汉字，厉害了

本来玩汉字就不复杂

马黑黑 发表于 2023-4-18 23:06

红影 发表于 2023-4-18 21:01
好多不认识的人，严重怀疑我认识的汉字不足3千

3千有的

红影 发表于 2023-4-19 10:42

马黑黑 发表于 2023-4-18 23:06
本来玩汉字就不复杂

那个汉字正则表达式厉害，收了那么多的字。

红影 发表于 2023-4-19 10:43

马黑黑 发表于 2023-4-18 23:06
3千有的

那为什么在这个帖子里看到的不认识的超过了认识的字啊{:4_173:}

马黑黑 发表于 2023-4-19 13:23

红影 发表于 2023-4-19 10:43
那为什么在这个帖子里看到的不认识的超过了认识的字啊

3000是什么意思？GBK汉字共有多少个？

马黑黑 发表于 2023-4-19 13:23

红影 发表于 2023-4-19 10:42
那个汉字正则表达式厉害，收了那么多的字。

它实际上是表示一个大的数组一样的字库

花飞飞 发表于 2023-4-19 17:49

马黑黑 发表于 2023-4-18 17:59
不是繁体字库，只是从概率上讲，偏僻字数量众多出现的概率也偏高而已。

看到认识的了。这个库太全了非常用字占多数

花飞飞 发表于 2023-4-19 17:50

马黑黑 发表于 2023-4-18 18:00
多点几次，你会看到你熟悉的汉字

总算看到熟悉的了。不然我觉得它不亲民了{:4_170:}

马黑黑 发表于 2023-4-19 18:07

花飞飞 发表于 2023-4-19 17:50
总算看到熟悉的了。不然我觉得它不亲民了

汉字太多，生僻字占比高的
页: [1] 2 3
查看完整版本: css-doodle随机取汉字