中午吃什么？html（拯救选择困难症）

选择困难者点外卖（html、css、js）

效果图：

源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>menu</title><style>.hide {display: none;}
html {height: 100%}
body {width: 100%;height: 100%;padding-top: 50vh;margin-top: -76px;text-align: center;background: rgb(226, 225, 225)}button {width : 200px;border: none;border-radius: 10px;padding: 10px 15px;font-size: 1.5rem;background: #fff;/* color: #f2c0ff; */box-shadow: 5px 5px 5px dimgray;}p {font-size: 1.4rem;color:#ce61e9;}</style>
</head>
<body><button id="start">中午吃啥呢？</button><button id="stop" class="hide">停</button><p> </p><script>const lunchPlaces = ['粥','拌面','铁板饭','汤包','馄饨','米线','炒饭','饺子','米线','麻辣香锅','黄焖鸡','外婆鸡汤饭','糖醋排骨','红烧肉','泡面','螺蛳粉','便当',]let timeout = 0;let getRandomIndice = (max)=> {return Math.floor(Math.random() * max)
};let rollDices = () => {let node = document.querySelector('p');let i = 0;timeout = setInterval(() => {if (i === lunchPlaces.length) {i = 0;}node.textContent = lunchPlaces[i];i++;}, 100)
}
let count = 0;
document.getElementById('start').onclick = () => {rollDices();document.getElementById('start').classList.add('hide');document.getElementById('stop').classList.remove('hide');document.querySelector('p').textContent = '';
};document.getElementById('stop').onclick = () => {if(count<=4){let rest = lunchPlaces[getRandomIndice(lunchPlaces.length)];clearInterval(timeout);document.getElementById('start').classList.remove('hide');document.getElementById('stop').classList.add('hide');document.querySelector('p').textContent = rest;count++;}else{alert('这么挑食中午就别吃了吧')}
};</script>
</body>
</html>

中午吃什么？html（拯救选择困难症）相关推荐

（拯救选择困难症）随机选择今天中午吃啥
不知道今天中午改吃啥 HTML(拯救选择困难症) 效果图: 源代码: <!doctype html> <html> <head> <meta charset= ...
拯救选择困难症2.0
昨天我们用random模块写了一个拯救选择困难症的代码,我们是直接去判断这个随机数.那今天我们用另一种方法,也就是控制循环次数来随机选择饭店. 好,首先咱们同样的,要选几家饭店.我这里写的和昨天一样, ...
技术的真相 I 618囤货在即，拯救“选择困难症”的虚拟试妆技术原理竟是...
导语面对琳琅满目的618促销商品,激动搓搓小手的你,是不是在"番茄红""烂番茄""甜柿红""草莓红""枫叶红 ...
适合端午节送礼的粽子礼盒糙米大匠拯救选择困难症必看
不知道小伙伴们是不是跟我有一样的看法,当网络越发达,物品越丰富,品牌越密集,在逢年过节,走亲访友时,反而不知道选什么礼物更合适. 往往是看遍全网,眼花缭乱,结尾还是不知道要选什么?简直把每一个人都逼成 ...
患上“吃鸡”选择困难症？准确认识枪械很重要！
自从<绝地求生>正式服上线之后,新增加了沙漠地图以及多把枪械.在正式服上线之前,许多玩家就已经体验过了测试服,想必对新地图以及新增加的枪械已经很熟悉了.但还是有部分玩家都在盲目追求高伤害的 ...
专治选择困难症——bandit算法
选择是一个技术活著名鸡汤学家沃.滋基硕德曾说过:选择比努力重要. 我们会遇到很多选择的场景.上哪个大学,学什么专业,去哪家公司,中午吃什么,等等.这些事情,都让选择困难症的我们头很大.那么,有办法能 ...
canvas转盘-拯救选择困难
转盘-拯救选择困难效果图简介代码效果图简介每到饭点就纠结吃什么,不如直接roll点. 在词条框中输入选项,选项用逗号(中英都可)隔开. 点击设置词条,会根据词条(没有输入则获取代码中的默认 ...
Js实现轮盘抽奖功能，一招帮你解决选择困难症
不知道今天自己该吃什么,一招帮你解决选择困难症. 通过html+css+js实现一个轮盘抽奖功能.我们可以将平时吃的饭菜输入到代码中,每到纠结的时候只需点开抽一次就可以了. 实现步骤 html代码: ...
吃饭困难选择症python_吃饭选择困难症
吃饭选择困难症(选择大转盘)是一款生活服务软件,这款软件可以帮助用户们不断的做出决定,你是不是也在吃饭的时候老是犹豫要吃什么,今天小编带来的这款软件会帮助用户们不断的做出选择,可以通过转盘,游戏,朋 ...

中午吃什么？html（拯救选择困难症）

选择困难者点外卖（html、css、js）

中午吃什么？html（拯救选择困难症）相关推荐

最新文章

热门文章