首页 > 其他分享 >js获取时间戳转化成日期格式的直接使用和封装

js获取时间戳转化成日期格式的直接使用和封装

时间:2023-12-04 13:31:54浏览次数:27  
标签:10 const 转化成 getHours js time date 封装 getMinutes


 一、在页面中直接使用

1.  通过模板字符串使用:

{{ times }}

2.  定义变量存放时间:

data() {
  return {
    times: "",
  };
},

3.  在 mounted() 方法里调用:

mounted() {
  const date = new Date();
  const Y = date.getFullYear();
  const M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  const D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  const h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  const m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  this.times = Y + "-" + M + "-" + D + " " + h + ":" + m;
},

二、封装函数(推荐)

1.  在单独的 js 文件内书写格式化的代码:

// 封装转化时间格式的函数,js时间戳转化成日期格式
export function timestampToTime(timestamp) {
   const time = new Date(timestamp);
   const Y = time.getFullYear();
   const M = time.getMonth() + 1 < 10 ? "0" + (time.getMonth() + 1) : time.getMonth() + 1;
   const D = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
   const h = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
   const m = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
   const s = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
   return Y + "-" + M + "-" + D + " " + h + ":" + m;
}

2.  导入方法并使用:

多个方法可以在main.js内全局导入
import "./utils/time";


在使用到该方法的页面按需导入(推荐)
import { timestampToTime } from "@/utils/time";


3.  定义变量存放时间并使用:

data() {
  return {
    times: "",
  };
},

4.  在 mounted() 函数中获取当前时间戳并转化为固定格式赋值给定义的变量显示:

(这里我已经在js文件中return时指定显示格式)

mounted() {
  let time = +new Date();
  this.times = timestampToTime(time);
  // this.times = timestampToTime(time, 'yyyy-mm-dd h:m:s');
},

三、其他

可以通过路由传参把获取的时间在另一个页面使用:路由传参


标签:10,const,转化成,getHours,js,time,date,封装,getMinutes
From: https://blog.51cto.com/u_15961699/8676748

相关文章

  • SpringBoot+MybatisPlus 存json读json
    基础环境springboot2.5.3mysql8.0.22fastjson22.0.38主要配置1.返回VO字段添加注解@ApiModelProperty("字段内容")@TableField(typeHandler=JacksonTypeHandler.class)privateList<JSONObject>columnContent;2.返回Mapper中的resultMap中字段添加......
  • python 属性装饰器和对应的setter方法,属性的封装和安全性控制
    当我们在类中定义属性时,通常希望能够对属性的读取和写入进行控制,以确保数据的完整性和安全性。属性装饰器和对应的setter方法提供了一种实现属性封装和安全性控制的方法。属性装饰器是Python的一种语法特性,用于修饰类的方法,使其表现为一个属性而不是一个普通的方法。通过使用属性......
  • 页面滚动点击返回至顶部,js怎么实现
    当页面要滚回顶部时,使用scrollTop属性,设置值为0即可当页面具有DOCTYPE,或者说指定了DOCTYPE时,使用document.documentElement.scrollTop。当页面不具有DOCTYPE,或者说没有指定了DOCTYPE时,使用document.body.scrollTop。为了兼容各种情况,建议同时使用这两种写法。documen......
  • emscripten 中c 代码引用外部js 函数
    主要是一个简单的学习,webassebly支持通过import调用环境的函数(比如调用浏览器或者nodejs中的一些方法)简单说明方法很多,包含了emscripten提供的调用js的宏,但是以下使用了一个emscripten提供的--js-library功能--js-library简单说明--js-library主要是实现emcc在编译的时......
  • JSON
    JSON.stringify和JSON.parseJSON.stringify():作用:用于将JavaScript对象或值转换为JSON字符串语法:JSON.stringify(value[,replacer[,space]])value:要转换为JSON字符串的值replacer(可选):用于控制转换过程的函数或数组space(可选):控制结果字......
  • 后端 Java 对象转 json(不用第三方依赖的拼接方式)
    需求:编写工具类要尽可能不用任意一个jar包依赖,或者尽可能精简原有数据:ArpsParams{actualProduction=[{mouth=2022-07,oilProdDaily=366088.33},{mouth=2022-08,oilProdDaily=380806.78}],predictionSegment=[{mouth=2022-07,oilProdDaily=367832.31},{mouth=2022-0......
  • 基于uQRCode封装的Vue3二维码生成插件
    标题:基于uQRCode封装的Vue3二维码生成插件摘要:本文介绍了一种基于uQRCode封装的Vue3二维码生成插件,可以在Javascript运行环境下生成二维码并返回图片地址。该插件适用于所有Javascript运行环境,并且支持微信小程序。本文将详细介绍该插件的使用方法,并给出一个基于Vue3的示例。关......
  • 全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解
    JSSDK使用步骤步骤一:绑定安全域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。步骤二:引入JS文件:在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需进一步提升服务稳定性,当上述资源不......
  • dump 日志收集与分析(jmap 和 jstack 工具)讲解与实战操作
    目录一、概述二、常见的dump工具三、dump可能会导致进程卡住风险(生产谨慎操作)四、安装JDK五、jmap介绍与示例讲解1)jmap介绍2)Kafka安装(单机)1、下载安装包2、配置环境变量3、配置kafka3、配置ZooKeeper4、启动kafka5、验证3)示例讲解【示例一】执行jmap命令查看内存使用情况【......
  • vue3中css使用js中的变量
    <scriptsetuplang="ts">import{SoundOutlined}from'@ant-design/icons-vue'constprops=defineProps({title:{type:String,default:''},color:{type:String,default:'#000'}......