效果图
核心代码
获取当前时间
toString()
方法将数字转换为字符串padStart(2, '0'):
padStart()
方法用于在字符串头部填充指定的字符,使其达到指定的长度。该方法接受两个参数:第一个参数为期望得到的字符串长度,第二个参数为要填充的字符。
// 获取当前时间
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,其余时间为晚上
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 = '晚上好';
}
完整代码
<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>