干饭想不好吃什么，写这么一个程序来决定

程序员倾心

已于 2023-04-26 15:48:13 修改

阅读量107

点赞数 1

文章标签： html css javascript

于 2023-04-26 15:45:36 首次发布

本文链接：https://blog.csdn.net/m0_75006805/article/details/130387707

版权

这是一个使用HTML、CSS和JavaScript编写的简单网页程序，用于帮助用户决定吃什么。页面包含一个“开始”和“结束”按钮，点击“开始”后，程序会每35毫秒随机从预设的美食列表中选择一项并显示。用户可以点击“结束”停止这个随机选择的过程。

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

干饭想不好吃什么，写这么一个程序来决定

效果图

源码可直接复制

<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>随机干饭</title>

  <style>

      * {

          margin: 0;

          padding: 0;

      }

      /*主要用于重置浏览器默认样式。由于不同浏览器对html标签的默认外边距和内边距的值不同，为了在主流浏览器中统一标准让布局显示相同，需要将html所有标签的padding,margin都设置为0*/

      h1 {

          text-align: center;

      }

      /*设置h1文字居中*/

      .box {

          width: 600px;

          margin: 50px auto;

          display: flex;

          font-size: 25px;

          line-height: 40px;

      }

      /*设置宽度，横居中，字体大小，行高*/

      .qs {

          width: 450px;

          height: 40px;

          color: red;

      }

      /*设置宽高和字体颜色*/

      .btns {

          text-align: center;

      }

      /*设置div居中*/

      .btns button {

          width: 120px;

          height: 35px;

          margin: 0 50px;

      }

      /*设置按钮的宽高和外边距*/

  </style>

</head>



<body>

<h1>吃什么(美食街)</h1>

<div class="box">

  <span>吃：</span>

  <div class="qs">看这里</div>

</div>

<div class="btns">

  <button>按钮请单击</button>

  <button class="start">开始</button>

  <button class="end">结束</button>

  <a href="首页.html"><button>返回</button></a>

</div>



<script>

    const arr = ['茶百道', '嵊州小吃','正新鸡排']

    let timerID=0

    let random=0

    const qs=document.querySelector('.qs')

    const start=document.querySelector('.start')

    const end=document.querySelector('.end')

    start.addEventListener('click',function (){

        timerID=setInterval(function (){

            random=parseInt(Math.random()*arr.length)

            qs.innerHTML=arr[random]

        },35)

    })

    // 单击事件，点击开始以后每35毫秒进行一次更改

    end.addEventListener('click',function () {

        clearInterval(timerID)

    })

    //单击事件，点击结束以后清除定时器

</script>

<script defer="defer" id="fluttering_ribbon" mobile="true"

        src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script>

<script id="canvas_nest" defer="defer" color="255,0,0" opacity="0.7" zIndex="-1" count="199" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script>

<script id="click-show-text" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js" data-mobile="true" data-text="吃,不吃" data-fontsize="15px" data-random="false" async="async"></script>

</body>



</html>

源码链接: https://pan.baidu.com/s/1Vb5uXkBO5Y99pHvnGFiKWw?pwd=k9qj 提取码: k9qj 复制这段内容后打开百度网盘手机App，操作更方便哦

如有帮助，请作者杯咖啡添砖加瓦：