\n \n \n\n## 效果是什么样的?\n\n打开网页,你会看到一个橙色主题的页面。点击按钮后,菜名会快速闪动(就像老虎机一样),然后停在一个随机的菜名上。下面还会显示你之前选过的历史记录。\n\n## 怎么自定义?\n\n加菜:在 foods 那个列表里添加你喜欢的菜名就行。公司附近有什么餐厅就加什么。\n\n分类:可以做多个列表,比如\"正餐\"\"小吃\"\"饮品\",每个列表一个按钮。\n\n加价格:把菜名改成\"黄焖鸡米饭 (18元)\"这样的格式,选的时候就知道要花多少钱。\n\n## 发给同事用\n\n做完后可以发到办公室群里,大家一起用。或者放到网上,让更多人用。\n\n如果你想加更多功能(比如投票、排除昨天吃过的),把代码发给AI,告诉它你想要什么功能,它会帮你加上。\n\n从这个小项目你能学到:HTML页面结构、CSS样式美化、JavaScript基本逻辑。虽然看起来只是个小玩具,但里面的知识点可不少。\n\n最重要的是——以后再也不用纠结吃什么了。","datePublished":"2026-03-28 06:00:02","dateModified":"2026-03-28 06:00:02","wordCount":2771,"inLanguage":"zh-CN","author":{"@type":"Person","name":"站长","url":"https://woshird.com"},"publisher":{"@type":"Organization","name":"人人都是程序员","url":"https://woshird.com","logo":{"@type":"ImageObject","url":"https://woshird.com/favicon.ico"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://woshird.com/article/make-random-food-picker"},"isPartOf":{"@type":"WebSite","name":"人人都是程序员","url":"https://woshird.com"},"about":{"@type":"Thing","name":"做个网站"},"keywords":"做个网站,,AI编程,做一个随机点菜器:中午吃什么再也不纠结","interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":77},{"@type":"InteractionCounter","interactionType":"https://schema.org/ReadAction","userInteractionCount":1245}]}
🌐
🌐
🌐
🌐

做一个随机点菜器:中午吃什么再也不纠结

站长
2026年3月28日 · 阅读 1245 · 点赞 77 · 预计 3 分钟
分享:

世界级难题:今天中午吃什么?

每到饭点,"吃什么"就成了全办公室最大的哲学问题。问十个人,十个人都说"随便"。那好,我们就做一个真正的"随便"——一个随机点菜器。

动手做一个

创建一个文件叫 food.html:





今天吃什么




今天吃什么?


点击下面的按钮






效果是什么样的?

打开网页,你会看到一个橙色主题的页面。点击按钮后,菜名会快速闪动(就像老虎机一样),然后停在一个随机的菜名上。下面还会显示你之前选过的历史记录。

怎么自定义?

加菜:在 foods 那个列表里添加你喜欢的菜名就行。公司附近有什么餐厅就加什么。

分类:可以做多个列表,比如"正餐""小吃""饮品",每个列表一个按钮。

加价格:把菜名改成"黄焖鸡米饭 (18元)"这样的格式,选的时候就知道要花多少钱。

发给同事用

做完后可以发到办公室群里,大家一起用。或者放到网上,让更多人用。

如果你想加更多功能(比如投票、排除昨天吃过的),把代码发给AI,告诉它你想要什么功能,它会帮你加上。

从这个小项目你能学到:HTML页面结构、CSS样式美化、JavaScript基本逻辑。虽然看起来只是个小玩具,但里面的知识点可不少。

最重要的是——以后再也不用纠结吃什么了。

站长
人人都是程序员,站长
分享: