JS实现获取各种格式的时间

 更新时间:2023年08月08日 08:59:29   作者:一花一world  
在 JavaScript 中,可以使用内置的 Date 对象来获取当前时间,并根据需要格式化成不同的时间格式,下面就跟随小编一起来看看具体的使用吧

在 JavaScript 中,可以使用内置的 Date 对象来获取当前时间,并根据需要格式化成不同的时间格式。以下是获取时间、年月日和各种格式的时间的示例代码:

// 获取当前时间
let currentTime = new Date();
// 获取年份
let year = currentTime.getFullYear();
// 获取月份(注意月份是从0开始计数的,所以需要加1)
let month = currentTime.getMonth() + 1;
// 获取日期
let day = currentTime.getDate();
// 获取小时
let hours = currentTime.getHours();
// 获取分钟
let minutes = currentTime.getMinutes();
// 获取秒数
let seconds = currentTime.getSeconds();
// 获取毫秒数
let milliseconds = currentTime.getMilliseconds();
// 格式化时间为 YYYY-MM-DD
let formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
// 格式化时间为 HH:MM:SS
let formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
// 格式化时间为 YYYY-MM-DD HH:MM:SS
let formattedDateTime = `${formattedDate} ${formattedTime}`;
// 格式化时间为 MM/DD/YYYY
let formattedDateUS = `${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}/${year}`;
// 格式化时间为 HH:MM AM/PM
let formattedTime12Hour = `${hours % 12 || 12}:${minutes.toString().padStart(2, '0')} ${hours < 12 ? 'AM' : 'PM'}`;
console.log('当前时间:', currentTime);
console.log('年份:', year);
console.log('月份:', month);
console.log('日期:', day);
console.log('小时:', hours);
console.log('分钟:', minutes);
console.log('秒数:', seconds);
console.log('毫秒数:', milliseconds);
console.log('格式化日期:', formattedDate);
console.log('格式化时间:', formattedTime);
console.log('格式化日期时间:', formattedDateTime);
console.log('格式化日期(美国格式):', formattedDateUS);
console.log('格式化12小时制时间:', formattedTime12Hour);

这段代码将获取当前时间,并使用不同的方法来获取年份、月份、日期、小时、分钟、秒数和毫秒数。然后,使用不同的格式化方式将时间格式化成不同的格式,包括YYYY-MM-DD、HH:MM:SS、YYYY-MM-DD HH:MM:SS、MM/DD/YYYY和HH:MM AM/PM等格式。你可以根据需要选择合适的格式化方式来获取不同的时间格式。

获取昨天、明天的日期 、获取本周、上周、下周的开始结束日期

在 JavaScript 中,可以使用 Date 对象和一些日期计算方法来获取昨天、明天的日期,以及本周、上周、下周的开始和结束日期。以下是示例代码:

// 获取昨天的日期
let yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
// 获取明天的日期
let tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
// 获取本周的开始日期和结束日期
let today = new Date();
let startOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));
let endOfWeek = new Date(today.setDate(today.getDate() - today.getDay() + 6));
// 获取上周的开始日期和结束日期
let startOfLastWeek = new Date(startOfWeek);
startOfLastWeek.setDate(startOfLastWeek.getDate() - 7);
let endOfLastWeek = new Date(endOfWeek);
endOfLastWeek.setDate(endOfLastWeek.getDate() - 7);
// 获取下周的开始日期和结束日期
let startOfNextWeek = new Date(startOfWeek);
startOfNextWeek.setDate(startOfNextWeek.getDate() + 7);
let endOfNextWeek = new Date(endOfWeek);
endOfNextWeek.setDate(endOfNextWeek.getDate() + 7);
console.log('昨天的日期:', yesterday);
console.log('明天的日期:', tomorrow);
console.log('本周的开始日期:', startOfWeek);
console.log('本周的结束日期:', endOfWeek);
console.log('上周的开始日期:', startOfLastWeek);
console.log('上周的结束日期:', endOfLastWeek);
console.log('下周的开始日期:', startOfNextWeek);
console.log('下周的结束日期:', endOfNextWeek);

这段代码使用 Date 对象和一些日期计算方法来获取昨天和明天的日期。然后,使用一些日期计算方法来获取本周的开始日期和结束日期。接下来,通过调整本周的开始日期和结束日期,来获取上周的开始日期和结束日期,以及下周的开始日期和结束日期。最后,将获取到的日期打印输出。你可以根据需要使用这些日期来进行进一步的处理和展示。

封装整体

当你需要频繁地获取昨天、明天的日期,以及本周、上周、下周的开始和结束日期时,可以封装一个函数来方便调用。以下是一个封装的方案示例:

function getDateRange() {
  let today = new Date();
  let yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);
  let tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  let startOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));
  let endOfWeek = new Date(today.setDate(today.getDate() - today.getDay() + 6));
  let startOfLastWeek = new Date(startOfWeek);
  startOfLastWeek.setDate(startOfLastWeek.getDate() - 7);
  let endOfLastWeek = new Date(endOfWeek);
  endOfLastWeek.setDate(endOfLastWeek.getDate() - 7);
  let startOfNextWeek = new Date(startOfWeek);
  startOfNextWeek.setDate(startOfNextWeek.getDate() + 7);
  let endOfNextWeek = new Date(endOfWeek);
  endOfNextWeek.setDate(endOfNextWeek.getDate() + 7);
  return {
    yesterday,
    tomorrow,
    startOfWeek,
    endOfWeek,
    startOfLastWeek,
    endOfLastWeek,
    startOfNextWeek,
    endOfNextWeek,
  };
}
// 调用函数获取日期范围
let dateRange = getDateRange();
console.log('昨天的日期:', dateRange.yesterday);
console.log('明天的日期:', dateRange.tomorrow);
console.log('本周的开始日期:', dateRange.startOfWeek);
console.log('本周的结束日期:', dateRange.endOfWeek);
console.log('上周的开始日期:', dateRange.startOfLastWeek);
console.log('上周的结束日期:', dateRange.endOfLastWeek);
console.log('下周的开始日期:', dateRange.startOfNextWeek);
console.log('下周的结束日期:', dateRange.endOfNextWeek);

这个封装的方案定义了一个名为 getDateRange 的函数,该函数返回一个包含昨天、明天的日期,以及本周、上周、下周的开始和结束日期的对象。然后,通过调用 getDateRange 函数来获取日期范围,并将结果打印输出。你可以根据需要将这个方案集成到你的项目中,以方便地获取日期范围。

封装方案的优点

代码复用:封装方案可以将重复的代码封装起来,使得代码更加简洁和可维护。

方便调用:封装方案可以将复杂的操作封装成一个函数,方便调用和使用。

提高可读性:封装方案可以给函数起一个有意义的名字,使得代码更加易读和易懂。

封装方案的缺点

限制性:封装方案可能无法满足所有的使用场景,因为它是基于特定需求进行封装的。

可扩展性:封装方案可能难以扩展,特别是当需求发生变化时,可能需要修改封装方案。

使用场景

封装日期范围的方案适用于以下场景:

1.需要频繁地获取昨天、明天的日期,以及本周、上周、下周的开始和结束日期。

2.需要在项目中多处地方使用相同的日期范围。

3.需要将日期范围的获取逻辑封装成一个可复用的函数。

总的来说,封装方案适用于需要复用和简化代码的场景,特别是当某个操作需要在多个地方使用时。但是在使用封装方案时,需要注意其适用性和可扩展性,确保方案能够满足当前的需求,并且能够方便地进行扩展和修改。

到此这篇关于JS实现获取各种格式的时间的文章就介绍到这了,更多相关JS获取时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 小程序实现滑动块效果

    小程序实现滑动块效果

    这篇文章主要为大家详细介绍了小程序实现滑动块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript实现的日期控件具体代码

    JavaScript实现的日期控件具体代码

    JavaScript实现的日期控件,它还会读取当前的时间,有需要的朋友可以参考一下
    2013-11-11
  • JS中for循环的四种写法示例(入门级)

    JS中for循环的四种写法示例(入门级)

    对于for循环相信大家再常用不过了,下面这篇文章主要给大家介绍了关于JS中for循环的四种写法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • js 数组详细操作方法及解析合集

    js 数组详细操作方法及解析合集

    在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下
    2018-06-06
  • JS采用绝对定位实现回到顶部效果完整实例

    JS采用绝对定位实现回到顶部效果完整实例

    这篇文章主要介绍了JS采用绝对定位实现回到顶部效果,以完整实例形式分析了JS定位到页面顶部功能的实现方法,涉及javascript动态操作页面元素与属性的相关技巧,需要的朋友可以参考下
    2016-06-06
  • js 实现复选框只能选择一项的示例代码

    js 实现复选框只能选择一项的示例代码

    下面小编就为大家分享一篇js 实现复选框只能选择一项的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 简单谈谈javascript代码复用模式

    简单谈谈javascript代码复用模式

    这篇文章主要简单谈谈javascript代码复用模式,主要详细介绍了类式继承模式中的默认模式,希望大家能够喜欢。
    2015-01-01
  • ES6学习教程之模板字符串详解

    ES6学习教程之模板字符串详解

    大家都知道在ES6中引进的一种新型的字符串字面量语法-模板字符串,下面这篇文章主要给大家介绍了关于ES6学习教程之模板字符串的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • javascript+css实现俄罗斯方块小游戏

    javascript+css实现俄罗斯方块小游戏

    这篇文章主要为大家详细介绍了javascript+css实现俄罗斯方块小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 原生JS实现多条件筛选

    原生JS实现多条件筛选

    这篇文章主要为大家详细介绍了原生JS实现多条件筛选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08

最新评论