使用js简单实现随机点餐

1,250 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情

前言

上班的时候,中午常常纠结午餐吃什么?点开外卖APP全是之前自己点过的,选来选去都难以抉择,就想着做个随机点餐的帮自己做决定,轻松解决选择困难综合症。

展示

image.png 点击开始按钮,开始展示不同的吃食,开始按钮文字变为‘停止’,再次点击按钮,就显示你今天中午要吃的了,当然如果不太满意,可以再来一次。

实现思路

  1. 定义一个变量foods ,存入你平时喜欢吃的午餐;再定义一个定时器的标识符timer,在按钮点击事件中用来控制清除定时器
const foods = [
    '炒菜',
    '麻辣烫', 
    '酸辣粉', 
    '粥',
    '冒菜'
    ...
 ]
 
 let timer = null;
  1. 获取按钮元素和需要展示食物的元素
const btn = document.querySelector('.btn');
const foodName = document.querySelector('.food-name');
  1. 按钮点击事件 使用定时器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)
})
  1. 设置背景 以上三点可以简单实现随机点餐了,但是感觉背景很单调,在网上看见词云的效果,觉得很高大上,所以用来做个背景。

“词云”就是通过形成“关键词云层”或“关键词渲染”,对网络文本中出现频率较高的“关键词”的视觉上的突出。

使用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);