四步教你实现一个前端的动态实时时间(可自定义时间格式)

前言:我是在Vue中做的

 1、将你的实时时间放在一个合适的位置

<div style="position: relative; padding-top: 0px; margin-top: -5px"><div style="position: absolute; left: auto; color: black; background-color: #7fd584; font-size: 38px">{{ dateFormat(date) }}</div>
</div>

2、在data里面的return里添加date 

date: new Date(),

3、在组件挂载完成后获取当前时间,并且设置1秒获取一次 

mounted() {// 在组件挂载完成后启动定时器let _this = this;this.timer1 = setInterval(() => {_this.date = new Date(); }, 1000);
},

4、在methods里设置显示的时间格式方法

//实时时间
dateFormat(time) {var date = new Date(time);var year = date.getFullYear();/* 在日期格式中,月份是从0开始的,因此要加0* 使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05* */var month =date.getMonth() + 1 < 10? "0" + (date.getMonth() + 1): date.getMonth() + 1;var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();var hours =date.getHours() < 10 ? "0" + date.getHours() : date.getHours();var minutes =date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();var seconds =date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();//  var mseconds =//         date.getMilliseconds() ;if (seconds % 2 == 0) {this.flag = 1;} else {this.flag = 0;}//整点自动刷新 发货时间和创建时间if (seconds == "00" && minutes == "00" && date.getHours() % 6 == 0) {// console.log(mseconds)this.$router.go(0)//  this.initTime();//  console.log(minutes)}// 拼接return (year +"-" +month +"-" +day +" " +hours +":" +minutes +":" +seconds);
},

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

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

相关文章

欧科云链研究院:坎昆升级后,Layer2变得更好了吗?

本文由欧科云链研究院OKG Research联合PANews出品&#xff1a;以数据为导向&#xff0c;洞察真实的链上世界。 作者&#xff5c;Jason Jiang, OKG Research 坎昆升级后&#xff0c;以太坊L2的交易费用降低明显且吞吐量有所提升&#xff0c;但整体生态并没有迎来想象中的繁荣景…

教你怎么不开DLSS3.0也能有效提高永劫无间帧数

永劫无间&#xff0c;一款国风的多人对战竞技游戏&#xff0c;游戏画面特别精美&#xff0c;在游戏中给玩家强烈的打击感&#xff0c;玩家在游玩过程中仿佛置身于游戏&#xff0c;而且此游戏非常受玩家欢迎。游戏中可以进行三人、双人、单人进行游玩&#xff0c;我们需要选择出…

Numpy常用的30个经典操作以及代码演示

目录 以下是具体的操作步骤和示例代码&#xff1a; 数组创建 数组操作 数组计算 统计分析 矩阵操作 这些操作涵盖了数组创建、数组操作、数组计算、统计分析和矩阵操作等多个方面. 以下是具体的操作步骤和示例代码&#xff1a; 首先导入Numpy import numpy as np数组…

sublime中无法找到Package Control或Install Package

在Crtl Shift P 中无法查找到Package Control或Install Package或调用产生报错。 可以尝试在 首选项 ---- > 设置中 检查配置文件"ignored_packages":紧跟的中括号中是否为空&#xff0c;如果不为空请删除其中内容。 如果不确定内容&#xff0c;可以用下面的…

【Linux】日志

日志是记录软件运行过程中发生的事件的一种手段&#xff0c;通常包含以下内容&#xff1a; 时间戳&#xff1a;记录日志条目创建的确切时间。这对于追踪事件发生的时间顺序至关重要。日志级别&#xff1a;表示日志信息的严重性或重要性&#xff0c;常见的级别包括 DEBUG、INFO…

【Linux】Linux背景历史

Linux背景历史 Linux背景Linux是什么&#xff1f;计算机的发展unix发展史Linux发展史开源Linux官网以及版本更替Linux企业应用现状 Linux环境的安装 Linux背景 Linux是什么&#xff1f; Linux(Linux Is Not UniX)&#xff0c;一般指GNU/Linux&#xff0c;是一种免费使用和自由…

Qt QChart 曲线图表操作

学习目标&#xff1a;QChart 曲线图表操作 学习内容 QT中的QChart类提供了一个功能强大的图表绘制框架,可以根据需求方便高效地绘制各种类型的图表,主要特点如下: 支持多种常见图表类型,如线图、条形图、饼图、散点图等各种类型。开发者只需要选择合适的图表类和数据即可绘制…

一键调仓/组合买卖?篮子交易功能,PTrade如何进行篮子交易?

篮子交易&#xff0c;也叫组合交易&#xff0c;是指同时完成一个股票或期货组合的交易。 “篮子交易”功能&#xff0c;通过模板一键导入一篮子股票&#xff0c;可对篮子中的股票进行剔除 或使用持仓替代操作&#xff0c;同时可设定报价方式、单笔超价、交易方式等。并实时显示…

android13 rom 开发总纲说明

1. 这里是文章总纲&#xff0c;可以在这里快速找到需要的文章。 2. 文章一般是基于标准的android13&#xff0c;有一些文章可能会涉及到具体平台&#xff0c;例如全志&#xff0c;瑞芯微等一些平台。 3.系统应用 3.1系统应用Launcher3桌面相关&#xff1a; 3.2系统应用设置S…

深度学习--基础语法

目录 pytorch的tensor与numpy 关系 tensor与numpy的转换&#xff1a; 区别&#xff1a; 创建tensor 一 numpy数组&#xff0c;list列表转换为tensor 二 未初始化创建tensor 创建空的 PyTorch 张量 e&#xff1a; 使用 torch.Tensor() 创建指定大小的张量 f&#xff1a;…

HNU-2024操作系统实验-Lab9-Shell

一、 实验目的 理解Shell程序的原理、底层逻辑和Shell依赖的数据结构等 在操作系统内核MiniEuler上实现一个可用的Shell程序 能够根据相关原理编写一条可用的Shell指令 二、 实验过程 首先从底层出发&#xff0c;实现Shell程序 1.在src/include目录下新建prt_shell.h头文…

产线工控安全怎么做

随着工业自动化的推进&#xff0c;工控系统在现代生产线中的应用越来越广泛&#xff0c;但随着网络安全威胁的不断演变&#xff0c;产线工控系统的安全也面临着前所未有的挑战。面对这种情况&#xff0c;可以使用MCK主机加固&#xff08;深信达&#xff09;解决方案为产线工控安…

ROS基础学习-ROS运行管理

ROS运行管理 目录 1. ROS运行管理简述2. ROS元功能包2.1 概念2.2 作用2.3 实现 3. ROS-launch文件3.1. ROS节点管理launch文件3.1.1 概念3.1.2 作用3.1.3 使用 3.2 launch文件标签 1. ROS运行管理简述 ROS是多进程(节点)的分布式框架&#xff0c;一个完整的ROS系统实现&#x…

C++ 入门08:运算符重载

往期回顾&#xff1a; C 入门05&#xff1a;类和对象-CSDN博客 C 入门06&#xff1a;类的进阶&#xff08;构造函数的重载与拷贝构造函数&#xff09;-CSDN博客 C 入门07&#xff1a;静态成员和常量成员-CSDN博客 一、前言 在前面的文章学习中&#xff0c;我们学习了类和对象的…

在Spring Boot项目中集成分布式追踪系统

在Spring Boot项目中集成分布式追踪系统 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在复杂的分布式系统中&#xff0c;定位和解决问题是一项挑战。分布式追踪系统通过跟踪请求的调用链&#xf…

基于搭载 DJYOS 的 STM32H730 的低空无人驾驶无人机解决方案探究

摘要&#xff1a;本文详细阐述了一种基于搭载 DJYOS 的 STM32H730 开发的低空无人驾驶无人机解决方案。通过对其硬件配置、飞控系统、传感器应用、动力与续航以及操控方式等方面的深入分析&#xff0c;展现了该方案在低空无人驾驶领域的创新性和优势&#xff0c;为相关技术的发…

最新 Kubernetes 集群部署 + Contranerd容器运行时 + flannel 网络插件(保姆级教程,最新 K8S 1.28.2 版本)

资源列表 操作系统配置主机名IP所需插件CentOS 7.92C4Gk8s-master192.168.60.143flannel-cni-plugin、flannel、coredns、etcd、kube-apiserver、kube-controller-manager、kube-proxy、 kube-scheduler 、containerd、pause 、crictlCentOS 7.92C4Gk8s-node01192.168.60.144f…

VScode代码对齐快捷键

解决复制过来代码对齐格式问题。 左对齐&#xff1a;Ctrl[ 右对齐&#xff1a;Ctrl]

always块敏感列表的相关报错,

在综合的时候&#xff0c;报错如下 Synthesis synth_1 [Synth 8-91] ambiguous clock in event control ["E:/FPGA/FPGA_project/handwrite_fft/handwrite_fft.srcs/sources_1/new/reg_s2p.v":140] 猜测报错原因&#xff08;暂时没有时间寻找原因&#xff0c;后续在…

web自动化环境搭建[基于Chrome]+常用元素定位方式

下载chrome&#xff1a;可以使用电脑自带软件[HUES,360等]下载 下载chromedriver&#xff1a; 老版本地址:http://chromedriver.storage.googleapis.com/index.html,选择点击进去&#xff0c;有个notes.txt文件查看支持版本 最新版本:https://googlechromelabs.github.io/chro…