演示地址: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> </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('开始'); } }) })