uniapp封装各个时间方法

难点:在项目中我们经常会用到时间转换或时间比对加减问题

为了方便很多页面去调用时间方法,我把时间方法封装成了公共方法

1.首先在根目录创建文件夹与pages平级,我这里创建了plugins文件夹

2.其次在plugins文件夹下面创建index.js文件,这里引入需要挂载的全局封装的js方法

3.Conversiontime.js里面就是我自己封装的调用各个时间的方法

4.需要把我们创建的plugins文件夹全局挂载到main.js上

5.最后我们在用到的页面去调用这些方法即可(这里为了更好的演示,在onLoad()函数调用了这些方法

看下详细代码

1.plugins文件下index.js挂载js代码

import tab from './tab'
import auth from './auth'
import modal from './modal'
import conTime from './Conversiontime.js'
export default {
  install(Vue) {
    // 页签操作
    Vue.prototype.$tab = tab
    // 认证对象
    Vue.prototype.$auth = auth
    // 模态框对象
    Vue.prototype.$modal = modal
    // 时间对象
    Vue.prototype.$conTime = conTime
  }
}

2.在Conversiontime.js封装的时间方法代码

export default {
    // 获取时间
    getTime() {
        return new Date(new Date().getTime() + (parseInt(new Date().getTimezoneOffset() / 60) + 8) * 3600 *
            1000);
    },
    //转换北京标准时间为标准日期格式时间
    formatDate(d) {
        var date = new Date(d);
        var YY = date.getFullYear() + '-';
        var MM =
            (date.getMonth() + 1 < 10 ?
                '0' + (date.getMonth() + 1) :
                date.getMonth() + 1) + '-';
        var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        var hh =
            (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm =
            (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
            ':';
        var ss =
            date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return YY + MM + DD + ' ' + hh + mm + ss;
    },
    //比较同一天的两个时间大小, 是否 t1 > t2。如 11:30 和 10:00, 返回true
    compareTimeInSameDay(t1, t2) {
        let d = new Date()
        let ft1 = d.setHours(t1.split(":")[0], t1.split(":")[1])
        let ft2 = d.setHours(t2.split(":")[0], t2.split(":")[1])
        return ft1 > ft2
    },
    //判断时间是否为标砖的日期时间格式
    JudgmentDate(time){
        var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
        var regExp = new RegExp(reg);
        if (!regExp.test(time)) {
            console.log("登录时间格式不正确,正确格式为: 2000-01-01 12:00:00 ");
            return;
        }
    },
    //判断日期,时间大小
    compareTime(logintime, logouttime) {
        if (logintime.length > 0 && logouttime.length > 0) {
            var logintimeTemp = logintime.split(" ");
            var logouttimeTemp = logouttime.split(" ");

            var arrloginDate = logintimeTemp[0].split("-");
            var arrlogoutDate = logouttimeTemp[0].split("-");

            var arrloginTime = logintimeTemp[1].split(":");
            var arrlogoutTime = logouttimeTemp[1].split(":");

            var allLoginDate = new Date(arrloginDate[0], arrloginDate[1], arrloginDate[2], arrloginTime[0],
                arrloginTime[1], arrloginTime[2]);
            var allLogoutDate = new Date(arrlogoutDate[0], arrlogoutDate[1], arrlogoutDate[2], arrlogoutTime[0],
                arrlogoutTime[1], arrlogoutTime[2]);

            if (allLoginDate.getTime() >= allLogoutDate.getTime()) {
                console.log(allLoginDate.getTime(), allLogoutDate.getTime())
                return false;
            } else {
                console.log(allLoginDate.getTime(), allLogoutDate.getTime())
                return true;
            }
        } else {
            return false;
        }
    },
    //比较日期大小
    compareDate(startTime, endTime) {
        var arys1 = new Array();
        var arys2 = new Array();
        if (startTime != null && endTime != null) {
            arys1 = startTime.split('-');
            var sDate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);
            arys2 = endTime.split('-');
            var eDate = new Date(arys2[0], parseInt(arys2[1] - 1), arys2[2]);
            if (sDate >= eDate) {
                return false;
            } else {
                return true;
            }
        }
    }
}

3.把puligns文件全局挂载到main.js代码(vue2.0

import Vue from 'vue'
import App from './App'
import store from './store' // store
import plugins from './plugins' // plugins
import './permission' // permission
Vue.use(plugins)

Vue.config.productionTip = false
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
  ...App
})

app.$mount()

4.用到的页面调用此方法代码(this.$conTime.方法名()

    onLoad() {
            let curTime = new Date();//获取当前时间
            this.$conTime.JudgmentDate(curTime)//判断时间格式是否为标准日期格式
            let newcurTime= this.$conTime.formatDate(curTime) //当前北京时间转换北京标准时间为标准日期格式时间
            let noneTime = new Date(curTime.setSeconds(curTime.getSeconds() + 120));//图形验证码失效时间
            let newnoneTime= this.$conTime.formatDate(noneTime)//失效后的图形验证码北京时间转换北京标准时间为标准日期格式时间
            let compare=this.$conTime.compareTime(newcurTime,newnoneTime) //比较日期时间
            console.log(compare,'比较')
        }

这样就大功告成了!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode题解 20(17,79) 电话号码的字母组合,单词搜索<回溯>

文章目录电话号码的字母组合(17)代码解答单词搜索(79)代码解答电话号码的字母组合(17) 思路: 根据题意我们必须根据数字获取对应的字符数组&#xff0c;因此我们先定义1个字符数组表示这个电话表 private String[] letters {"","","abc","…

C语言例程:学生成绩管理程序

学生成绩管理程序 实例说明 编制一个统计存储在文件中的学生考试分数的管理程序。设学生成绩以一个学生一条记录的 形式存储在文件中&#xff0c;每个学生记录包含的信息有姓名、学号和各门功课的成绩。要求编制具有以 下几项功能的程序&#xff1a;求出各门课程的总分&#…

Redis单线程还是多线程?IO多路复用原理

目录专栏导读一、Redis版本迭代二、Redis4.0之前为什么一直采用单线程&#xff1f;三、Redis6.0引入多线程四、Redis主线程和IO线程是如何完成请求的&#xff1f;1、服务端和客户端建立socket连接2、IO线程读取并解析请求3、主线程执行请求命令4、IO线程会写回socket和主线程清…

cron表达式 详解

corn表达式是&#xff1a;由若干数字、空格、符号按一定的规则&#xff0c;组成的一组字符串&#xff0c;从而表达时间的信息。 好像和正则表达式有点类似哈&#xff0c;都是一个字符串表示一些信息。Cron 表达式生成器&#xff1a; https://www.smart-tools.cn/cron简介Cron 表…

部署私有npm 库

使用verdacciohttps://verdaccio.org/安装verdaccio使用npm全局安装npm install -g verdaccio安装完成以后&#xff0c;输入verdaccio -h出现如下相关提示&#xff0c;说明verdaccio安装成功。运行verdaccio直接执行verdaccio出现如下相关提示&#xff0c;说明verdaccio启动成功…

【OJ比赛日历】快周末了,不来一场比赛吗? #03.25-03.31 #12场

CompHub 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号同时会推送最新的比赛消息&#xff0c;欢迎关注&#xff01;更多比赛信息见 CompHub主页 或 点击文末阅读原文以下信息仅供参考&#xff0c;以比赛官网为准目录2023-03-25&…

React 入门(超详细)

目录前言&#xff1a;一、React 简介1. 什么是 React2. React 的特点3. React 高效的原因4. React 官网5. React的主要原理6. Facebook为什么要建造React?二、React 的基本使用1. 基础代码2. 效果3. 相关 js 库4. 创建虚拟DOM的两种方式5. 虚拟DOM与真实DOM6. 虚拟DOM与真实DO…

Linux命令运行原理shell和bash

目录前言什么是shell,什么是bash?ls -l 执行过程前言 学习操作系统的过程中我们经常在自己的shell中执行一些Linux命令&#xff0c;那么当我们输入一个类似于 ls -a 这样的命令式&#xff0c;发生了什么&#xff1f; 换句话说&#xff0c;从我们在shell中输入ls -a 按下回车…

基于深度学习的瓶盖检测系统(Python+YOLOv5深度学习模型+清新界面)

摘要&#xff1a;基于深度学习的瓶盖检测系统用于传送带或日常场景中瓶盖检测识别&#xff0c;提供实时瓶盖检测定位和计数&#xff0c;辅助瓶盖生产加工过程的自动化识别。本文详细介绍基于深度学习的瓶盖检测系统&#xff0c;在介绍算法原理的同时&#xff0c;给出Python的实…

E - 积木画(状态压缩DP)

E - 积木画&#xff08;状态压缩DP&#xff09; 1、问题 E - 积木画 2、分析 这道题很明显是一道DP题&#xff0c;而且是一个简化版的状态压缩DP。 &#xff08;1&#xff09;状态表示 f[i][j]f[i][j]f[i][j]表示前面i−1i-1i−1已经摆好&#xff0c;并且第iii列的状态是j…

第七讲 贪心

文章目录股票买卖 II货仓选址&#xff08;贪心:排序中位数&#xff09;糖果传递&#xff08;❗贪心&#xff1a;中位数&#xff09;雷达设备&#xff08;贪心排序&#xff09;付账问题&#xff08;平均值排序❓&#xff09;乘积最大&#xff08;排序/双指针&#xff09;后缀表达…

SpringBoot——基于SpringBoot整合Mybatis的入门案例+sql提示配置

开发流程图 先选择springboot项目创建&#xff0c;此处3.0以上的springboot项目最低都要java17版本 让数据库表中的属性名和实体类中的属性名保持一致就可以完成查询结果的自动封装。 2.引入myabtis相关依赖&#xff0c;配置mybatis 这里可以手动选择mybatis框架的依赖和mysq…

常见的卷积神经网络结构——分类、检测和分割

本文持续更新~~ 本文整理了近些年来常见的卷积神经网络结构&#xff0c;涵盖了计算机视觉领域的几大基本任务&#xff1a;分类任务、检测任务和分割任务。对于较复杂的网络&#xff0c;本文只会记录其中的核心模块以及重要的网络设计思想&#xff0c;并不会记录完整的网络结构。…

POM依赖报错解决方案汇总

POM依赖报错解决方案汇总 POM依赖报错解决方案汇总 状况 1 创建完一个maven项目,在pom文件在引入依赖,等下方自动导入加载完毕,去查看IDEA工具的Maven Projects工具选项中Dependencies 依然后依赖红色报错 2 在pom文件中,引用依赖后,该依赖的版本号处直接出现红色 3 IDEA工具…

蓝桥杯Web前端练习题-----水果拼盘

一、水果拼盘 介绍 目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案&#xff0c;本题可以使用 Flex 属性快速完成布局。 准备 开始答题前&#xff0c;需要先打开本题的项目代码文件夹&#xff0c;目录结构如下&#xff1a; ├── css │ └── style.…

值得记忆的STL常用算法,分分钟摆脱容器调用的困境,以vector为例,其余容器写法类似

STL常用算法 概述&#xff1a; 算法主要是由头文件<algorithm> <functional> <numeric>组成 <algorithm>是所有STL头文件中最大的一个&#xff0c;范围涉及到比较、交换、查找、遍历操作、复制、修改等等 <nuneric>体积很小&#xff0c;只包括…

【AWS入门】通过AWS存储网关(Storage Gate Way)实现文件共享

目录1. 创建网关2. 创建文件共享3. Windows文件共享4. LINUX文件共享1. 创建网关 配置缓存存储需要加载一会儿&#xff0c;此处需要等候 根据上述配置&#xff0c;会自动生成一个EC2实例 2. 创建文件共享 网关&#xff1a;选择上述步骤中创建的网关&#xff0c;选择即可 文…

电路设计的一些概念

锁存器的产生 论述1 (转)时序电路&#xff0c;生成触发器&#xff0c;触发器是有使能端的&#xff0c;使能端无效时数据不变&#xff0c;这是触发器的特性。 组合逻辑&#xff0c;由于数据要保持不变&#xff0c;只能通过锁存器来保存。 第一个代码&#xff0c;由于是时序逻…

基于XML的自动装配~

基于XML的自动装配之场景模拟&#xff1a; 自动装配&#xff1a;根据指定的策略&#xff0c;在IOC容器中匹配某一个bean&#xff0c;自动为指定的bean中所依赖的类类型或者接口类型赋值 之前我们学过的依赖注入&#xff0c;我们在为不同属性赋值时&#xff0c;例如类类型的属性…

可别再用BeanUtils了(性能拉胯),试试这款转换神器

老铁们是不是经常为写一些实体转换的原始代码感到头疼&#xff0c;尤其是实体字段特别多的时候。有的人会说&#xff0c;我直接使用get/set方法。没错&#xff0c;get/set方法的确可以解决&#xff0c;而且也是性能较高的处理方法&#xff0c;但是大家有没有想过&#xff0c;要…