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

2021 年 09 月 20 日

18 次浏览

3595字数

演示地址:https://xxhzm.cn/eat/
下载地址:https://xiaoxiaoxx.lanzoui.com/ijtUvu96bhi

html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今天吃什么</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #EEE;
            font-family: "微软雅黑";
        }
        
        .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;
        }
    </style>
    <script src="https://xxhzm.cn/jq.js"></script>
    <script src="index.js"></script>
</head>

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

</html>

JS代码

$(function() {

//获取时间,对时间进行判定
let d = new Date();
d = d.getHours();
if (d > 5 && d <= 9) {
    $('.cont h1').eq(0).text('早上吃什么？');
    date = 'morning'; //如果是早上date则是morning
} else if (d > 9 && d <= 15) {
    $('.cont h1').eq(0).text('中午吃什么？');
    date = 'noon';
} else if (d > 15 && d <= 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 === "morning") { //早上吃啥
        eat = ['豆浆', '牛奶', '鸡蛋', '全麦面包', '酸奶', '油条', '豆腐脑', '肉夹馍', '煎饼果子'];
    } else if (date === "noon") { //中午吃啥
        eat = ['米线', '汉堡', '黄焖鸡米饭', '肯德基', '凉皮', '烩面', '披萨', '寿司', '麻辣香锅', '螺狮粉', '麻辣烫'];
    } else if (date === "night") { //晚上吃啥
        eat = ['酸辣粉', '驴肉火烧', '烧烤', '炸酱面', '混沌', '煎饼果子', '酸菜鱼', '油泼面', '麻辣香锅', '火锅'];
    }
    if ($('button').text() == '开始') {
        timer = setInterval(() => {
            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('开始');
    }
}) })

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