【JavaScript】动态显示当前时间

article/2025/10/19 3:17:55

可以实现动态显示当前时间,年月日时分秒星期几等,用12小时制表示,并能根据时间显示am(上午),pm(下午)。

文章目录

  • 一、基础知识
  • 二、动态显示系统当前时间
    • 1.代码
    • 2.展现效果


一、基础知识

获取时间对象  var date=new Date();
date.getFullYear()	   	 获取年
date.getMonth()+1     	 获取月,国外0-11
date.getDate()		  	 获取哪一天
date.getDay()		 	 获取星期几
date.getHours()	     	 获取小时
date.getMinutes()	  	 获取分钟
date.getSeconds()	  	 获取秒
date.getMilliseconds()   获取毫秒 ,1秒=1000毫秒
date.getTime()		     获取的是1970-1-1到现在的毫秒数

二、动态显示系统当前时间

1.代码

代码如下(示例):

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#wrapper {width: 400px;height: 80px;border: 2px solid red;margin: 0 auto;line-height: 80px;text-align: center;}</style></head><body><div id="wrapper"></div><script>var _wrapper = document.querySelector("#wrapper");function test() {var date = new Date();var year = date.getFullYear(); //2022年var month = date.getMonth() + 1; //8月,国外0-11var day = date.getDate(); //1号var week = date.getDay(); //1,星期一//调用转换星期的函数week = switchWeek(week);var hours = date.getHours();hours = switchZero(hours);var minutes = date.getMinutes();minutes = switchZero(minutes);var seconds = date.getSeconds();seconds = switchZero(seconds);_wrapper.innerHTML = `${year}${month}${day}日&emsp;${week}&emsp;${hours}:${minutes}:${seconds}`}setInterval("test()", 1000);//星期转换function switchWeek(days) {var res;if (days == 0) {res = "星期日"}if (days == 1) {res = "星期一"}if (days == 2) {res = "星期二"}if (days == 3) {weeks = "星期三"}if (days == 4) {res = "星期四"}if (days == 5) {res = "星期五"}if (days == 6) {res = "星期六"};return res;}//拼0转换function switchZero(time) {if (time < 10) {time = "0" + time;}return time;}</script></body>
</html>

2.展现效果

在这里插入图片描述



http://chatgpt.dhexx.cn/article/r0QD52So.shtml

相关文章

用js显示当前时间

目录 以下是我全部代码 其中&#xff0c;关键代码是js 效果如图所示 关键代码解释如下 setInterval: getElementById: innerHTML: 在初步学习js时&#xff0c;可能会有一些朋友能用上js来显示时间&#xff0c;因此我在此提供一种方法供大家参考。 以下是我全部代码 <…

php js动态显示系统时间,基于javascript实现动态显示当前系统时间

本文实例讲解了javascript实现动态显示当前系统时间的详细代码&#xff0c;具体内容如下 (1)时间日期信息&#xff0c;应该在一个 中来显示 (2)定时器&#xff1a;每隔一秒再次访问系统时间&#xff0c;window对象的setTimeout() (3)时钟显示的时机(事件)&#xff1a;当网页加载…

原生JavaScript实现显示当前系统时间

1.一个html页面实现&#xff0c;js写在html里面 clock.html <!DOCTYPE html> <html> <head><meta charset"UTF‐8"><title>clock</title><style type"text/css">#clock {color: green;font‐size: 30px;}</…

Javascript获得系统当前时间

** 获取系统当前时间 ** 一、步骤与注意事项 首先使用new Date创建时间对象&#xff1b;&#xff08;定义一个Date对象的time&#xff09;分别从time中获取当前年、月、日、分、秒、星期几特别注意&#xff1a;月是从0开始的&#xff08;即1月是0&#xff09; 二、代码实现…

JavaScript动态显示当前时间

前端写项目时, 有时会需要获取当前时间, 虽然使用度不高, 难免有需要的时候. 下面整理获取当前时间代码思路 使用 new Date() 获取 当前时间的时间戳 getFullYear(): 时间戳转换的年份getMonth() 1: 月份getDate(): 日期getHours()getMinutes()getSeconds() 根据需要获取…

JavaScript 当前时间显示(js)

先设置一个空的div <div id"app"></div> js&#xff1a; <script>let _appdocument.getElementById("app");//计时调用let idsetInterval("test()",1000);function test() {let date new Date(); //当前时间let year dat…

大数据应用及其解决方案(完整版)

目录 1、大数据概述 1.1. 概述 1.2. 大数据定义 1.3. 大数据技术发展 2、大数据应用 2.1. 大数据应用阐述 2.2. 大数据应用架构 2.3. 大数据行业应用 2.3.1. 医疗行业 2.3.2. 能源行业 2.3.3. 通信行业 2.3.4. 零售业 3、大数据解决方案 3.1. 大数据技术组成 3.…

干货!大话EXT4文件系统完整版

一&#xff1a;VFS 我们知道SSD是一场存储革命&#xff0c;设计和制造一个好的SSD固然重要&#xff0c;但如何正确使用以充分发挥SSD性能同样重要。SSD内在的并行性和先擦再写的特性决定了它不同于机械硬盘简单的LBA和存储块一一对应&#xff0c;要充分挖掘SSD的并行性&#xf…

对话腾讯云专家工程师常青,聊一聊全真互联网的“小小”变化

点击上方“LiveVideoStack”关注我们 三年时间&#xff0c;从“懵懂少年”到能从容应对客户需求&#xff0c;拥有更加成熟和成体系的业务线&#xff0c;覆盖更多场景的产品线&#xff0c;不仅有音视频的传输&#xff0c;还有实时消息的通讯&#xff0c;以及视频内容的制作。这背…

PM到SM,个人蜕变组织转型

转自本人运营的公众号“ 携程技术中心PMO”&#xff08;ID&#xff1a;cso_pmo&#xff09; 作者简介 李卫红&#xff0c;曾在博世工作13年&#xff0c;从项目经理&#xff0c;到项目管理流程&#xff0c;考核&#xff0c;培训&#xff0c;教练体系的构建&#xff0c;再到项目…

BCI2008中文翻译版

BCI2008中文翻译版 转载来源 转载来源 https://blog.csdn.net/shenshikexmu/article/details/51251769 如论文[1]发表的那样&#xff0c;数据包含9个被试的脑电EEG数据。被试都是右利手&#xff0c;有正常或者矫正正常视力&#xff0c;并且领取实验报酬。所有被试坐在有扶手的…

阿里P9专家右军:以终为始的架构设计

P 右军 读完需要 17分钟 速读仅需 6 分钟 右军(于君泽)&#xff0c;蚂蚁金服P9技术专家&#xff0c;在 IT 领域从业超过十五年。对 高并发、分布式架构、内建质量、研发管理有一些心得。维护公众号“技术琐话”&#xff0c;合著有《深入分布式缓存》、《架构宝典》、《程序员的…

精准测试系列产品白皮书2020版

上篇【星云精准测试】 &#xff08;附精准测讲解视频和白皮书下载&#xff09; 第一章 精准测试诞生的背景 20年前&#xff08;2000年&#xff09;&#xff0c;上网是一件很酷的事&#xff0c;叫做“网上冲浪”&#xff0c;主要是几个门户网站占据绝大多数注意力&#xff1b…

Camtasia2020mac喀秋莎中文免费密钥

Camtasia 2020 for Mac是一款非常专业的屏幕录像编辑软件&#xff0c;它不仅能够为您录制屏幕还可以为您进行音频、视频编辑&#xff0c;设置插图&#xff0c;缩放局部画面&#xff0c;画中画效果以及设置过渡效果等等&#xff0c;非常的强大。 Camtasia 2020for Mac是TechSmi…

暴风转码转超清文件_暴风影音16破解版下载-暴风影音16多开精简版(附怎么用) v9.4.1029.1111...

暴风影音这款播放神器相信有些年头的人基本上都用过&#xff0c;想当初那在播放器界可谓是一霸&#xff0c;功能十分的好用而且还基本上是免费的&#xff0c;那会别的播放器看不了的视频&#xff0c;它可以看&#xff01;别的播放器下载不了的视频。它可以下载&#xff01;总之…

算法应该怎么“玩”?

特别提示 本课程为王晓华老师达人课课程&#xff0c;需要购买训练营课程的同学请点击下方链接&#xff1a; 28 天玩转算法-第02期 课程介绍 市面上关于算法的书可谓琳琅满目&#xff0c;有经典但难啃的、也有简单入门的、更有独辟蹊径的&#xff0c;不过这些大多数都是偏理…

区块链全景课

课程介绍 区块链和数字货币的浪潮已经席卷全球&#xff0c;其火爆程度无需多言。越来越多人渴望跟上时代趋势&#xff0c;快速学习区块链&#xff0c;以指导自己的投资和创业。在频繁的演讲中&#xff0c;我能深切感受到各行各业的朋友对区块链的热情&#xff0c;包括 IT 圈、…

开源的中国声音

点击上方“开源社”关注我们 | 作者&#xff1a;Xlab开放实验室 | 转载自&#xff1a;Xlab开放实验室 | 编辑&#xff1a;李明康 | 设计&#xff1a;叶修缘丶 | 责编&#xff1a;袁睿斌 在当今的人工智能时代&#xff0c;开源开放是AI与社会发展深度融合的有力工具&#xff0c;…

FL Studio21免许可证完整版数字音频工作站(DAW)

如果你一直梦想制作自己的音乐(无论是作为一名制作人还是艺术家)&#xff0c;你可能会想你出生在这个时代是你的幸运星。这个水果圈工作室和上一版之间的改进水平确实令人钦佩。这仅仅是FL Studio 21所提供的皮毛。你的音乐项目的选择真的会让你大吃一惊。你以前从未有过这样的…

〖Python全栈白宝书-免费版⑲〗- 字符串的编码格式

该篇文章为 Python全栈白宝书-免费版试读部分&#xff0c;觉得还可以的小伙伴欢迎订阅下方推荐的 Python全栈白宝书。推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加…