html+css+javascript做一个随机点菜器

最新推荐文章于 2022-08-19 13:57:05 发布

巧仔要早睡

最新推荐文章于 2022-08-19 13:57:05 发布

阅读量2.1k

点赞数 3

分类专栏：曲鬼鬼的学习文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_44875828/article/details/109219674

版权

本文介绍了如何使用HTML、CSS和JavaScript创建一个随机点菜器，以解决选择困难症的问题。该点菜器初始显示一组菜单，点击“开始”按钮后，菜单项会随机变化并高亮显示，同时按钮变为“停止”并改变颜色。点击“停止”按钮将固定显示一个随机选定的菜品。

摘要由CSDN通过智能技术生成

html+css+javascript做一个随机点菜器

html+css+javascript做一个随机点菜器为了解决我每天都在纠结吃什么的问题，做了一个随机点菜器。下图中第一张是随机点菜器的初始画面；当点击“开始”按钮时，js程序中提前准备好的菜单（数组）会随机变化跳动显示，“开始”按钮变成“停止”按钮，且按钮的背景颜色会由之前绿色变成红色，如第二张图所示；当点击“停止”按钮时，显示的名字为随机点击出来的名字，如第三张图所示。

效果图如下： 图片一
图片二
图片三

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名器</title>
    <style>
        #content1{
    
            width: 600px;
            height: 400px;
            background:#f40;
            margin: 100px auto;
            text-align: center;
            position: relative;