今天吃什么-解决选择困难症

博主： xiaoxiao
发布时间：2021 年 09 月 20 日
1080 次浏览
1 条评论
3607字数
分类：笔记 jQuery JavaScript

<p>演示地址:<a href="https://www.xxhzm.cn/eat/"><a href="https://www.xxhzm.cn/eat/">https://www.xxhzm.cn/eat/</a></a><br>下载地址:<span class="external-link"><a class="no-external-link" href="https://xiaoxiaoxx.lanzoui.com/ijtUvu96bhi" target="_blank"><i data-feather="external-link"></i><a href="https://xiaoxiaoxx.lanzoui.com/ijtUvu96bhi">https://xiaoxiaoxx.lanzoui.com/ijtUvu96bhi</a></span></a><br><img src="https://www.xxhzm.cn/usr/uploads/2021/09/3336955783.gif" alt="20210920013614.gif" title="20210920013614.gif"style=""><br><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5a0495c45056f1868823a2a18d664dea84" aria-expanded="true"><div class="accordion-toggle"><span style="">html代码</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5a0495c45056f1868823a2a18d664dea84" class="collapse collapse-content"><p></p></p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;今天吃什么&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #EEE;
            font-family: &quot;微软雅黑&quot;;
        }
        
        .cont {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -60px;
            margin-left: -250px;
            width: 500px;
            height: 120px;
            text-align: center;
        }
        
        .cont h1 {
            margin: 0 0 20px;
            padding: 0;
            font-weight: 300;
            font-size: 30px;
        }
        
        .cont button {
            padding: 1px 6px;
            width: 120px;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
        }
        
        .cont p {
            margin: 0 0 20px;
            padding: 0;
            font-weight: 300;
            font-size: 30px;
            color: chocolate
        }
        
        h4 {
            position: fixed;
            right: 0;
            bottom: 0;
        }
        
        h4 a {
            color: #000;
            text-decoration: none;
        }
    &lt;/style&gt;
    &lt;script src=&quot;https://www.xxhzm.cn/jq.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;cont&quot;&gt;
        &lt;h1&gt;吃什么&lt;/h1&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;button&gt;开始&lt;/button&gt;
    &lt;/div&gt;
    &lt;h4&gt;&lt;a href=&quot;https://www.xxhzm.cn&quot; target=&quot;_blank&quot;&gt;小小孩子们的博客&lt;/a&gt;&lt;/h4&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre><p><p></p></div></div></div><br><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1f52ecc791f93f3894c064d919b8ceda61" aria-expanded="true"><div class="accordion-toggle"><span style="">JS代码</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1f52ecc791f93f3894c064d919b8ceda61" class="collapse collapse-content"><p></p></p><blockquote><p>$(function() {</p><pre><code>//获取时间,对时间进行判定
let d = new Date();
d = d.getHours();
if (d &gt; 5 &amp;&amp; d &lt;= 9) {
    $('.cont h1').eq(0).text('早上吃什么？');
    date = 'morning'; //如果是早上date则是morning
} else if (d &gt; 9 &amp;&amp; d &lt;= 15) {
    $('.cont h1').eq(0).text('中午吃什么？');
    date = 'noon';
} else if (d &gt; 15 &amp;&amp; d &lt;= 21) {
    $('.cont h1').eq(0).text('晚上吃什么？');
    date = 'night';
} else {
    $('.cont h1').eq(0).text('太晚了别吃了');
    $('button').hide();
}
//点击事件
let timer = null
$('.cont button').click(function() {
    clearInterval(timer)
    if (date === &quot;morning&quot;) { //早上吃啥
        eat = ['豆浆', '牛奶', '鸡蛋', '全麦面包', '酸奶', '油条', '豆腐脑', '肉夹馍', '煎饼果子'];
    } else if (date === &quot;noon&quot;) { //中午吃啥
        eat = ['米线', '汉堡', '黄焖鸡米饭', '肯德基', '凉皮', '烩面', '披萨', '寿司', '麻辣香锅', '螺狮粉', '麻辣烫'];
    } else if (date === &quot;night&quot;) { //晚上吃啥
        eat = ['酸辣粉', '驴肉火烧', '烧烤', '炸酱面', '混沌', '煎饼果子', '酸菜鱼', '油泼面', '麻辣香锅', '火锅'];
    }
    if ($('button').text() == '开始') {
        timer = setInterval(() =&gt; {
            let x = Math.random();
            x = Math.ceil(x * eat.length - 1);
            $('p').eq(0).text(eat[x]);
        }, 50);
        $('button').text('停止');
    } else {
        clearInterval(timer);
        $('button').text('开始');
    }
}) })</code></pre></blockquote><p><p></p></div></div></div></p>