午后・时光

css-doodle入门(六)

位置: 首页 > 马黑教程[ 发布时间: 2023.4.24  作者: 马黑黑  阅读: 165 ]
@repeat() 和 @multiple() 函数


这两个函数都是用来多次组合指定的值。两个函数所需要的两个参数一样:


@repeat(5, 'a'); /* 运行结果 aaaaa */
@multiple(5,'a'); /* 运行结果 a,a,a,a,a */


上面的两个语句,都表示同一个意思:将字母 a 重复 5 次。不同的是重复后的结果,repeat() 函数得到的 5 个 a 连在一起写,@multiple() 得到的 5 个 a 彼此间用逗号隔开(末尾没有逗号)。


以下代码可以到页面 http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html 中运行,从中感受两个函数的工作机制和效果:


<css-doodle>
        :doodle {
                @grid: 1x2 / 400px 200px;
                gap: 1px;
        }
        @row(1) {
                background: silver;
                :before { content: @repeat(5, @pick([a-zA-Z]));        }
        }
        @row(2) {
                background: gray;
                :before { content: @multiple(5,'a'); }
        }
</css-doodle>


代码中,第一、二行网格背景色分别为银白色(silver)和灰色(gray),它们通过伪元素 :before 的 content 属性将函数 @repeat() 和 @multiple() 的执行结果呈现出来。


这两个重复组合给定值的函数有什么作用呢?让我们来举例说明。


其一:生成十六进制随机颜色


比方说,我们要随机生成十六进制颜色值,@repeat() 函数就能派上用场。十六进制颜色用符号 # 做前缀,随后由 6 个 0-9 的数字和 a-f 的字母组合而成,我们结合 @pick() 函数,就能随机组合数字和字母,从而达到生成随机十六进制颜色的目的。


@pick() 函数随机在备选数组值中挑选一个元素成员,我们先试着让它挑出一个字母:


@pick([a-zA-Z]);


每一次运行,将得出大小写字母表中的任意一个。实际上,我们只需要 a-f 就可以了,所以上式可以写成:


@pick([a-f]); 或 @pick([A-F]);  


我们还需要挑出 0-9 的数字,所以把数字也加入到备选成员中:


@pick([0-9a-f]); 或 @pick([0-9A-F]);


现在你可能会很迷惑:[0-9a-f] 是什么鬼?嗯,这是正则表达式,表示备选的成员分为, 0-9 表示在 0 和 9 之间、a-f 表示在 a 和 f 之间这样的范围,包含头尾即 0 和 9 、a 和 f。


不过这样选择每一次只能得到一个字母或数字,所以,@repeat() 函数就该上场了:


@repeat(6, @pick([0-9a-f]));


@repeat函数运行六次,每一次都在 [0-9a-f] 内随机挑选一个数字或字母,这样,得到的结果会是这样:


        d6c2a3


我们在其前面加上前缀 # 号,是不是就是我们所预期的十六进制颜色?


下面的代码,给 8x8 的网格每一个单元格用十六进制设定不同的背景色:


<css-doodle>
        :doodle {
                @grid: 8 / 400px;
                gap: 1px;
        }
        --bgcolor: #@repeat(6, @pick([0-9A-F]));
        background: var(--bgcolor);
</css-doodle>


其二:生成 rgb 随即颜色


rgb() 颜色是当代浏览器默认支持的颜色表达方案,r 代表红色 red,g 代表绿色 green,b 代表蓝色 blue,三种颜色以百分比参与到颜色组合中混合出最终颜色。rgb() 需要 3 个参数,参数间用逗号隔开,css-doodle 的函数 @multiple() 正好能生成带逗号分隔的重复组合结果:


@multiple(3, @r(100)%)


上式,会生成 3 个百分比数字(浮点数百分比),两个数之间用逗号分割:18.6944321%, 20.0004554%, 89.5578944%。如此,我们用 rgb() 表示法封装一下上式,就可以得到我们所需的 rgb 随机颜色:


        --bgcolor: rgb(
                @multiple(3, @r(100)%)
        );


上面的代码,可以写在一行里:--bgcolor: rgb(        @multiple(3, @r(100)%));


最后给出一个使用 rgb() 随机颜色设定单元格背景色的 css-doodle 示例:


<css-doodle click-to-update>
        :doodle { @grid: 8 / 600px; gap: 1px; }
        --bgcolor: rgb(@multiple(3, @r(100)%));
        background: var(--bgcolor);
</css-doodle>

前一篇: css-doodle入门(一)
下一篇: JS教程一

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com