uniapp时间格式和距离格式的转换

 更新时间:2023年09月21日 15:31:25   作者:爱健身的小刘同学  
这篇文章主要介绍了uniapp时间格式和距离格式的转换,第一种是把  YYYY-MM-DD hh:mm:ss 转换成 MM月DD日,第二种是把  hh:mm:ss 转换成 hh:mm,本文给大家介绍的非常详细,需要的朋友可以参考下

时间格式的转换

第一种是把  YYYY-MM-DD hh:mm:ss 转换成 MM月DD日

第二种是把  hh:mm:ss 转换成 hh:mm

 
/**
 *  格式化时间 1
 *  把传入的完整时间分为 MM月DD日 的格式
 * @returns
 */
export function formatDate(timeStr) {
	const date = new Date(timeStr);
	const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 获取月份,并补齐为两位
	const day = date.getDate().toString().padStart(2, "0"); // 获取日期,并补齐为两位
	return `${month}月${day}日`;
}
/**
 *  格式化时间 2
 *  把hh:mm:ss变为 hh:mm 的格式
 * @returns
 */
export function formatHour(timeStr) {
	return timeStr.split(':').slice(0, 2).join(':');
}

距离格式

因为获取到的格式是 以m 为单位的

我们需要的效果是 以km为单位 所以需要对数据进行处理

希望得到的值为 11.1km 这种 保留一位小数

如果当得到的值小于1km 的时候 就显示本身 不用去转换

{{ formatDistance(item.distance) }}
export default {
  methods: {
    formatDistance, // 将函数添加到组件的 methods 中
  },
}
  // 把这段放到utils文件内 方便复用
  formatDistance(distance) {
      if (distance >= 1000) {
        // 大于等于 1000 米时,转换为千米
        return (distance / 1000).toFixed(1) + 'km';
      } else {
        // 小于 1000 米时,直接显示米
        return distance + 'm';
      }
    },

到此这篇关于uniapp时间格式和距离格式的转换的文章就介绍到这了,更多相关uniapp时间格式转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • bootstrap布局中input输入框右侧图标点击功能

    bootstrap布局中input输入框右侧图标点击功能

    这篇文章主要为大家详细介绍了bootstrap布局中input输入框右侧图标点击功能实现的相关代码,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JS复制对应id的内容到粘贴板(Ctrl+C效果)

    JS复制对应id的内容到粘贴板(Ctrl+C效果)

    这篇文章主要给大家介绍了利用JS实现复制指定对应id的内容到粘贴板(Ctrl+C效果),文中给出了详细的介绍和示例代码,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • javascript折半查找详解

    javascript折半查找详解

    这篇文章主要介绍了javascript折半查找详解的相关资料,需要的朋友可以参考下
    2015-01-01
  • HTML页面滚动时获取离页面顶部的距离2种实现方法

    HTML页面滚动时获取离页面顶部的距离2种实现方法

    获取离滚动页面的顶部距离有两种方法一是DOM;而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下
    2013-09-09
  • 详解webpack4.x之搭建前端开发环境

    详解webpack4.x之搭建前端开发环境

    这篇文章主要介绍了详解webpack4.x之搭建前端开发环境,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • require.js的用法详解

    require.js的用法详解

    本文给大家介绍require.js的用法,require.js的诞生是为了解决两大问题,第一实现js文件的异步加载,避免网页失去响应,第二管理模块之间的依赖性,便于代码的编写和维护,对require.js用法感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • JavaScript中Array.from()的用法总结

    JavaScript中Array.from()的用法总结

    本文主要介绍了JavaScript中Array.from()的用法总结
    2023-05-05
  • js 弹出新页面避免被浏览器、ad拦截的一种新方法

    js 弹出新页面避免被浏览器、ad拦截的一种新方法

    本文为大家介绍了使用js弹出新页面同时避免被浏览器、ad拦截等,具体的实现方法如下,大家不妨参考参考
    2014-04-04
  • 小程序input数据双向绑定实现方法

    小程序input数据双向绑定实现方法

    这篇文章主要介绍了小程序input数据双向绑定实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • JS中Generator函数与async函数用法介绍

    JS中Generator函数与async函数用法介绍

    javascript中经常会用到异步编程,在ES6之后我们使用的 Generator函数、async函数、promise都是我们异步编程的一大助力,这里我们主要讲解Generator、async函数,并且简介他们之间的一些联系,本篇文章会带着一些简易案例,方便大家理解使用
    2023-06-06

最新评论