uni-app:实现当前时间的获取,并且根据当前时间判断所在时间段为早上,下午还是晚上

效果图

核心代码

获取当前时间

**toString()**方法将数字转换为字符串

padStart(2, '0'):padStart()方法用于在字符串头部填充指定的字符,使其达到指定的长度。该方法接受两个参数:第一个参数为期望得到的字符串长度,第二个参数为要填充的字符。

javascript 复制代码
// 获取当前时间
const now = new Date();
// 获取当前日期
var year = now.getFullYear();
var month = (now.getMonth() + 1).toString().padStart(2, '0');
var day = now.getDate().toString().padStart(2, '0');
// 获取当前详细时间
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
// 拼接日期和时间
var datetime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

时间段的判断

根据小时来判断当前的时间段,这里规定早上:6:00-12:00,下午:12:00-18:00,其余时间为晚上

javascript 复制代码
const startTime = 6; // 早上开始时间(小时)
const noonTime = 12; // 下午开始时间(小时)
const endTime = 18; // 晚上开始时间(小时)
// 判断当前时间所属时间段,并输出相应的问候语
var tp = '';
// 早上6-12
if (hours >= startTime && hours < noonTime) {
	tp = '早上好';
//下午12-18
} else if (hours >= noonTime && hours < endTime) {
	tp = '下午好';
//晚上
} else {
	tp = '晚上好';
} 

完整代码

html 复制代码
<template>
	<view>
		{{tp+',当前时间为:'+datetime}}
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tp:'',//当前时间段
				datetime:'',//当前时间
			}
		},
		methods: {

		},
		onLoad() {
			// 获取当前时间
			const now = new Date();
			// 设置时间段划分的时间点,规定早上:6:00-12:00,下午:12:00-18:00,其余时间设置为晚上
			const startTime = 6; // 早上开始时间(小时)
			const noonTime = 12; // 下午开始时间(小时)
			const endTime = 18; // 晚上开始时间(小时)
			var tp = '';
			// 获取当前日期
			var year = now.getFullYear();
			var month = (now.getMonth() + 1).toString().padStart(2, '0');
			var day = now.getDate().toString().padStart(2, '0');
			// 获取当前时间
			var hours = now.getHours().toString().padStart(2, '0');
			var minutes = now.getMinutes().toString().padStart(2, '0');
			var seconds = now.getSeconds().toString().padStart(2, '0');
			// 拼接日期和时间
			var datetime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			// 判断当前时间所属时间段,并输出相应的问候语
			// 早上6-12
			if (hours >= startTime && hours < noonTime) {
				tp = '早上好';
				//下午12-18
			} else if (hours >= noonTime && hours < endTime) {
				tp = '下午好';
				//晚上
			} else {
				tp = '晚上好';
			} 
			//将数据存入data中
			this.tp = tp;
			this.datetime = datetime
		}
	};
</script>
<style>

</style>
相关推荐
倾颜2 小时前
从 textarea 到 AI 输入框:用 Tiptap 实现 / 命令、@ 引用和结构化请求
前端·langchain·next.js
kyriewen3 小时前
程序员连夜带团队跑路,省了23万:这AI太贵,真的用不起了
前端·javascript·openai
kyriewen4 小时前
你写的代码没有测试,就像出门不锁门——Jest + Testing Library 从入门到不慌
前端·单元测试·jest
yuzhiboyouye5 小时前
web前端英语面试
前端·面试·状态模式
canonical_entropy6 小时前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
前端·低代码·前端框架
东方小月6 小时前
5分钟搞懂Harness Engineering(驾驭工程):从提示词到AI Agent的进化之路
前端·后端·架构
我叫黑大帅6 小时前
为什么需要 @types/react?解决“无法找到模块 react 的声明文件”报错
前端·javascript·面试
之歆6 小时前
DAY_21JavaScript 深度解析:数组(Array)与函数(Function)(一)
前端·javascript
XinZong7 小时前
【AI社交】基于OpenClaw自研轻量化AI社交平台实战
前端
Le_ee7 小时前
ctfweb:php/php短标签/.haccess+图片马/XXE
开发语言·前端·php