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

news2024/11/8 6:49:14

效果图

核心代码

获取当前时间

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1114653.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【分布式】入门级NCCL多机并行实践 - 02

# 背景知识 大模型和分布式训练对数据的吞吐量以及并行度都有很高的要求&#xff0c;NCCL就是在这个背景下诞生的。 如果你是一个只会写写Python&#xff0c;调用PyTorch和Horovod的算法萌新&#xff0c;可能对于分布式底层的东西不太了解&#xff0c;在下岗热潮中被主管逼着…

分布式锁之mysql 锁

文章目录 使用数据锁&#xff1a;悲观锁 或者 乐观锁悲观锁乐观锁mysql锁总结 使用数据锁&#xff1a;悲观锁 或者 乐观锁 一个sql&#xff1a;直接更新时判断&#xff0c;在更新中判断库存是否大于0 update table set surplus (surplus - buyQuantity) where id 1 and (surp…

Occupancy占据网络论文讲解与分析

一.MonoScene 1.概要 a.使用单目相机&#xff0c;不用深度估计和点云来实现占据网络。 b.提出了一种2D-3D的一种转换方法。 c.在3D-unet底部加入3DCRP来捕获长距离的一个信息。 2.模型结构 图像先经过一个2D的unet结构&#xff0c;这里论文里用的预训练的EfficientNet&am…

I350网卡烧录oprom,通过UEFI PXE引导方案

Intel发布的I350标准固件都是用于LOM设计的。固件已配置LOM模式&#xff0c;不需要搭配外挂flash&#xff0c;将efi driver包进BIOS中就可以使用PXE功能&#xff0c;因此NIC类型的时候直接烧录oprom会报错。 如使用外部flash存放PXE ROM&#xff0c;需要将固件修改为NIC的配置…

蓝桥杯(砝码称重,C++)

思路&#xff1a; 1、用到动态规划思想。 2、用ans[i][j]记录用前i个砝码&#xff0c;能不能称出重量j。 3、详细思路见代码注释&#xff0c;易懂。 #include<iostream> #include<cmath> using namespace std; int main() {int n;int a[110];//记录每个砝码重量int…

8+非肿瘤+线粒体+实验生信思路解析

今天给同学们分享一篇非肿瘤线粒体实验的生信文章“Role of mitochondrial metabolic disorder and immune infiltration in diabetic cardiomyopathy: new insights from bioinformatics analysis”&#xff0c;这篇文章于2023年2月1日发表在J Transl Med期刊上&#xff0c;影…

EPLAN_004#常用功能(四)

线号&#xff1a;火线L&#xff0c;零线N&#xff0c;正极P&#xff0c;负极是M 一、基于设备的设计 也可以通过下面的&#xff08;设备选择&#xff09;进行选择 如果是批量选型&#xff0c;可以在设备导航器中进行多个相同元器件进行选型。&#xff08;筛选器可以自定义&…

前端使用qrcodejs2插件实现根据网址生成二维码

实现效果&#xff1a; 实现方法&#xff1a; 1.安装插件 npm install --save qrcodejs2 2.可以全局引入&#xff0c;也可以只在使用的vue文件中引入 import QRCode from qrcodejs2; 3.在vue文件的template中设置放置二维码的div <div id"qrcode"></di…

8个视频剪辑素材网站,免费下载

找视频剪辑素材就上这8个网站&#xff0c;免费下载&#xff0c;可商用&#xff0c;赶紧收藏起来~ 免费视频素材 1、菜鸟图库 https://www.sucai999.com/video.html?vNTYxMjky 菜鸟图库网素材非常丰富&#xff0c;网站主要还是以设计类素材为主&#xff0c;高清视频素材也很多…

ssm+vue的毕业生跟踪调查反馈管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的毕业生跟踪调查反馈管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…

整理uvc驱动相关函数的调用流程

目录 1、uvc_video.c初始化函数的调用关系 2、uvc_queue.c3、uvc_v4l2.c4、v4l2-core5、数据传输1、分配一个gadget请求2、请求一个queue 1、uvc_video.c // uvc_video.c uvc_video_encode_header uvc_video_encode_data uvc_video_encode_bulk uvc_video_encode_isoc uvcg_vi…

Python学习基础笔记七十八——Socket编程1

现在的软件开发基本上都需要网络通讯。 不管是传统计算机软件&#xff0c;还是手机软件&#xff0c;还是物联网嵌入系统软件&#xff0c;这些都要和其他网络系统进行通讯。 而当今世界基本上都是使用TCP/IP协议进行通讯的。 TCP/IP协议是一种传输数据的方案。 收发信息的程序…

每个epoch的溯源(MNE)

每个epoch的溯源&#xff1a; from mne.minimum_norm import apply_inverse_epochs stcs apply_inverse_epochs(epochs,inverse_operator,lambda2,method,pick_ori"normal"# naveevoked.nave, )

ArrayDeque 源码解析(JDK1.8)

目录 一. 前言 二. 源码解析 2.1. 概览 2.2. 属性 2.3. 构造方法 2.4. 入队 2.4.1. addFirst(E, e) 2.4.2. add(E e) & addLast(E e) 2.4.3. offer(E e) 2.5. 扩容 2.6. 出队 2.6.1. poll() & pollFirst() 2.6.2. pollLast() 2.7. 删除元素 2.8. 获取元…

springweb+vue前后端分离开发,集成部署

背景&#xff1a; 在自己做测试的时候&#xff0c;由于需要项目和项目的前端页面使用同样接口访问&#xff0c;所以需要将前端代码部署到后端项目下。前端采用vue&#xff0c;后端采用springboot。 首先时建立一个vue项目&#xff0c;这个可以参照网上的案例&#xff0c;创建方…

思维模型 巴纳姆效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。 1 巴纳姆效应的应用 1.1 “占卜者”的故事 1 遇到占卜师的汤姆 汤姆是一位年轻的上班族&#xff0c;他一直对自己的未来感到迷茫和困惑。有一天&#xff0c;他在一家神秘的占卜店里遇到…

Python处理PDF——PyMuPDF的安装与使用详解

​​​​​​​ 1、PyMuPDF简介 1. 介绍 在介绍PyMuPDF之前&#xff0c;先来了解一下MuPDF&#xff0c;从命名形式中就可以看出&#xff0c;PyMuPDF是MuPDF的Python接口形式。 MuPDF MuPDF 是一个轻量级的 PDF、XPS和电子书查看器。MuPDF 由软件库、命令行工具和各种…

28 mysql 数据记录的 存储更新删除

前言 前面 我们探讨了 索引记录的 新增, 更新, 删除 这里 我们来看一下 mysql 的核心数据记录的 新增更新删除 这里 来看一下 增删改 的相关实现 数据记录 和 索引记录 的处理方式是一致的 mysql 数据记录的存储 新增部分参见 自增长主键的实现 以及 记录的插入 mysql…

解决提交到App Store时的ITMS-90478和ITMS-90062错误

目录 引言 正文 1. 什么是ITMS-90478和ITMS-90062错误&#xff1f; 2. 解决方法 2.1 确定当前的版本号和构建号 2.2 递增版本号和构建号 2.3 再次尝试提交应用 总结 参考资料 错误记录 摘要&#xff1a;本文为iOS技术博主分享&#xff0c;将详细介绍解决提交应用到App…

QCustomPlot添加标题头

1 效果图 2 代码 is2Label QString("add title layout element");// add title layout element:ui->customplot->plotLayout()->insertRow(0);ui->customplot->plotLayout()->addElement(0, 0, new QCPTextElement(ui->customplot, xAxis2Lab…