vue实现获取系统当前年月日时分秒星期

news2024/11/18 5:30:19

(壹)博主介绍

🌠个人博客: 尔滨三皮
⌛程序寄语:木秀于林,风必摧之;行高于人,众必非之。

(贰)文章内容

img

<!-- 获取系统当前时间 -->
<template>
  <div class="currentTimeBox">
    <p>{{ nowDate + " " + nowTime + " " + nowWeek }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nowDate: "", // 当前日期
      nowTime: "", // 当前时间
      nowWeek: "", // 当前星期
    }
  },
  mounted() {
    this.currentTime()
  },
  methods: {
    currentTime() {
      setInterval(this.getDate, 500)
    },
    getDate() {
      var _this = this
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let week = new Date().getDay()
      let hh = new Date().getHours()
      let ms = new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds()
      let mf = new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()
      if (week == 1) {
        this.nowWeek = "星期一"
      } else if (week == 2) {
        this.nowWeek = "星期二"
      } else if (week == 3) {
        this.nowWeek = "星期三"
      } else if (week == 4) {
        this.nowWeek = "星期四"
      } else if (week == 5) {
        this.nowWeek = "星期五"
      } else if (week == 6) {
        this.nowWeek = "星期六"
      } else {
        this.nowWeek = "星期日"
      }
      _this.nowTime = this.fillZero(hh) + "时" + mf + "分" + ms + "秒"
      _this.nowDate = this.fillZero(yy) + "年" + this.fillZero(mm) + "月" + this.fillZero(dd) + "日"
    },
    // 给时间补零
    fillZero(str) {
      var realNum
      if (str < 10) {
        realNum = "0" + str
      } else {
        realNum = str
      }
      return realNum
    },
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.getDate) {
      console.log("销毁定时器")
      clearInterval(this.getDate) // 在Vue实例销毁前,清除时间定时器
    }
  },
}
</script>

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

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

相关文章

增存量市场大爆发!国产通信中间件「反攻」

梳理2023年智能驾驶的发展脉络可见&#xff0c;消费者对智能驾驶的认可度和接受度越来越高&#xff0c;带动高速NOA迈向了规模化普及新阶段&#xff0c;城市NOA初露锋芒。 从更长远的行业变革周期来看&#xff0c;智能驾驶的技术迭代还在继续&#xff0c;叠加电子电气架构的深…

【hcie-cloud】【23】容器编排【k8s】【Kubernetes常用工作负载、Kubernetes调度器简介、Helm简介、缩略词】【下】

文章目录 单机容器面临的问题、Kubernetes介绍与安装、Kubernetes对象的基本操作、Kubernetes YAML文件编写基础Kubernetes常用工作负载Kubernetes常用工作负载简介创建一个无状态nginx集群无状态工作负载Deployment说明无状态工作负载Deployment常见操作创建一个有状态的MySQL…

Notepad 将多行转换成字符串,合并成一行

notepad 将多行转换成字符串&#xff0c;合并成一行 (1) 快捷键 ctrl H &#xff0c;选择 【替换】&#xff0c; (2) 【查找目标】&#xff0c;输入 \r\n &#xff0c; 这个正则表达式的含义是 换行回到行首&#xff0c;相当于 windows的 enter 键&#xff1a; \r&#xff…

Redis 学习笔记 2:Java 客户端

Redis 学习笔记 2&#xff1a;Java 客户端 常见的 Redis Java 客户端有三种&#xff1a; Jedis&#xff0c;优点是API 风格与 Redis 命令命名保持一致&#xff0c;容易上手&#xff0c;缺点是连接实例是线程不安全的&#xff0c;多线程场景需要用线程池来管理连接。Redisson&…

Hinton、LeCun、Bengio、清华马维英等人当选2023 ACM Fellow!

大家好我是二狗。 美国当地时间1月24日&#xff0c;美国计算机学会&#xff08;ACM&#xff09;正式宣布了2023年 ACM Fellow的名单&#xff0c;今年一共有68名科学家入选。 其中包括万维网的发明人、2016年度图灵奖得主蒂姆伯纳斯李&#xff08;Tim Berners-Lee &#xff09…

Go语言基础之单元测试

1.go test工具 Go语言中的测试依赖go test命令。编写测试代码和编写普通的Go代码过程是类似的&#xff0c;并不需要学习新的语法、规则或工具。 go test命令是一个按照一定约定和组织的测试代码的驱动程序。在包目录内&#xff0c;所有以_test.go为后缀名的源代码文件都是go …

使用CyberRT写第一个代码

0. 简介 计算框架是自动驾驶系统中的重中之重&#xff0c;也是整个系统得以高效稳定运行的基础。为了实时地完成感知、决策和执行&#xff0c;系统需要一系列的模块相互紧密配合&#xff0c;高效地执行任务流。由于各种原因&#xff0c;这些模块可能位于不同进程&#xff0c;也…

ArcGIS雨涝风险模拟

所谓雨涝模拟分析&#xff0c; 就是模拟降雨量达到一定强度&#xff0c; 城市的哪些区域容易被淹没形成内涝。 雨涝模拟更重要的是提前预测&#xff0c; 可在预测结果的基础上进行实地勘察&#xff0c; 为项目规划、风险防控等工作提供指导作用。 雨涝模拟的原理和思想多种…

MyBatis概述与MyBatis入门程序

MyBatis概述与MyBatis入门程序 一、MyBatis概述二、入门程序1.准备开发环境&#xff08;1&#xff09;准备数据库&#xff08;2&#xff09;创建一个maven项目 2.编写代码&#xff08;1&#xff09;打包方式和引入依赖&#xff08;2&#xff09;新建mybatis-config.xml配置⽂件…

基于springboo校园社团信息管理系统

摘要 随着高校规模的扩大和学生社团活动的日益丰富多彩&#xff0c;校园社团信息管理成为一个备受关注的问题。为了更有效地组织、管理和推动校园社团的发展&#xff0c;本文设计并实现了一套基于Spring Boot的校园社团信息管理系统。本系统以实现社团信息的集中管理和高效运营…

Pytest 识别case规则

一、Python测试框架&#xff0c;主要特点有以下几点&#xff1a; 简单灵活&#xff0c;容易上手&#xff1b;支持参数化&#xff1b;能够支持简单的单元测试和复杂的功能测试&#xff0c;还可以用来做selenium/appnium等自动化测试、接口自动化测试&#xff08;pytestrequests…

uniapp将方法挂载到全局

前言 首先需要有一个自己封装的方法,话不多说,直接上代码! 方法文件(common.js) const getnav (page, type, param token) > {// type 判断是否 需要验证登录if (!page) return uni.showModal({title: 提示,content: 功能暂未开通~,showCancel: false})let user uni.g…

大模型视觉理解能力更进一步,谷歌提出全新像素级对齐模型PixelLLM

论文题目&#xff1a;Pixel Aligned Language Models 论文链接&#xff1a;https://arxiv.org/abs/2312.09237 项目主页&#xff1a;Pixel Aligned Language Models 近一段时间以来&#xff0c;大型语言模型&#xff08;LLM&#xff09;在计算机视觉领域中也取得了巨大的成功&a…

详解操作系统各章大题汇总(死锁资源分配+银行家+进程的PV操作+实时调度+逻辑地址->物理地址+页面置换算法+磁盘调度算法)

文章目录 第三章&#xff1a;死锁资源分配图例一例二 第三章&#xff1a;银行家算法第四章&#xff1a;进程的同步与互斥做题步骤PV操作的代码小心容易和读者写者混 1.交通问题&#xff08;类似读者写者&#xff09;分析代码 2.缓冲区问题&#xff08;第二个缓冲区是复制缓冲区…

探索Pyecharts关系图绘制技巧:炫酷效果与创意呈现【第42篇—python:Pyecharts水球图】

文章目录 Pyecharts绘制多种炫酷关系网图引言准备工作代码实战1. 基本关系网图2. 自定义节点样式和边样式3. 关系网图的层级结构4. 添加标签和工具提示5. 动态关系网图6. 高级关系网图 - Les Miserables 示例7. 自定义关系网图布局8. 添加背景图9. 3D 关系网图10. 热力关系网图…

CVPR——Latex模版下载

CVPR官网 -> AuthorGuidelines 链接&#xff1a;AuthorGuidelines

基于Java SSM框架实现学生就业服务平台系统项目【项目源码】

基于java的SSM框架实现学生就业服务平台系统演示 JSP技术介绍 JSP技术本身是一种脚本语言&#xff0c;但它的功能是十分强大的&#xff0c;因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时&#xff0c;它可以使显示逻辑和内容分开&#xff0c;这就极大的方便了学生…

Python笔记15-实战小游戏飞机大战(中)

文章目录 创建第一个敌机创建一群敌机创建多行敌机让敌机移动射杀敌机生成新的敌机群结束游戏有敌机到达屏幕底端游戏结束 在上一篇基础上继续 本示例源码地址 点击下载 创建第一个敌机 在屏幕上放置外星人与放置飞船类似。每个外星人的行为都由Alien 类控制&#xff0c;我们…

[Python图像处理] 使用OpenCV创建深度图

使用OpenCV创建深度图 双目视觉创建深度图相关链接双目视觉 在传统的立体视觉中,两个摄像机彼此水平移动,用于获得场景上的两个不同视图(作为立体图像),就像人类的双目视觉系统: 通过比较这两个图像,可以以视差的形式获得相对深度信息,该视差编码对应图像点的水平坐标的…

智慧文旅:打造无缝旅游体验的关键

随着科技的快速发展和消费者需求的不断升级&#xff0c;旅游业正面临着前所未有的变革压力。智慧文旅作为数字化转型的重要领域&#xff0c;旨在通过智能化、数据化手段为游客提供更加优质、便捷、个性化的服务&#xff0c;打造无缝的旅游体验。本文将深入探讨智慧文旅在打造无…