如何在JavaScript/Vue中获取当前时间并格式化输出(精确到时分秒)

如何在JavaScript/Vue中获取当前时间并格式化输出(精确到时分秒)

在这里插入图片描述

不只是树,人也是一样,在不确定中生活的人,能比较经得起生活的考验,会锻炼出一颗独立自主的心。在不确定中,就能学会把很少的养分转化为巨大的能量,努力生长。
——林清玄 《桃花心木》

获取当前时间

在JavaScript中,Date对象是处理日期和时间的主要方式。要获取当前的日期和时间,你可以简单地创建一个新的Date实例:

const now = new Date();

这个now对象包含了你执行代码时的准确日期和时间。

分解时间成分

要格式化日期时间,首先需要从Date对象中提取出年、月、日、时、分和秒。可以通过以下方法获取:

const year = now.getFullYear();  // 获取年份
const month = String(now.getMonth() + 1).padStart(2, '0');  // 获取月份,月份从0开始所以要+1
const date = String(now.getDate()).padStart(2, '0');  // 获取日期
const hours = String(now.getHours()).padStart(2, '0');  // 获取小时
const minutes = String(now.getMinutes()).padStart(2, '0');  // 获取分钟
const seconds = String(now.getSeconds()).padStart(2, '0');  // 获取秒钟

注意这里使用了String().padStart(2, '0')来确保每个时间部分都是双位数的格式,例如将9转换为09

格式化输出

一旦有了这些分解出来的时间成分,就可以按照需要将它们组合成任何格式。以下是一些常见的格式化输出方式:

ISO 8601格式(国际标准格式):

const isoFormat = `${year}-${month}-${date}T${hours}:${minutes}:${seconds}`;
console.log(isoFormat);

美式格式(AM/PM制):

const amPm = hours >= 12 ? 'PM' : 'AM';
const formattedHours = ((hours % 12) || 12).toString().padStart(2, '0');  // 将24小时制转换为12小时制
const usFormat = `${month}/${date}/${year} ${formattedHours}:${minutes}:${seconds} ${amPm}`;
console.log(usFormat);

简单的数字格式:

const simpleFormat = `${date}/${month}/${year} ${hours}:${minutes}:${seconds}`;
console.log(simpleFormat);

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

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

相关文章

CTF例题和知识点

[ACTF2020 新生赛]Include 打开靶机发现一个超链接,点击之后出现一段话 “Can you find out the flag?” 查看源码注入,无果 仔细看url,发现有flag.php 根据题目提示,该题应该是文件包含漏洞,因此可以判断出此题是PH…

1847B - Hamon Odyssey

这里写目录标题 Odd Divisor※前置知识🐬完整代码:Odd Divisor 洛谷题目|CF原题|V站题目 ※前置知识 and 即 & —— 按位与。 按位与的特性: a , b ≥ a a n d b a , b ≥ a \ and \ b a,b≥a and b 因此可以得出题中的最小值: a 1 a n d a 2 a n d .…

C数据结构:栈和队列应用场景

计算器实例 main.c #include <stdlib.h> #include <stdio.h> #include "sqstack.h"void compute(sqstack* snum,datatype* data) {datatype n1,n2,n;st_pop(snum,&n2);st_pop(snum,&n1);switch(*data){case :n n1 n2;break;case -:n n1 - n2…

基于SpringBoot的全国风景区WebGIS按省展示实践

目录 前言 一、全国风景区信息介绍 1、全国范围内数据分布 2、全国风景区分布 3、PostGIS空间关联查询 二、后台查询的设计与实现 1、Model和Mapper层 2、业务层和控制层设计 三、WebGIS可视化 1、省份范围可视化 2、省级风景区可视化展示 3、成果展示 总结 前…

LocalDate 数据库不兼容问题,因为LocalDate 是 long 类型的

我今天遇到一报错&#xff1a; SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession316f9272] was not registered for synchronization because synchronization is not active JDBC Connection [HikariProxyConnection2127597288 wrapping com.mysql.cj.jdbc…

P9420 [蓝桥杯 2023 国 B] 子 2023 / 双子数

蓝桥杯2023国B A、B题 A题 分析 dp问题 根据子序列&#xff1a;2&#xff0c;20&#xff0c;202&#xff0c;2023分为4个状态&#xff1b; 当前数字为2时&#xff0c;处于dp[0]&#xff0c;或者和dp[1]结合成dp[2]&#xff1b; 当前数字为0时&#xff0c;和dp[0]结合成dp[…

keil5软件安装教程(MDKv5.39)

keil5软件安装分为三部分&#xff1a; 目录 1.安装mdk 2.激活mdk 3.安装STM32芯片包 1.安装mdk 安装包链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1PZoGhzI5Y19ROv7xe9QJKA?pwdgt3s 提取码&#xff1a;gt3s 1、下载keil5的压缩包并解压&#xff0c;鼠…

buuctf-misc题目练习三

荷兰宽带数据泄露 BIN 文件&#xff0c;也称为二进制文件&#xff0c;是一种压缩文件格式&#xff0c;可以 包含图像和视频等信息 , 并被许多应用程序用于各种目的。 RouterPassView是一个找回路由器密码的工具。 大多数现代路由器允许备份到一个文件路由器的配置&#xff0c…

CDGA|电子行业数据治理六大痛点及突围之道

CDGA|电子行业数据治理六大痛点及突围之道 随着信息技术的迅猛发展&#xff0c;电子行业对数据的需求和依赖日益增强。然而&#xff0c;数据治理作为确保数据质量、安全性及有效利用的关键环节&#xff0c;在电子行业中却面临着一系列痛点。本文将深入探讨电子行业数据治理的六…

CTFHUB-技能树-Web题-RCE(远程代码执行)-文件包含

CTFHUB-技能树-Web题-RCE&#xff08;远程代码执行&#xff09; 文件包含 文章目录 CTFHUB-技能树-Web题-RCE&#xff08;远程代码执行&#xff09;文件包含解题方法1:![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/71f7355b3c124dfe8cdf1c95e6991553.png#pic_ce…

【Java基础】Maven继承

1. 前言 Maven 在设计时&#xff0c;借鉴了 Java 面向对象中的继承思想&#xff0c;提出了 POM 继承思想。 2. Maven继承 当一个项目包含多个模块时&#xff0c;可以在该项目中再创建一个父模块&#xff0c;并在其 POM 中声明依赖&#xff0c;其他模块的 POM 可通过继承父模…

超级好用的C++实用库之文件目录操作

&#x1f4a1; 需要该C实用库源码的大佬们&#xff0c;可扫码关注文章末尾的微信公众号二维码&#xff0c;或搜索微信公众号“希望睿智”。添加关注后&#xff0c;输入消息“超级好用的C实用库”&#xff0c;即可获得源码的下载链接。 概述 文件和目录操作是操作系统层面上的基…

4D 成像毫米波雷达:新型传感器助力自动驾驶

1 感知是自动驾驶的首要环节&#xff0c;高性能传感器必不可少 感知环节负责对侦测、识别、跟踪目标&#xff0c;是自动驾驶实现的第一步。自动驾驶的实现&#xff0c;首先要能够准确理解驾驶环境信息&#xff0c;需要对交通主体、交通信号、环境物体等信息进行有效捕捉&#x…

热爱电子值得做的电子制作实验

加我zkhengyang&#xff0c;进嵌入式音频系统研究开发交流答疑群(课题组) AM/FM收音机散件制作&#xff0c;磁带随声听散件&#xff0c;黑白电视机散件制作&#xff0c;功放散件制作&#xff0c;闪光灯散件制作&#xff0c;声控灯散件&#xff0c;等等&#xff0c;可提高动手能…

推荐2个干净、资源多的看剧网站给大家

推荐2个干净、可以看抖音短剧的网站 最近好多看剧站都看不了&#xff0c;发现几个不错的看剧站给大家&#xff0c;主要推荐资源多&#xff0c;广告少&#xff0c;免VIP的。 策驰影视网 界面干净无公告&#xff0c;更新的也快&#xff08;强烈推荐&#xff09; 星辰影视网 界…

MultiBoot 和 QuickBoot

目录 MultiBoot简介MultiBoot 实现方式设置 bitstream 属性使用 ICAPE2 原语WBSTAR 寄存器定义 MultiBoot 工作流程生成mcs固化文件 Tcl 指令Fallback状态寄存器MultiBoot 正常加载状态看门狗1超时状态看门狗2超时状态CRC 错误和无 DESYNC 命令IDCODE 错误状态CRC 错误状态 Wat…

【八股】消息中间件

通用MQ问题 使用场景 异步发送(验证码、短信、邮件)MYSQL和Redis,ES之间的数据同步分布式事务削峰填谷消息的重复消费问题 👉定义:消费者已经消费了消息,但是可能由于网络抖动或者消费者挂了导致ack回执没有发送给MQ 👉解决方案 为每条消息设置一个唯一的标识id,在…

17 【Aseprite 作图】参考图和颜色

参考图 Aseprite 作图&#xff0c;“打开 - 一张参考图”&#xff0c;再把参考图拉到右边&#xff0c;就可以得到参考图和缩略图 取消选区 通过“选择 - 取消选择”&#xff0c;可以 取消选区 复制参考图的颜色 打开参考图后&#xff0c;参考图的调色板就会出现参考图所有的…

202466读书笔记|《一天一首古诗词》——借问梅花何处落,风吹一夜满关山

202466读书笔记|《一天一首古诗词》——借问梅花何处落&#xff0c;风吹一夜满关山 上册下册 《一天一首古诗词》作者李锡琴&#xff0c;蛮早前加入书架的已购买书籍&#xff0c;这次刚好有点时间&#xff0c;利用起来读完。 赏析没有细看&#xff0c;只读了诗词部分&#xff0…

2024.5.9 —— LeetCode 高频题复盘

目录 LCR 174. 寻找二叉搜索树中的目标节点518. 零钱兑换 IILCR 159. 库存管理 III450. 删除二叉搜索树中的节点59. 螺旋矩阵 IILCR 127. 跳跃训练16. 最接近的三数之和LCR 143. 子结构判断75. 颜色分类LCR 121. 寻找目标值 - 二维数组 LCR 174. 寻找二叉搜索树中的目标节点 题…