点名（点菜版）js实现

Tԅ(¯ㅂ¯ԅ)

已于 2023-03-21 22:39:07 修改

阅读量607

点赞数 1

文章标签： javascript html css 前端 Powered by 金山文档

于 2023-03-06 14:41:37 首次发布

本文链接：https://blog.csdn.net/2201_75321887/article/details/129361503

版权

思路：使用prompt询问需要的餐食类型，然后使用switch语句，当获取到的prompt的值为对应的值时，执行相应的代码，定义一个定时器使食物名字不断变化，点结束时，关闭定时器。

步骤

1.定义一个div，用来存放变幻的食物名字，然后定义两个按钮，开始和结束，分别绑定不同的点击函数。

<div id="bkg"></div>
        <div id="btn">
            <button onclick="getopen()">开始</button>
            <button onclick="getout()">结束</button>
        </div>

2.定义三个数组，分别存放早餐食物，午餐食物和晚餐食物，并定义一个变量用来存放定时器。

var morning = ['包子', '粥', '豆腐脑']
var afternoon = [
    '清真米饭',
    '自选菜',
    '麻辣烫',
    '面',
    '方便面',
    '饺子',
    '馄饨',
    '土豆粉',
]
var evening = ['包子', '面', '粥', '豆腐脑', '饼', '老母鸡汤']
var setTime

3.定义点击开始按钮事件，点击开始时，首先弹出一个对话框，询问需要的餐食类型，可以用prompt实现，然后定义一个定时器，获取prompt的用户输入值，当值为1时，利用Math.round（Math.random）获取一个数组随机数下标，并将相应的数组内容显现到div中，当值为2，3时同理，然后利用定时器属性设置0.1秒变幻一次。

function getopen() {
                var num = prompt(
                    '请输入您需要的的操作：\n1.早餐\n2.午餐\n3.晚餐'
                )
                setTime = setInterval(function () {
                    switch (num) {
                        case '1':
                            var number = Math.random() * (morning.length - 1)
                            number = Math.round(number)
                            document.getElementById('bkg').innerHTML =
                                morning[number]
                            break
                        case '2':
                            var number = Math.random() * (afternoon.length - 1)
                            number = Math.round(number)
                            document.getElementById('bkg').innerHTML =
                                afternoon[number]
                            break
                        case '3':
                            var number = Math.random() * (evening.length - 1)
                            number = Math.round(number)
                            document.getElementById('bkg').innerHTML =
                                evening[number]
                    }
                }, 100)
            }

4.定义点击结束按钮事件，当点击结束按钮时，关闭定时器。

function getout() {
                clearInterval(setTime)
            }

5.基本样式

* {
                margin: 0;
                padding: 0;
            }
            #bkg {
                width: 300px;
                height: 300px;
                background-color: pink;
                line-height: 300px;
                text-align: center;
                font-size: 30px;
                margin: 0 auto;
            }
            button {
                width: 90px;
                height: 45px;
                background-color: palevioletred;
                border: 0;
                margin: 30px 50px 0px 55px;
                color: white;
                font-size: 20px;
            }
            #btn {
                width: 400px;
                height: 100px;
                margin: 0 auto;
            }

详情

1.点击开始时弹出选择框，选择需要食物类型。

2.根据序号选择自己需要的类型并输入序号。

3.程序运行，食物不断刷新。

4.点击结束，食物停止刷新。

运行效果

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #bkg {
                width: 300px;
                height: 300px;
                background-color: pink;
                line-height: 300px;
                text-align: center;
                font-size: 30px;
                margin: 0 auto;
            }
            button {
                width: 90px;
                height: 45px;
                background-color: palevioletred;
                border: 0;
                margin: 30px 50px 0px 55px;
                color: white;
                font-size: 20px;
            }
            #btn {
                width: 400px;
                height: 100px;
                margin: 0 auto;
            }
        </style>
        <script>
            var morning = ['包子', '粥', '豆腐脑']
            var afternoon = [
                '清真米饭',
                '自选菜',
                '麻辣烫',
                '面',
                '方便面',
                '饺子',
                '馄饨',
                '土豆粉',
            ]
            var evening = ['包子', '面', '粥', '豆腐脑', '饼', '老母鸡汤']
            var setTime
            function getopen() {
                var num = prompt(
                    '请输入您需要的的操作：\n1.早餐\n2.午餐\n3.晚餐'
                )
                setTime = setInterval(function () {
                    switch (num) {
                        case '1':
                            var number = Math.random() * (morning.length - 1)
                            number = Math.round(number)
                            document.getElementById('bkg').innerHTML =
                                morning[number]
                            break
                        case '2':
                            var number = Math.random() * (afternoon.length - 1)
                            number = Math.round(number)
                            document.getElementById('bkg').innerHTML =
                                afternoon[number]
                            break
                        case '3':
                            var number = Math.random() * (evening.length - 1)
                            number = Math.round(number)
                            document.getElementById('bkg').innerHTML =
                                evening[number]
                    }
                }, 100)
            }
            function getout() {
                clearInterval(setTime)
            }
        </script>
    </head>
    <body>
        <div id="bkg"></div>
        <div id="btn">
            <button onclick="getopen()">开始</button>
            <button onclick="getout()">结束</button>
        </div>
    </body>
</html>