持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情
前言
上班的时候,中午常常纠结午餐吃什么?点开外卖APP全是之前自己点过的,选来选去都难以抉择,就想着做个随机点餐的帮自己做决定,轻松解决选择困难综合症。
展示
点击开始按钮,开始展示不同的吃食,开始按钮文字变为‘停止’,再次点击按钮,就显示你今天中午要吃的了,当然如果不太满意,可以再来一次。
实现思路
- 定义一个变量
foods
,存入你平时喜欢吃的午餐;再定义一个定时器的标识符timer
,在按钮点击事件中用来控制清除定时器
const foods = [
'炒菜',
'麻辣烫',
'酸辣粉',
'粥',
'冒菜'
...
]
let timer = null;
- 获取按钮元素和需要展示食物的元素
const btn = document.querySelector('.btn');
const foodName = document.querySelector('.food-name');
- 按钮点击事件
使用定时器
setInterval()
方法,让午餐名称每隔0.1s展示;因为定时器方法会返回一个定时器的标识符(是一个非零数值),使用一开始定义的timer
来接收返回的定时器的标识符,控制在按钮点击事件一开始的时候,判断是否存在定时器,存在就清除定时器,同时把timer
重新赋值为null,按钮文字变为‘再来一次’,并直接返回
Math.random()方法乘以foods
数组的长度,得到所有食物的随机数
btn.addEventListener('click',() => {
if(timer){
clearInterval(timer)
btn.innerHTML = '再来一次';
timer = null
return false;
}
// setInterval()方法执行返回的标识符,在每次事件执行中都不一样,因此需要把清除定时放在之前执行
timer = setInterval(() => {
//Math.floor() 对返回的随机数取整
let index = Math.floor(Math.random() * foods.length);
// 获取食物数组中对应索引的值
let value = foods[index];
//展示食物名称
foodName.innerHTML = value;
btn.innerHTML = '停止';
}, 100)
})
- 设置背景 以上三点可以简单实现随机点餐了,但是感觉背景很单调,在网上看见词云的效果,觉得很高大上,所以用来做个背景。
“词云”就是通过形成“关键词云层”或“关键词渲染”,对网络文本中出现频率较高的“关键词”的视觉上的突出。
使用wordcloud2.js实现词云效果
a. 下载wordcloud2.js文件,并引入页面
<script src="./wordcloud2.js"></script>
b. 使用canvas,定义一个容器
<canvas id="canvas" width="1200px" height="700px"></canvas>
c. 定义数据,初始化
const options = eval({
"list":[
['酸辣粉', 8],
['炒饭', 4],
['盖浇饭', 7],
['鸡公煲', 6],
...
], //需要满足这样格式的数据
"gridSize": 40, // 密集程度 数字越小越密集
"weightFactor": 12,
"maxFontSize": 40, //最大字号
"minFontSize": 14, //最小字号
"fontWeight": 'normal',
"fontFamily": 'Times, serif',
"color": 'random-dark', // 字体颜色 'random-dark' 或者 'random-light'
"backgroundColor": '#fff', // 背景颜色
"rotateRatio": 1 // 字体倾斜(旋转)概率,1代表总是倾斜(旋转)
});
const canvas = document.getElementById('canvas');
d. 调用WordCloud()方法
为了让词云有个变化,使用定时器setInterval()方法,每隔3s调用一次WordCloud()
WordCloud(canvas, options);
setInterval(() => {
WordCloud(canvas, options);
}, 3000);