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

(壹)博主介绍

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

(贰)文章内容

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>

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

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

相关文章

MacOS X 中 OpenGL 环境搭建 Makefile的方式

1&#xff0c;预备环境 安装 brew&#xff1a; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 安装glfw&#xff1a; brew install glfw 安装glew&#xff1a; brew install glew 2.编译 下载源代码…

2024年全国青少年文化遗产知识大赛 中华诗词启动仪式在北京开启

2024年1月27日,在这个岁末年初、辞旧迎新的时刻,北京国家会议中心迎来了一场文化盛宴——全国青少年文化遗产知识大赛中华诗词的启动仪式。本次大赛由教育部批准,中国文物保护技术协会主办,中华诗词发展基金会协办,面向全国中小学生的人文类赛事,大赛的举办旨在激发全国中小学生…

Stable Diffusion系列(四):提示词规则与使用

文章目录 基础规则高级规则插件使用 基础规则 所谓提示词&#xff0c;也就是文生图中的文&#xff0c;由连贯的英语单词或句子组成。其最基础的规则是&#xff1a; 不同提示词之间需要用英文逗号分隔&#xff0c;空格和换行不影响读取想混合多个要素时使用|&#xff0c;相当于…

LLM大语言模型(五):用streamlit开发LLM应用

目录 背景准备工作切记streamlit开发LLM demo开一个新页面初始化session先渲染历史消息接收用户输入模拟调用LLM 参考 背景 Streamlit是一个开源Python库&#xff0c;可以轻松创建和共享用于机器学习和数据科学的漂亮的自定义web应用程序&#xff0c;用户可以在几分钟内构建一…

【网络】:网络套接字

网络套接字 一.网络字节序二.端口号三.socket1.常见的API2.封装UdpSocket 网络通信的本质就是进程间通信。 一.网络字节序 我们已经知道,内存中的多字节数据相对于内存地址有大端和小端之分, 磁盘文件中的多字节数据相对于文件中的偏移地址也有大端小端之分,网络数据流同样有大…

MIPS指令集处理器设计(支持64条汇编指令)

一、题目背景和意义 二、国内外研究现状 (略) 三、MIPS指令集处理器设计与实现 (一).MIPS指令集功能性梳理 1.MIPS指令集架构 (1).mips基础指令集格式总结 MIPS是&#xff08;Microcomputer without interlocked pipeline stages&#xff09;[10]的缩写&#xff0c;含义是…

Matlab处理excel数据

我们新建个excel文档&#xff0c;用Matlab读取里面的内容&#xff0c;计算和判断里面的计算结果是否正确&#xff0c;并打印到另一个文档当中。 新建文档 新建输入文档&#xff0c;文件名TestExcel 编写脚本 [num,txt] xlsread(TestExcel.xlsx); SNcode num(:,1);%从序号中…

qemu 抓取linux kernel vmcore

一、背景 在qemu调试linux kernel时 有时我们会遇到dump 情况&#xff0c;这时可以通过gdb 方式连接分析dump&#xff0c; 但实际中我们用得更多的是离线dump 分析&#xff0c;分析的文件通常是vmcore&#xff08;linux kernel panic 生成的coredump文件&#xff09;或者ramdu…

Python图形用户界面(GUI)编程:大解密

目录 一、概述 二、Python GUI库简介 Tkinter PyQt wxPython Kivy 三、GUI设计原则 用户友好性 一致性 灵活性 可扩展性 四、Python GUI开发流程 需求分析 设计界面布局 选择GUI库和工具 编码实现 测试与调试 发布与部署 五、Python GUI编程案例分析 案例&…

研发日记,Matlab/Simulink避坑指南(九)——可变数组应用Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结归纳 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南(四)——transpose()转置函数Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(五)——CAN解包 DLC Bug》 见《研发日记&#xff0c;Matlab/Si…

2023年算法OOA-CNN-BiLSTM-ATTENTION回归预测(matlab)

OOA-CNN-BiLSTM-Attention鲸鱼算法优化卷积-长短期记忆神经网络结合注意力机制的数据回归预测 Matlab语言。 鱼鹰优化算法&#xff08;Osprey optimization algorithm&#xff0c;OOA&#xff09;由Mohammad Dehghani 和 Pavel Trojovsk于2023年提出&#xff0c;其模拟鱼鹰的捕…

星环科技基于第五代英特尔®至强®可扩展处理器的分布式向量数据库解决方案重磅发布

12月15日&#xff0c;2023 英特尔新品发布会暨 AI 技术创新派对上&#xff0c;星环科技基于第五代英特尔至强可扩展处理器的Transwarp Hippo分布式向量数据库解决方案重磅发布。该方案利用第五代英特尔至强可扩展处理器带来的强大算力&#xff0c;实现了约 2 倍的代际性能提升&…

DELL R740 两个raid10安装centos7.9

DELL R740 两个raid10安装centos7.9 服务器硬件配置&#xff1a; DELL R740&#xff1a;R740/4214R (12C,100W,2.4GHz)*2/128G(32G DDR4 RDIMM)*4 /600G SAS 10K *41.2T SAS 转速10K*4/H750 &#xff08;8G 缓存&#xff09;/750W *2/iDRAC9 要求&#xff1a;600G*4&#xf…

nginx部署前端(vue)项目及配置修改

目录 一、前端应用打包 二、部署前端应用 1、上传前端文件夹 2、修改nginx配置文件 3、重启nginx 三、查看效果 nginx安装参考&#xff1a;linux安装nginx-CSDN博客 一、前端应用打包 打包命令 npm run build 打包成功如下&#xff0c;会在项目路径下生成dist文件夹 二…

备战蓝桥杯---二分(基础)

何为二分&#xff1f;形象的说&#xff0c;就是单调函数求零点。 我们先对二分查找简单的分析一下&#xff08;主要是模板及易错点&#xff09; 1.找>x的第一个位置&#xff1a; 2.找<x的第一个位置&#xff1a; …

【Javaweb】【C00157】基于SSM的宠物护理预定系统(论文+PPT)

基于SSM的宠物护理预定系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的宠物护理预订系统 本系统分为前台系统模块、后台管理员模块以及后台会员用户模块 其中前台系统模块&#xff1a;当游客打开系统的网址后&…

apt-get install时遇错误404

目录 1 问题 2 解决 3 编译源码时其他安装命令 1 问题 执行 sudo apt-get install libglib2.0-dev 或者其他安装命令时出现如下类似错误 http://security.debian.org/debian-security stretch/updates/main amd64 poppler-utils amd64 0.48.0-2deb9u4 404 Not Found [IP: …

四步搞定国赛!快速入门大小模型融合的AI产品开发

前不久&#xff0c;2024中国大学生服务外包创新创业大赛正式启动&#xff01;作为中国高等教育学会“全国普通高校学科竞赛排行榜”竞赛&#xff0c;飞桨赛道已经吸引了超过200位选手报名参赛。 本文旨在助力“A01-基于文心大模型智能阅卷平台设计”赛道选手&#xff0c;更快地…

【备战蓝桥杯】——循环结构

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-bFHV3Dz5xMe6d3NB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

SpringBoot整合EasyCaptcha图形验证码

简介 EasyCaptcha&#xff1a;https://github.com/ele-admin/EasyCaptcha Java图形验证码&#xff0c;支持gif、中文、算术等类型&#xff0c;可用于Java Web、JavaSE等项目。 添加依赖 <dependency><groupId>com.github.whvcse</groupId><artifactId…