随机点餐器（可以自定义names）

最新推荐文章于 2023-01-12 21:30:00 发布

黄桃乳酪派

最新推荐文章于 2023-01-12 21:30:00 发布

阅读量588

点赞数

分类专栏： webapi JavaScript 文章标签： css3 javascript

本文链接：https://blog.csdn.net/u012271799/article/details/115910726

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

webapi

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 1600px;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      height: 643px;
      background: url(./images.jpg) no-repeat;
    }

    .content {
      width: 700px;
      height: 350px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .content p {
      color: #138eee;
      font-size: 66px;
    }

    .content span {
      color: #fff;
      font-size: 25px;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="content">
      <p>亲,准备好点餐了吗？</p>
      <span>开始点餐</span>
    </div>
  </div>
  <script>

    // 定义数据

    let names = ['豆腐脑', '牛肉汤', '羊汤', '八宝粥', '芝士培根', '素炒饼', '香菇火腿馅饼', '鸡肉饼', '鸡蛋饼', '三鲜馅饼', '牛角包', '酸菜饼', '大饼夹油炸', '茴香馅饼', '蒸饺', '小笼包', '馒头', '烧麦', '水饺', '咸鸭蛋', '荷包蛋饼', '卤蛋']
    let wrp = document.querySelector('.container')
    let btn = document.querySelector('span')
    let flag = true
    wrp.addEventListener('click', function (e) {

      if (e.target.nodeName == 'SPAN') {
        if (flag == true) {

          btn.innerText = `停止点餐`
          flag = false
          let time = setInterval(function () {
            let p = document.querySelector('p')
            p.innerText = (names[getRanDom(0, names.length - 1)])

            window.time = time

          })
        } else if (flag == false) {
          clearInterval(time)
          flag = true
          btn.innerText = `开始点餐`
        }

      }
    })
    function getRanDom(min, max) {
      return Math.floor(Math.random() * (max - min + 1) - min)
    }


    function fn(min, max) {
      return Math.floor(Math.random() * (max - min + 1) - min)
    }
  </script>
</body>

</html>

黄桃乳酪派

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机点餐器（可以自定义names）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 160
复制链接

扫一扫