极客教程jQuery 判断上午下午
在实际开发中，我们可能会遇到需要判断当前时间是上午还是下午的场景。使用 jQuery 可以很方便地实现这一功能。本文将详细介绍如何通过 jQuery 来判断当前时间是上午还是下午，并给出一些实际应用的示例。
获取当前时间
首先，我们需要获取当前的时间。在 JavaScript 中，可以通过 new Date() 来获取当前的日期时间对象。然后可以通过该对象的方法来分别获取当前的小时数和分钟数。
var now = new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
判断上午下午
有了当前的小时数，我们就可以根据具体的判断逻辑来判断当前是上午还是下午。通常来说，上午是从凌晨 12 点到中午 12 点（不包含中午 12 点），下午是从中午 12 点到晚上 12 点。
// 判断当前时间是上午还是下午
if (hour < 12) {
console.log('当前时间是上午');
} else {
console.log('当前时间是下午');
}
实际应用
示例1：根据时间显示问候语
<!DOCTYPE html>
<html>
<head>
<title>根据时间显示问候语</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="greeting"></div>
<script>
(document).ready(function() {
var now = new Date();
var hour = now.getHours();
if (hour<12) {('#greeting').text('早上好！');
} else {
$('#greeting').text('下午好！');
}
});
</script>
</body>
</html>
在这个示例中，根据当前时间显示不同的问候语。如果当前时间是上午，则显示“早上好！”，否则显示“下午好！”。
示例2：根据时间更换页面背景
<!DOCTYPE html>
<html>
<head>
<title>根据时间更换页面背景</title>
<style>
body {
background-color: #fff;
}
.morning {
background-color: #ffcc00;
}
.afternoon {
background-color: #6699ff;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
(document).ready(function() {
var now = new Date();
var hour = now.getHours();
if (hour<12) {('body').addClass('morning');
} else {
$('body').addClass('afternoon');
}
});
</script>
</body>
</html>
在这个示例中，根据当前时间不同，更换页面的背景颜色。如果当前时间是上午，则页面背景颜色为橘黄色；如果当前时间是下午，则页面背景颜色为淡蓝色。
总结
通过本文的介绍，我们学习了如何使用 jQuery 来判断当前时间是上午还是下午。