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

news2025/1/23 7:13:30

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 中文网

 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)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408236.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue实现生成二维码

目 录 ①首先创建一个vue项目 ②引入qrcodejs2 ③封装组件 1. 创建Vue文件 2. 定义template模板 3. 引入QRCode包 4. 进行封装 5. less控制样式 ④启动项目 1. 在终端输入启动项目命令 2. 在浏览器中输入访问地址 3. 访问生成的二维码 4. 扫码进行解析 与后端用J…

CSS实现文字描边效果

一、介绍 最近在一个项目的宣传页中&#xff0c;设计师使用了文字描边效果&#xff0c;之前我确实没有实现过文字的描边效果&#xff0c;然后我在查阅资料后&#xff0c;知道了实现方法。文字描边分为两种&#xff1a;内外双描边和单外描边&#xff0c;也就是指在给文字加上描…

ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)

项目场景 ElementPlus DateTimePicker日期时间选择器 当我们使用日期时间选择器时&#xff0c;可能会有需求只能选择今日之前或者今日之后&#xff0c;又或者一周内&#xff0c;一个月内的时间&#xff0c;而其他的时间应该禁止被用户选择。 解决 直接看文档&#xff1a; …

【element】el-autocomplete的常见用法

前言&#xff1a; 这段时间突然发现很少写博客了&#xff0c;平时都在平衡工作和休息的时间&#xff0c;周末也没动过笔&#xff0c;而且更重要的是我找不到写的内容了&#xff0c;在经历的初始的新知识的学习阶段后&#xff0c;目前的阶段更加转入对于业务的理解&#xff0c;…

vite基本配置教程

&#x1f469; 个人主页&#xff1a;不爱吃糖的程序媛 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、CSDN内容合伙人&#xff0c;专注于前端各领域技术&#xff0c;成长的路上共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨系列专栏&#xff1a;前端…

C1认证之web基础知识及习题——我的学习笔记

文章目录 目录 文章目录 前言​​​​​​​ Web基础 十四、语义化标签 知识点 习题 十五、表单标签 知识点 习题 十六、转义字符 知识点 习题 十七、Head头 知识点 习题 十八、CSS引入方式 知识点 习题 十九、CSS背景 知识点 习题 二十、CSS文本属性 …

CSS合并单元格四种方式:table/display/flex/grid

目录 方式一&#xff1a;table【最简单写法】 方式二&#xff1a;display: table--不推荐 方式三&#xff1a;display: flex 方式四&#xff1a;display: grid 效果图&#xff1a; 方式一&#xff1a;table【最简单写法】 colspan&#xff1a;规定单元格可横跨的列数。row…

【vue2】近期bug收集与整理02

⭐【前言】 在使用vue2构建页面时候&#xff0c;博主遇到的问题难点以及最终的解决方案。 &#x1f973;博主&#xff1a;初映CY的前说(前端领域) &#x1f918;本文核心&#xff1a;博主遇到的问题与解决思路 目录⭐数据枚举文件的使用⭐elementUI中分页组件使用的注意事项⭐v…

vue解决Not allowed to load local resource

前言 在进行通过本地路径进行加载图片的时候&#xff0c;突然就报了这个问题 Not allowed to load local resource 这个是由于安全性的问题&#xff0c;导致浏览器禁止直接访问本地文件 那么&#xff0c;这边我说一下我具体是怎么解决的吧 问题描述 我的项目是用的vue的vant…

webpack -v报错:Cannot find module ‘webpack-cli/package.json‘

-D安装了webpack和webpack-cli&#xff0c;-g安装了webpack和webpack-cli&#xff0c;但是webpack -v的时候仍然提示需要安装webpack-cli&#xff0c;并且安装之后会报错&#xff1a; 看提示应该是webpack-cli/package.json的位置获取不到正确的&#xff0c;但是并不知道为什么…

【附源码】解决pdf.js跨域并从url动态加载pdf文档

0. Abstract 当我们想用PDF.js从URL加载文档时&#xff0c;将会因遇到跨域问题而中断&#xff0c;且是因为会触发了PDF.js和浏览器的双重CORS block&#xff0c;这篇文章将会介绍&#xff1a;①如何禁用pdf.js的跨域&#xff1f;②如何绕过浏览器的CORS加载URL文件&#xff1f…

axios请求中以params或body形式传递参数的区别

一、前言&#xff1a; 前端发送请求最常⽤的是get请求还有post请求&#xff0c;get请求只能传query参数&#xff0c;query参数都是拼在请求地址上的&#xff0c;post可以传body和query两种形&#xff1b;我在开发的时候通常使用的是Axios第三方库进行网络请求&#xff0c;所以这…

教你如何用CSS修改图片颜色

看到题目是不是吓了一跳&#xff1f;css竟然还有这个操作&#xff1f;还真是第一次听说~ 原理嘛&#xff0c;其实很简单的&#xff0c;用到的就是 CSS3 滤镜filter中的drop-shadow&#xff0c;该滤镜可以给图片非透明区域添加投影。你可以理解为下图 它实现的效果看上去就像使原…

npm install常见报错及问题

目录一、ERESOLVE unable to resolve dependency tree1.可能性一&#xff1a;镜像源无法访问2.可能性二&#xff1a;npm版本过低或者过高3.可能性三&#xff1a;node和npm版本不匹配二、Error: EACCES: permission denied, mkdir /usr/local/lib/node_modules/yarn三、Error: C…

【2022-05-31】JS逆向之易企秀

提示&#xff1a;文章仅供参考&#xff0c;禁止用于非法途径 文章目录前言一、页面分析二、参数u获取三、总结前言 我滴个姥姥&#xff0c;好像是好久没跟了呀&#xff0c;主要是实在不知道写啥了 今天这个表单是最近碰到&#xff0c;就拿出来分享下吧 一、页面分析 表单可以…

解决:code ERESOLVE:ERESOLVE could not resolve 的报错问题

1、报错分析&#xff1a; 其一、报错的代码及信息为&#xff1a; A、报错的代码&#xff1a; ERESOLVE could not resolve B、报错的信息展示为&#xff1a; 其二、报错的问题分析&#xff1a; A、找到报错的代码为&#xff1a; npm i sass-loader7.3.1 B、为什么会报错…

JS获取当前节点的兄弟/父/子节点

目录 JS获取当前节点的方式&#xff1a; 获取子节点&#xff1a; 获取父节点&#xff1a; 获取兄弟节点 JS获取当前节点的方式&#xff1a; 通过事件监听器获取当前节点&#xff1a; <button onclick"fun(this)"></button> function fun(obj){// …

若依vue3 前端微应用改造

一、前言 这篇是记录解决若依vue3版本微应用改造&#xff0c;但是自己之前也试过vue-element-admin框架的微应用改造&#xff0c;前端主流的微应用技术不怎么挑框架的&#xff0c;而且注入方式大同小异。但自己之前尝试的时候踩过很多坑&#xff0c;但是确实比较麻烦&#xff…

Javascript知识【jQuery样式操作案例:jQuery隔行换色】

&#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &#…

【element-ui】 el-table 表格动态合并相同数据单元格最全教程,可指定列+自定义合并条件,附完整代码

el-table合并单元格 1.固定合并 官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列&#xff0c;方法的参数是一个对象&#xff0c;里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。 …