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

前言:我是在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…

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

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

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…

最新 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;后续在…

mac python

1. 默认在 /usr/bin/ 目录&#xff0c;安装目录在 /Users/wangjun/Library/Python/3.9/lib/python/site-packages 2. 安装自己的python。 无需理会上面的版本。 访问 Python Release Python 3.12.4 | Python.org 安装即可 使用 python3 pip3 /usr/local/bin

AI虚拟医生重塑医患关系

如今&#xff0c;越来越多的企业开始选择用AI虚拟数字人播报员替代真人出镜&#xff0c;这不仅有助于企业实现降本增效的目标&#xff0c;更能让广告传播趋向多样化和个性化。对于普通人而言&#xff0c;也摆脱了真人出镜的种种烦恼&#xff0c;让表达更加自由与便捷。AI虚拟数…

5,智能合约(react+区块链实战)

5&#xff0c;智能合约&#xff08;react区块链实战&#xff09; 5-1 智能合约5-2 metamask安装及私有链搭建互相联动5-3 solidity数据类型-布尔-数字-地址&#xff08;owner区别&#xff09;5-4 solidity 数组和映射&#xff08;代币转账&#xff09;5-5 solidity结构体与枚举…

视频怎么压缩变小?最佳视频压缩器

即使在云存储和廉价硬盘空间时代&#xff0c;大视频文件使用起来仍然不方便。无论是存储、发送到电子邮件帐户还是刻录到 DVD&#xff0c;拥有最好的免费压缩软件可以确保您快速缩小文件大小&#xff0c;而不必担心视频质量下降。继续阅读以探索一些顶级最佳 免费视频压缩器选项…

排序(二)——快速排序(QuickSort)

欢迎来到繁星的CSDN&#xff0c;本期内容包括快速排序(QuickSort)的递归版本和非递归版本以及优化。 一、快速排序的来历 快速排序又称Hoare排序&#xff0c;由霍尔 (Sir Charles Antony Richard Hoare) &#xff0c;一位英国计算机科学家发明。霍尔本人是在发现冒泡排序不够快…

oracle 23ai新的后台进程bgnn介绍

前言 昨天发文研究了哪些oracle 后台不能杀 具体文章如下链接 oracle哪些后台进程不能杀&#xff1f;-CSDN博客 其中23ai中新增了一个后台进程bgnn 但是在oracle 23ai database reference中并没有找到该后台进程 有点不甘心就开了个SR&#xff0c;找oracle 官方来看看这个后…