前端常见的时间转换方法合集+动态时钟效果实现

这篇具有很好参考价值的文章主要介绍了前端常见的时间转换方法合集+动态时钟效果实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.将时间戳转换为'YYYY-MM-DD HH:mm:ss'格式-老方法

通过对应的年月日时分秒依次进行拼接,另外还需要对小于10的值进行处理,在前面添加字符串‘0’,转换为常见的两位数时间格式

function transformTime(timestamp = +new Date()) {
    if (timestamp) {
        var time = new Date(timestamp);
        var y = time.getFullYear();
        var M = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var m = time.getMinutes();
        var s = time.getSeconds();
        return y + '-' + addZero(M) + '-' + addZero(d) + ' ' + addZero(h) + ':' + addZero(m) + ':' + addZero(s);
      } else {
          return '';
      }
}
function addZero(m) {
    return m < 10 ? '0' + m : m;
}
transformTime(); // "2023-01-25 15:25:28"

老方法优化思路:

new Date().toJSON获取的是格林威治时间的JSON字符串,例如:'2023-01-25T15:39:11.803Z'

转化为北京时间需要额外增加八个时区,也就是在当前时间戳的基础上增加8个小时

我们需要的是字符串前19位,再把‘T’替换为空格,就是我们需要的时间格式

function time(time = +new Date()) {

  var date = new Date(time + 8 * 3600 * 1000) // 增加8小时

  return date

    .toJSON()

    .substr(0, 19)

    .replace('T', '  ')

}

time() // '2023-01-25 15:39:11'

2.vue中时间转换插件:moment.js

(1)下载安装包

npm install moment --save

(2)在main.js中引入

import moment from 'moment'
Vue.prototype.$moment = moment

(3)使用

moment('需要转换的时间').format('目标转换格式'); 

this.$moment('需要转换的时间').format('YYYY-MM-DD') 

更多时间转换格式,详细可见官网:Moment.js 中文网

前端时间格式转换,vue,项目,javascript,开发语言,ecmascript,vue.js,前端

 3.vue 动态显示实时时间/时间格式化插件:dayjs

(1)下载安装包

npm install dayjs --save

(2)在main.js中引入,全局使用

import dayjs from "dayjs"

Vue.prototype.dayjs = dayjs; 

(3)具体使用

this.dayjs().format('YYYY-MM-DD')  // 当前日期:年月日

this.dayjs().format("YYYY-MM-DD HH:mm:ss")  // 当前日期:年月日 时分秒

/* 获取过去七天时间 */

 for (let i = 6; i >= 0; i--) {

   let date = this.dayjs(this.dayjs()-24*60*60*1000*i).format("YYYY-MM-DD")

   console.log(date)

 }

 dayjs实现钟表效果-实时显示时间

<template>

  <div id="app">

    {{this.datetime}}

  </div>

</template>

<script>

  export default {

    name: "app",

    data() {

      return {

        timer: '',

        datetime: ''

      }

    },

    mounted() {

      /* 每秒定时刷新 */

      this.timer = setInterval(() => {

        this.datetime = this.dayjs().format("YYYY-MM-DD HH:mm:ss")

        console.log(this.datetime)

      }, 1000)

    },

    beforeDestroy() {

      /* 离开页面前销毁定时器 */

      if(this.timer){

        clearInterval(this.timer);

      }

    }

  };

</script>

 

4.将Excel日期时间上传后转成标准时间 

function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}文章来源地址https://www.toymoban.com/news/detail-780406.html

到了这里,关于前端常见的时间转换方法合集+动态时钟效果实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 在js中常见的时间格式及其转换

    在计算机编程中,常见的时间格式有以下几种: 1:ISO 8601 格式:国际标准的日期和时间表示方法。 格式为 “YYYY-MM-DDTHH:mm:ss.sssZ”,其中 “T” 是日期和时间的分隔符,“Z” 表示时区。 例如,“2023-09-29T12:34:56Z” 表示 2023 年 9 月 29 日 12 时 34 分 56 秒的时间点。 2:日期字符

    2024年02月07日
    浏览(36)
  • Java:日期毫秒值和常见日期时间格式相互转换

    本文介绍了Java中,日期毫秒值和常见日期格式相互转换。 提示:以下是本篇文章正文内容,下面案例可供参考 代码示例: 代码示例: 如果想将指定时间转换为毫秒值,相对比较麻烦,这里提供两种方法供参考 利用Calendar.set() 利用DateFormat.parse() 本文介绍了Java中如何将毫秒

    2024年02月16日
    浏览(35)
  • 前端使用scale属性结合CSS动态样式实现动态的图片缩放效果

    废话不多说,直接上代码: 示例一,使用css动态样式结合scale进行src图片的缩放。 示例二,使用css动态样式结合scale进行background背景图图片的缩放。

    2024年01月15日
    浏览(60)
  • 前端开发攻略---Vue通过自定义指令实现元素平滑上升的动画效果(可以自定义动画时间、动画效果、动画速度等等)。

    这个指令不是原生自带的,需要手动去书写,但是这辈子只需要编写这一次就好了,后边可以反复利用。 IntersectionObserver 是一个用于监测元素是否进入或离开视口(viewport)的 API。它可以帮助你在页面滚动时或者元素位置改变时进行回调操作,这样你就可以根据元素是否可见

    2024年04月11日
    浏览(49)
  • Java Stream流 List< T >转换Map方法汇总合集(大概是最全吧)

    本文主要介绍 Java 中利用 Stream 流将 List T 类型数据转换成 Map 类型的几种方法整合汇总,其中包含了toMap()、groupingBy()、partitioningBy()等方法的使用,建议收藏方便查阅,如果有帮助到您,不要吝啬点赞、收藏! tips:本文没有推荐使用三方类库提供的 List 转 Map 工具类方法,因

    2024年02月04日
    浏览(44)
  • 前端常见需求整理 - 日期处理(包含moment、时间戳、日期对象)

    moment对象 使用 UI 框架的时间相关组件时(如 ant-design),默认的绑定值的格式往往为这种。 字符串 部分栗子 对应 YYYY-MM-DD HH:mm:ss 2022-04-12 20:30:00 YYYY/MM/DD HH:mm:ss 2022/04/12 20:30:00 YYYY/MM/DD hh:mm:ss 2022/04/12 08:30:00 YYYY/M/D HH:mm:ss 2022/4/12 20:30:00 YYYY/MM/DD HH:mm 2022/04/12 20:30 日期对象 通过

    2024年02月09日
    浏览(44)
  • 前端框架Layui实现动态树效果(书籍管理系统左侧下拉列表)

    目录 一、前言 1.什么是树形菜单 2.树形菜单的使用场景 二、案例实现 1.需求分析 2.前期准备工作 ①导入依赖 ②工具类 BaseDao(通用增删改查) BuildTree(完成平级数据到父子级的转换) ResponseUtil(将数据转换成json格式进行回显) ③编写实体 3.dao层编写 4.servlet层编写 5.jsp页面搭

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

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

    2024年02月02日
    浏览(65)
  • 前端 jQuery 如何将时间转换为yyyy-MM-dd格式的

    可以使用 JavaScript 内置的 Date 对象和其提供的方法来实现将时间转换为指定格式的字符串。具体可以使用以下代码: 上述代码中,我们首先创建了一个 Date 对象,然后使用其提供的 getFullYear() 、 getMonth() 和 getDate() 方法获取了年份、月份和日期。注意, getMonth() 方法返回的月

    2024年02月06日
    浏览(41)
  • 前端框架Layui实现动态表格效果用户管理实例(对表格进行CRUD操作-附源码)

    目录 一、前言 1.什么是表格 2.表格的使用范围 二、案例实现 1.案例分析 ①根据需求找到文档源码 ②查询结果在实体中没有该属性 2.dao层编写 ①BaseDao工具类 ②UserDao编写 3.Servlet编写 ①R工具类的介绍 ②Useraction编写 4.jsp页面搭建 ①userManage.jsp  ②userEdit.jsp ③userManage.js ④us

    2024年02月16日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包