前端JS必用工具【js-tool-big-box】,时间日期转换学习一

这篇具有很好参考价值的文章主要介绍了前端JS必用工具【js-tool-big-box】,时间日期转换学习一。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端JS必用工具【js-tool-big-box】,时间日期转换学习一,js-tool-big-box,前端,javascript,学习,npm

这一小节,我们学习一下  js-tool-big-box 这个npm 前端工具库,关于时间日期格式转换的一部分,后续还会有。

目录

1 安装

2 项目中引入 

3 工具使用 

3.1 年月日时分秒的单独处理

3.2 以上方法中第一个参数

3.3 日期时间的转换

 3.4 更个性的时间格式

4 本节总结


1 安装

使用 js-tool-big-box 需要先安装,可执行以下命令进行安装

npm install js-tool-big-box

前端JS必用工具【js-tool-big-box】,时间日期转换学习一,js-tool-big-box,前端,javascript,学习,npm

2 项目中引入 

不管你是Vue项目,或者是React项目中,你都可以引入这个npm包,进行工具使用,引入代码如下。工具中暴露了 timeBox 这个大的对象供大家使用

import { timeBox } from 'js-tool-big-box';

3 工具使用 

3.1 年月日时分秒的单独处理

很多时候,我们的业务比较独特,比如“2024年”,可能这个时候比较独特之处在于,不显示年,而是显示其他的语种的年,如果都引入一些语言转换包,代码库体积比较大,所以这个的方法做了独特处理。

代码如下:

const year = timeBox.getMyYear(null, '年');
    console.log(year);
    const yearALB = timeBox.getMyYear(null, 'سنة');
    console.log(yearALB);
    const month = timeBox.getMyMonth(null, '月');
    console.log(month);
    const date = timeBox.getMyDate(null, '日');
    console.log(date);
    const hour = timeBox.getMyHour(null, 'hour');
    console.log(hour);
    const minutes = timeBox.getMyMinutes(null, 'min');
    console.log(minutes);
    const seconds = timeBox.getMySeconds(null, '秒');
    console.log(seconds);

展示效果如下图:

前端JS必用工具【js-tool-big-box】,时间日期转换学习一,js-tool-big-box,前端,javascript,学习,npm

这里可以说是随心所欲,根据自己的产品续期文案,想怎么传入就怎么传入,很灵活。

3.2 以上方法中第一个参数

3.1中方法内都传入了null的第一个参数,如果传入null表示当前时间,当然,我们也可以传入一个其他的时间,代码如下:

const year = timeBox.getMyYear('2012', '年');
    console.log('传入参数的年::', year);
    const month = timeBox.getMyMonth('2012-03', '月');
    console.log('传入参数的月::', month);
    const date = timeBox.getMyDate(1363098142000);
    console.log('传入时间戳不用显示单位::', date);

显示效果如下图:

前端JS必用工具【js-tool-big-box】,时间日期转换学习一,js-tool-big-box,前端,javascript,学习,npm

3.3 日期时间的转换

业务开发中,日期时间的转换很常见,使用频率非常高,而且业务千变万化,非常灵活。比如要展示2024-02-03,比如要展示2024-02-11 10:22,再比如只展示 03-12,甚至还有只展示10:22,还有的需要展示成10点12分,还有2024/02/11 这样子的,所以,我们的工具js-tool-big-box就要很灵活。

工具中提供了三种固定格式的转换,分别是 

年月日:YYYY-MM-DD

年月日时分:YYYY-MM-DD hh:mm

年月日时分秒:YYYY-MM-DD hh:mm:ss

当然,年月日中间的展示符号也可以随意替换,代码如下:

const dateTime1 = timeBox.getFullDateTime(null, 'YYYY-MM-DD', '/');
    console.log(dateTime1);
    const dateTime2 = timeBox.getFullDateTime(null, 'YYYY-MM-DD hh:mm', '~');
    console.log(dateTime2);
    const dateTime3 = timeBox.getFullDateTime(null, 'YYYY-MM-DD hh:mm:ss');
    console.log(dateTime3);

这里的 getFullDateTime 接受3个入参,第一个表示传入的时间,可以不传,第二个表示需要转换的格式,第三个表示替换年月日中间的符号,可以随意替换,你看这里就用了斜杠和小弯弯线。效果如下图:

前端JS必用工具【js-tool-big-box】,时间日期转换学习一,js-tool-big-box,前端,javascript,学习,npm

 3.4 更个性的时间格式

如果你需要更加个性的时间展示方式,比如10点12分这样子,你可以自己利用公共方法自由组合起来:

const hourShow= timeBox.getMyDate(null, '点');
const minShow= timeBox.getMyMinutes(null, '分钟');
const timeShow = `${hourShow} ${minShow}`;

4 本节总结

好啦,本小节就先到这里啦,这一小节主要是说了 js-tool-big-box 日期时间相关的几个API,后边继续,我们总结一下:

方法名 作用 参数说明

timeBox.getMyYear

返回年+单位

第一个参数必填,如果无需特定时间,就传入null,null表示当前时间;

第二个参数非必填,表示要展示的单位

timeBox.getMyMonth

返回月+单位 同上

timeBox.getMyDate

返回日+单位 同上

timeBox.getMyHour

返回时+单位 同上

timeBox.getMyMinutes

返回分+单位 同上

timeBox.getMySeconds

返回秒+单位 同上

timeBox.getFullDateTime

返回日期时间

第一个参数必填,如果无需特定时间,就传入null,null表示当前时间;

第二个参数必填,目前支持传入三种字符串数据,分别是"YYYY-MM-DD"、“YYYY-MM-DD hh:mm”、“YYYY-MM-DD hh:mm:ss”

第三个参数非必填,表示可以自定义年月日中间的分隔符文章来源地址https://www.toymoban.com/news/detail-855906.html

到了这里,关于前端JS必用工具【js-tool-big-box】,时间日期转换学习一的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js

    一、计算精度现象举例 举例1、加法 举例2、减法    举例3、乘法 举例3、除法 二、JS为什么会有计算精度的问题 JavaScript 内部只有一种数字类型Number,也就是说,JavaScript 语言的底层根本没有整数,所有数字都是以IEEE-754标准格式64位浮点数形式储存,1与1.0是相同的。因为有

    2024年02月10日
    浏览(42)
  • 图文剖析 big.js 四则运算源码

    big.js,一个小型、快速的用于任意精度的十进制算术的JavaScript 库。 big.js 用于解决平常项目中进行算术运算时精度丢失引起的结果不准确的问题。和 big.js 类似的两个库 bignumber.js 和 decimal.js 也都是出自同一作者(MikeMcl)之手。 作者在 这里 详细说明了他们之间的区别 big.j

    2024年02月05日
    浏览(113)
  • 前端中不同格式的日期相互转换(字符串、时间戳)js相关

    在项目中遇到了,需要实现字符串和Unix时间戳的相互转换,随手记录一下。 我使用的组件库为Naive UI,涉及到的组件为日期选择器(Date Picker)。作者在文档中写道: 实话说我不喜欢这个 feature,因为多数情况下,传递时间字符串不是个最佳实践。但是现实世界是复杂的,我

    2024年02月02日
    浏览(65)
  • 前端js常用的一些工具类

    ip 封装ajax工具类 日期工具类 数据工具类 时间工具类 上述工具类extends.js 工具类

    2024年02月16日
    浏览(45)
  • node.js+NPM包管理器+Webpack打包工具+前端项目搭建

    javascript运行环境(无需依赖html文件) BFF,服务于前端的后端 官网下载安装,node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行(或者通过工具的集成终端) node 01.js 如果出现权限原因,可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

    2024年02月07日
    浏览(71)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(60)
  • IDEA 中使用 Big Data Tools 连接大数据组件

    简介 Big Data Tools 插件可用于 Intellij Idea 2019.2 及以后的版本。它提供了使用 Zeppelin,AWS S3,Spark,Google Cloud Storage,Minio,Linode,数字开放空间,Microsoft Azure 和 Hadoop 分布式文件系统(HDFS)来监视和处理数据的特定功能。 下面来看一下 Big Data Tools 的安装和使用,主要会配置

    2023年04月08日
    浏览(60)
  • Big Data Tools插件(详细讲解安装,连接,包教包会!!!)

    🐮博主syst1m 带你 acquire knowledge! ✨博客首页——syst1m的博客💘 😘《CTF专栏》超级详细的解析,宝宝级教学让你从蹒跚学步到健步如飞🙈 😎《大数据专栏》大数据从0到秃头👽,从分析到决策,无所不能❕ 🔥 《python面向对象(人狗大战)》突破百万的阅读量,上过各种各样

    2024年02月03日
    浏览(38)
  • Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls

    正投影相机和透视相机的区别 如果都以高处俯视去看整个场景,正投影相机就类似于 2d 的可视化的效果,透视相机就类似于人眼观察效果 调整 left, right, top, bottom 范围大小 如果你想整体预览全部立方体,就需要调整相机的渲染范围,比如设置上下左右的范围。 使用场景:正

    2024年02月04日
    浏览(43)
  • 大数据:HDFS操作的客户端big data tools和NFS

    2022找工作是学历、能力和运气的超强结合体,遇到寒冬,大厂不招人,可能很多算法学生都得去找开发,测开 测开的话,你就得学数据库,sql,oracle,尤其sql要学,当然,像很多金融企业、安全机构啥的,他们必须要用oracle数据库 这oracle比sql安全,强大多了,所以你需要学

    2024年02月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包