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

本文主要是介绍如何在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);

这篇关于如何在JavaScript/Vue中获取当前时间并格式化输出(精确到时分秒)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/966935

相关文章

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格

Java并发编程之如何优雅关闭钩子Shutdown Hook

《Java并发编程之如何优雅关闭钩子ShutdownHook》这篇文章主要为大家详细介绍了Java如何实现优雅关闭钩子ShutdownHook,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 目录关闭钩子简介关闭钩子应用场景数据库连接实战演示使用关闭钩子的注意事项开源框架中的关闭钩子机制1.

Maven中引入 springboot 相关依赖的方式(最新推荐)

《Maven中引入springboot相关依赖的方式(最新推荐)》:本文主要介绍Maven中引入springboot相关依赖的方式(最新推荐),本文给大家介绍的非常详细,对大家的学习或工作具有... 目录Maven中引入 springboot 相关依赖的方式1. 不使用版本管理(不推荐)2、使用版本管理(推

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok?2. @SneakyThrows

在 Spring Boot 中实现异常处理最佳实践

《在SpringBoot中实现异常处理最佳实践》本文介绍如何在SpringBoot中实现异常处理,涵盖核心概念、实现方法、与先前查询的集成、性能分析、常见问题和最佳实践,感兴趣的朋友一起看看吧... 目录一、Spring Boot 异常处理的背景与核心概念1.1 为什么需要异常处理?1.2 Spring B

python处理带有时区的日期和时间数据

《python处理带有时区的日期和时间数据》这篇文章主要为大家详细介绍了如何在Python中使用pytz库处理时区信息,包括获取当前UTC时间,转换为特定时区等,有需要的小伙伴可以参考一下... 目录时区基本信息python datetime使用timezonepandas处理时区数据知识延展时区基本信息

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Java中的工具类命名方法

《Java中的工具类命名方法》:本文主要介绍Java中的工具类究竟如何命名,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java中的工具类究竟如何命名?先来几个例子几种命名方式的比较到底如何命名 ?总结Java中的工具类究竟如何命名?先来几个例子JD

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》:本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多