js 实现随机抽取选餐效果源码

闲来没事看到一个比较有趣的随机选餐效果，于是自己花了点时间去是实现，代码如下。

<template><div><div class="est"><spanv-for="(v, idx) in list":key="idx"class="animate__animated animate__fadeIn":style="{left: `${v.left}px`,top: `${v.top}px`,fontSize: `${v.fontSize + 10}px`,color: `${v.color}`}">{{v.name}}</span></div><div class="box"><button @click="start">{{!isStart ? '开始选餐' : '结束点餐'}}</button><h2>你选中的是：{{name}}</h2></div></div>
</template><script>
const color = ['#d31051', '#d91ab9', '#1919e3', '#0e78ff', '#d6624d', '#4dd697', '#0b6a3e', '#cfda15', '#d39b10', '#d35710', '#d310b6'];
const data = `北京烤鸭、涮羊肉、仿膳宫廷菜、狗不理包子、春卷、酱鸡、酱汁肉、樱桃肉、松鼠桂鱼、糕团、桂发祥麻花、耳朵眼炸糕、天津银鱼、天津紫蟹、小站大米、锅巴菜、煎饼果子、炒肝、豆汁、烧麦、小窝头、萨奇马、打卤面、豌豆黄、果脯、桂花陈酒、六必居酱菜、王致和臭豆腐、浦东鸡、盐水火腿、春卷、酱鸡、酱汁肉、樱桃肉、北京烤鸭、涮羊肉、仿膳宫廷菜、狗不理包子、春卷、酱鸡、酱汁肉、樱桃肉、松鼠桂鱼、糕团、松鼠桂鱼、糕团、武昌鱼、老通城豆皮、四季美汤包、棉花糖、老大兴鲴鱼、狗不理包子、桂发祥麻花、耳朵眼炸糕、天津银鱼、天津紫蟹、小站大米、锅巴菜、煎饼果子、熏火腿、猪肉灌肠、蜜饯、五香豆、鸡肉灌包、北京烤鸭、涮羊肉、仿膳宫廷菜、狗不理包子、春卷、酱鸡、酱汁肉、樱桃肉、松鼠桂鱼、糕团、三黄鸡、鸡鸭血汤、油炸臭干子、大闸蟹、山城小汤圆、担担面、龙抄手、熨斗糕、珍珠圆子、鸡味锅贴、荷叶软饼、萝卜丝饼、凤尾酥、金鱼饺、开煲狗肉、炒田螺、烧鹅、叉烧包、虾饺子、沙河粉、烤小猪、金丝烩鱼翅、豹狸烩三蛇、玉兔饼、玲珑鱼脆羹、三色凉糕、香麻麻品酥、重庆火锅、板鸭、金钩豆瓣酱`
const foods = data.split('、'); // 食物数组
const max = 60; // 首屏显示菜品数量
const speed = 20; // 随机显示速度
const random = (max = max) => Math.floor(Math.random() * (max - 0 + 1)) + 0;
const position = () => {const left = Math.random() * (window.innerWidth - 0) + 0;const top = Math.random() * (window.innerHeight - 0) + 0;return {left,top};
};
export default {name: 'eat',data () {return {isStart: false,name: '',list: [],};},created () {},mounted () {this.int();},methods: {start () {// 结束点餐逻辑if (this.isStart) {const r = random(foods.length);this.name = foods[r];clearInterval(this.id);setTimeout(_ => {alert(`你选中的是：${this.name}`);}, 500);} else {this.id = setInterval(() => {this.getOne();}, speed);}this.isStart = !this.isStart;},// 将第一个元素推出去，随机压入一个元素getOne () {this.list.shift();let index = random(max);this.list.push({name: foods[index],left: position().left,top: position().top,fontSize: random(max),color: color[random(11)]});},// 初始化显示首屏效果int () {const list = [];this.list = [];for (let i = 0; i < max; i++) {let index = random(max);list.push({name: foods[index],left: position().left,top: position().top,fontSize: random(max),color: color[random(11)]});}this.list = list;}}
};
</script>
<style lang="less" scoped>
.box {// display: flex;align-items: center;position: fixed;left: 45%;top: 40%;width: 200px;height: 200px;padding-top: 50px;background: #fff;text-align: center;border: 1px solid #ccc;flex-wrap: wrap;h2 {margin: 20px 0;}
}
.est {height: 100vh;width: 100vw;overflow: hidden;position: relative;span {display: inline-block;position: absolute;}
}
</style>

js 实现随机抽取选餐效果源码相关推荐

python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
java计算机毕业设计智慧校园学生选宿系统源码+mysql数据库+系统+部署+lw文档
java计算机毕业设计智慧校园学生选宿系统源码+mysql数据库+系统+部署+lw文档 java计算机毕业设计智慧校园学生选宿系统源码+mysql数据库+系统+部署+lw文档本源码技术栈: 项目架构 ...
java计算机毕业设计在线点餐系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计在线点餐系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计在线点餐系统源码+mysql数据库+系统+lw文档+部署本源码技术栈: 项目架构:B/S架构开 ...
java计算机毕业设计沙县小吃点餐系统源码+数据库+系统+lw文档+mybatis+运行部署
java计算机毕业设计沙县小吃点餐系统源码+数据库+系统+lw文档+mybatis+运行部署 vjava计算机毕业设计沙县小吃点餐系统源码+数据库+系统+lw文档+mybatis+运行部署本源码技术 ...
基于Java毕业设计智慧校园食堂点餐系统源码+系统+mysql+lw文档+部署软件
基于Java毕业设计智慧校园食堂点餐系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计智慧校园食堂点餐系统源码+系统+mysql+lw文档+部署软件本源码技术栈: 项目架构:B/S ...
jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码
码农那点事儿关注我们,一起学习进步这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...
java计算机毕业设计喜枫日料店自助点餐系统源码+系统+数据库+lw文档+mybatis+运行部署
java计算机毕业设计喜枫日料店自助点餐系统源码+系统+数据库+lw文档+mybatis+运行部署 java计算机毕业设计喜枫日料店自助点餐系统源码+系统+数据库+lw文档+mybatis+运行部署 ...
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档）
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 本源 ...
java计算机毕业设计林家餐厅自助点餐管理系统源码+系统+mysql数据库+lw文档
java计算机毕业设计林家餐厅自助点餐管理系统源码+系统+mysql数据库+lw文档 java计算机毕业设计林家餐厅自助点餐管理系统源码+系统+mysql数据库+lw文档本源码技术栈: 项目架构:B ...

js 实现随机抽取选餐效果源码

js 实现随机抽取选餐效果源码相关推荐

最新文章

热门文章