「CSS 畅想」定时 + 随机，开启今日上上签
前言
之前做了一个小功能，批量上传福气，借用好彩妹的口头禅：“笑口常开，好彩自然来。”这次，延续好运的 buff 加持，做了一个简单的随机获取好运上上签的功能。
Math.random()
众所周知，JavaScript 的内置对象 Math，可以帮忙实现各种数字相关的功能。它拥有较多数学常数属性和数学函数方法。
其中，random 方法，可以帮助生成一个从 0（包括 0）往上，但是不包括 1（排除 1）的随机浮点数。
除了 0-1，还可以根据四则运算，生成某个数值段的随机数，官网也给出了实现的例子，官网文档。
得到一个两数之间的随机数
先看一个例子。
例子中会返回了一个在指定值之间的随机数。随机数的值不小于 min（有可能等于），并且不大于（不会出现等于）max。
抽签咯
功能实现
html
页面展示主要包括两部分内容，顶部内容和签文随机展示内容；
顶部内容，包括左侧的标题、开始按钮、结束按钮，右侧的获取的签文展示部分；
签文随机展示部分和头部通过虚线进行了分割；
签文随机展示部分，展示最终获取的签文内容。
css
分割线是虚线，虚线的实现通过为边框设置 border，将值设置为 dashed 即可；
签文边框加了外阴影，阴影用 box-shadow 实现。
js
设置签文内容数组，包含所有的抽签内容；
Math.random()实现 0-9 的随机数，随机数的值即为签文数组的索引值，从而确定最终的展示内容；
签文动态循环出现的效果，是通过 setInterval 设置定时实现的。点击开始按钮启动定时任务，签文数组开始随机出现在页面上；
点击结束按钮中止定时任务，获取最终的签文，并回显在页面中签文随机展示区域。
效果展示
可以到在线预览平台抽取自己的好运签。
https://code.juejin.cn/pen/7087052412778709004
总结
“笑口常开，好彩自然来。”希望每个人都收获自己的好运，无论是生活、事业、家庭等等。
未来如果有好的想法，还会不断去尝试实现。
版权声明: 本文为 InfoQ 作者【叶一一】的原创文章。
原文链接:【http://xie.infoq.cn/article/c786602eca494ca6f7cb3d5d4】。文章转载请联系作者。
掘金优秀创作者 2022-09-01 加入
非职业传道受业解惑前端程序媛，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
评论