用JS解决了世纪难题：今天吃什么

拳明猩

已于 2022-02-17 10:47:55 修改

阅读量3.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2022-01-23 15:21:58 首次发布

本文链接：https://blog.csdn.net/weixin_59675623/article/details/122651547

本文介绍了一个简单的随机点餐小游戏实现过程，通过点击按钮随机选择菜品，帮助解决每天吃什么的烦恼。涉及HTML、CSS和JavaScript的基本应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天吃什么好呢？每天都被这个问题困扰。无论身为上班族还是学生党的你，一到下班时间，你是不是会习惯性拿起手机点开外卖，一个劲的埋头看今天吃什么好呢？今天就分享一个帮你决定吃啥的小游戏。

先看一下整体效果：

案例分析：

1.点击’开始冥想'界面开始滚动菜品

2.没有点击‘就决定是你了’之前不能二次冥想（不能点击‘开始冥想’，按钮变成灰色）

3.点击‘就决定是你了’停止滚动并打印出选中的菜品

分析完毕后，准备动手啊！

1.定义三个功能组件

<div>
    <h1 id="screen" ></h1>
    <input type="button" id="start" value="开始冥想" onclick="start()">
    <input type="button" id="end" value="就决定是你了" onclick="stop()">
</div>

分别为两个按钮绑定了对应的函数

2.为其定义css样式

<style>
        div{
            text-align: center;
            line-height: 100px;
        }
        #screen{
            border: 1px yellow;
            width: auto;
            background-color: #ffc900;
            text-align: center;
        }
    </style>

3.完成屏幕滚动菜品功能

<script>
 var arr=["花开富贵虾","清蒸鲈鱼","椒麻鸡","干锅肥肠","红烧肉","素什锦"];
    var id;
function show() {
        var r=Math.random()*4;
        var index=Math.round(r);
        document.getElementById("screen").innerHTML=arr[index];
    }
</script>

4.点击‘开始冥想’开始滚动菜品并且变为不可选中

 function start() {
        id=setInterval("show()",200);
       document.getElementById("start").disabled=true;
    }

5.点击‘就决定是你了’停止滚动，‘开始冥想’变为可选中

function stop() {
        clearTimeout(id);
        document.getElementById("start").disabled=false;
    }