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

前端常见的时间转换方法合集+动态时钟效果实现如果实现钟表效果 动态实时显示时间 前端时间格式转换

大家好,欢迎来到IT知识分享网。

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

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

老方法优化思路:

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中引入

(3)使用

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

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

更多时间转换格式,详细可见官网:Moment.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日期时间上传后转成标准时间 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/132034.html

(0)
上一篇 2025-08-03 17:20
下一篇 2025-08-03 17:26

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信