javaScript实现世界各地时间显示

使用JS获取当前时间并且改变时间显示格式 使用JS改变获取时间的格式 刚开始学习前端不久,昨天突然想做一个简单的显示时间的页面,就当作是钟表了(哈哈,买不起表吗?) 写的过程中,发现JS自带的获取时间功能在视觉上总觉得不是很舒服,比如 9:08 显示的是 9:8 ,这个确实没有问题,但是就是看着不舒服,所以呢,网上查了查,学习了一番,我做成了 9:08 的样子。另外还有获取的星期是从0开始的数字,最后都改了改,做的样子还算看过眼。 先看一... 阅读详情

在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世界各地时间</title>
    <style>
        *{margin: 0px;padding: 0px;background-color: black;}
        #box{width: 500px;margin:50px auto;border:1px solid;padding:20px;background-color: #0f0;}
        p{font-size:20px;font-weight: bold;padding:5px;border-bottom: 2px solid #ddd;background-color: #ffffff;}
        span{display: inline-block;text-indent: 20px;background-color: #ffff;}
    </style>
</head>
<body>
    <div id="box">
        <p>伦敦时间:<br><span></span></p>
        <p>北京时间:<br><span></span></p>
        <p>悉尼时间:<br><span></span></p>
        <p>洛杉矶时间:<br><span></span></p>
        <p>印度时间:<br><span></span></p>
        <p>迪拜时间:<br><span></span></p>
        <p>西班牙时间:<br><span></span></p>
    </div>
    <script>
        //获取到span
        var spans = document.getElementsByTagName("span");
        //定义星期数组
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        //有名函数
        function fn(){
            var date = new Date();
            //获得中时区的时间(毫秒)
            var UTCTime = Date.now() + date.getTimezoneOffset()*60*1000;
            //定义数组  
            var timeArr = [
                dateFormat(UTCTime + 60*60*1000),     //伦敦
                dateFormat(date),                     //北京
                dateFormat(UTCTime + 11*60*60*1000),  //悉尼
                dateFormat(UTCTime - 7*60*60*1000),   //洛杉矶
                dateFormat(UTCTime + 6*60*60*1000),   //印度
                dateFormat(UTCTime + 4*60*60*1000),   //迪拜
                dateFormat(UTCTime + 2*60*60*1000)    //西班牙
            ];
            //打印到控制台
            console.log(timeArr);
            //添加数据
            for( var i = 0;i<spans.length;i++ ){
                spans[i].innerHTML = timeArr[i];
            }
        }
        //执行
        fn();
        //多次执行的定时器
        setInterval(fn,1000);        
        //传入形参  计算年月日....
        function dateFormat(d){            
            var date = new Date(d);
            var YY = date.getFullYear();    
            var MM = date.getMonth() + 1 ; 
            var Day = date.getDay(); //星期三???
            var DD = date.getDate();
            var hh = addZero(date.getHours());
            var mm = addZero(date.getMinutes());
            var ss = addZero(date.getSeconds());
            return  YY + "年" + MM + "月" + DD + "日" + hh + "时" + mm + "分" + ss + "秒  " + arr[Day]
        }
        //使输出的格式为双数
        function addZero ( n ){
            return n < 10 ? "0" + n : n + "";
        }        
    </script>
</body>
</html>
js显示实时时间 用`JS`实现`XXXX`年`XX`月`XX`日 星期`X` `XX`时`XX`分`XX`秒 效果。本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。 阅读详情

相关推荐

JS时间戳转聊天室消息时间显示的实现思路

开发聊天室难免会遇到显示发送消息时间的需求,如果在每条消息前加上完整时间显示的话,不仅影响阅读效率而且也不美观,所以造了一个轮子以备不时之需,废话不多少直接上代码 首先是转当日时间戳的方法也就是转成上下午 /** * @static 时间戳转时间 * @param {*} timestamp 时间戳 * @returns * @memberof Tools */ ...

weixin_43005101的博客 2937

js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、倒计时、时钟、相关插件 day.js 等

js 处理日期时间实用技能汇总 new Date() Fri Jul 13 2018 05:54:16 GMT+0800 (中国标准时间) var date = new Date(); "现在的时间是:"+date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"...

朝阳39的博客 6249

使用JavaScript显示世界时间的示例(JavaScript技巧)

我们将创建一个简单的Web页面,其中包含一个下拉菜单,用户可以选择不同的时区,然后页面将实时显示所选时区的当前时间。在上述代码中,我们创建了一个带有id为"timezone"的下拉菜单,用于选择时区。然后,我们将更新页面上的"current-time"元素以显示当前时间。最后,我们更新"current-time"元素的文本内容,以显示当前时间。现在,当用户选择不同的时区时,页面上的"current-time"元素将实时更新为所选时区的当前时间。函数首先获取下拉菜单的值,即用户选择的时区。

ByteZenith的博客 249

世界各国当前时间js代码

下载地址JS多个国家时区时间代码,款实时显示世界各地各国时间代码。dd:

ICode联盟 556

使用JavaScript获取当前的北京时间

在Web开发中,有时候我们需要获取用户所在地的当前时间。如果用户位于北京,我们可以使用JavaScript来获取标准的北京时间并将其显示在网页上。你可以在适当的地方使用这段代码来获取标准北京时间,并根据自己的需求进行进一步处理。请注意,这段代码将返回一个字符串表示的时间,你可以根据需要进行显示或存储。

CodeWhizZ的博客 1628

js实现世界各地时间源代码

"Brunei 文莱 ":["+0800","","斯里巴加湾市"], "Burma 缅甸 ":["+0630","","仰光"], "Cambodia 柬埔寨 ":["+0700","","金边"], "China 中国 ":["+0800","","北京、重庆、上海、天津"], "Hong kong,Macau 香港·澳门":["+0800","","香港、澳门特区"], "Indonesia 印尼 ":["+0700","","雅加达"], "Japan 日本 ":["+0900","","东京、大阪、札幌"], "Korea 韩国 ":["+0900","","汉城"], "Laos 老挝 ":["+0700","","万象"], "Malaysia 马来西亚":["+0800","","吉隆坡"], "Mongolia 蒙古 ":["+0800","03L03|09L03","乌兰巴托、库伦"], "Philippines 菲律宾 ":["+0800","04F53|10F53","马尼拉"], "Russia(Anadyr) 俄罗斯 ":["+1300","03L03|10L03","阿纳德尔河"], "Russia(Kamchatka) 俄罗斯 ":["+1200","03L03|10L03","堪察加半岛"], "Russia(Magadan) 俄罗斯 ":["+1100","03L03|10L03","马加丹"], "Russia(Vladivostok)俄罗斯 ":["+1000","03L03|10L03","符拉迪沃斯托克(海参崴)"], "Russia(Yakutsk) 俄罗斯 ":["+0900","03L03|10L03","雅库茨克"], "Singapore 新加坡 ":["+0800","","新加坡"], "TaiPei 中国台北":["+0800","","台北、高雄"], "Thailand 泰国 ":["+0700","","曼谷"], "Urumchi 中国乌鲁木齐":["+0700","","乌鲁木齐"], "Vietnam 越南 ":["+0700","","河内"]

【精选】JavaScript网页时钟

一个时钟小项目,主要巩固一下我们学习的日期知识点与多线程知识点。附有源代码以供学习。如有疑问请评论区联系博主。

一个非常Cool的人 4786

UE5入门第二周总结:基于蓝图的国际象棋的实现

在C++的学习中,这是一个入门级别的项目。我们的目标是灵活运用蓝图的特性和强大的可视化功能,做出这一入门级项目的同时,思考如何优化并改进算法,并尽可能的用面向对象的方法实现,用蓝图中的继承和多态简化编码过程。

YoungeYang的博客 1259

世界时间

<br /> <!--世界时间部分开始--><br />          <div class="worldtime"><br />            <ul><br />              <li class="bj"><input id="bjthetime" size="8" class="InputTime"></li><br />              <li class="hk"><input id="hkthetime" size="8" class="InputTime">

386

电机控制——PMSM无感FOC控制(一)FOC入门

FOC 是一种电机控制技术,全称为 Field Oriented Control(磁场定向控制),也称作矢量控制。该技术可以提高电机的效率、控制稳定性和精度,广泛应用于电机驱动系统中,是目前无刷直流电机(BLDC)、永磁同步电机(PMSM)、感应电机的高效控制的最优方法之一。本节主要讲了FOC的大致流程,带大家先了解FOC到底是个什么东西在做什么,各个模块具体的原理会放到后面的章节详细讲解。FOC其实就是通过控制,相电流按照正弦变化,从而产生出旋转的磁场,控制电机转子转动。

zhuxinmingde的博客 2625

YOLOV8主干改进方法:C2f-Dual——DualConv轻量化双卷积设计(附改进代码)

DualConv是一种创新的卷积网络结构,旨在构建轻量级的深度神经网络。它通过结合3×3和1×1的卷积核处理相同的输入特征映射通道,优化了信息处理和特征提取。DualConv利用组卷积技术高效排列卷积滤波器,大大降低了计算成本和参数数量。

m0_74890428的博客 4700

JavaScript实现动态时间显示功能

一、基本思路 创建showTime()函数,利用JavaScript中的Date对象的属性及方法获取时间,利用Window对象的 setInterval() 方法按照指定的周期(以毫秒计)来调用函数或计算表达式。最后利用document对象实现在页面上显示。 二、代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>显示时间</title> <

a320976399的博客 1万+

内核工作FAST‘25 Artifact Evaluation流程记录

在我们的paper中,复现需要用到傲腾持久化内存,因此,需要AE Reviewer访问到内网服务器中。我们的思路是购买云服务器,将其作为跳板机,内网服务器通过SSH反向代理与公网服务器建立隧道,AE Reviewer通过隧道访问内网服务器。我们在AE过程中使用。然后,把一切复现需要的代码环境,在chroot里面配置完成。

不定期更新系统使用、编程小技巧,哔哩哔哩账号:https://space.bilibili.com/399455629,欢迎关注 1215

Js实现实时显示系统时间(获取当前时间并显示)

js可以通过Date对象获取当前日期和时间,使用Date()获取系统当前时间,在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间,在使用innerHTM方法显示。 首先我们来了解一下js获取当前时间所需的一些方法: 获取当前时间: var d = new Date();//获取系统当前时间 获取特定格式的时间: 1、获取当前年份 getYear()方法:可以获取年份(2位或4位),其返回值是表示当前Date 对象的年份字段 说明:当年

琅枫的博客 4万+

matplotlib三维画图之观察博弈论混合策略下纳什均衡点

参考链接: 博弈论入门20讲之第16讲-猜谜游戏-散户如何赢庄家 游戏背景: 我的期望是: 你的期望是: 使用Python的matplotlib画图: import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D fig = plt.figure() ax = Axes3D(fig) X = np.linspace(0, 1, 100) Y = np.linspace(0, 1,

敲代码的小风 1258

【YOLO系列】YOLOv4详解:模型结构、损失函数、训练方法及代码实现

摘要:YOLOv4在目标检测领域实现了精度与速度的平衡,通过CSPDarknet53骨干网络、SPP+PANet特征融合及CIoU损失函数等创新,在MS COCO数据集达到65.7% AP50,V100显卡实现62FPS实时检测。核心优化包括Mosaic数据增强、自对抗训练和解耦头结构,显著提升小目标检测和遮挡场景鲁棒性。代码实现采用CSP模块和SPP多尺度池化,兼顾计算效率与检测性能,为工业落地提供高效解决方案。(149字)

一碗白开水一 1358

Js实现获取当前时间并显示

js可以通过Date对象获取当前日期和时间,使用Date()获取系统当前时间,在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间,在使用innerHTM方法显示。 首先我们来了解一下js获取当前时间所需的一些方法: 获取当前时间: var d = new Date();//获取系统当前时间 获取特定格式的时间: 1、获取当前年份 getYear()方法:可以获取年份(2位或4位),其返回值是表示当前Date 对象的年份字

秉持Love and share的态度去学习和生活 3万+

Python + Playwright:集成 Applitools 进行视觉回归测试(快速入门)

Applitools是一款基于人工智能的视觉验证测试工具,专门用于自动化和验证应用程序的用户界面(UI);Applitools使用视觉回归测试来检测应用程序界面的变化,确保 UI 在不同版本之间的一致性;Applitools的核心功能是通过视觉比较,检测 UI 元素的差异,而无需手动编写复杂的界面检查代码;通过集成Applitools,测试人员可以轻松捕捉和验证界面中的视觉差异,无论是在Web移动端或桌面应用的测试环境;

blues_C的博客 2921

JavaScript实时显示当前时间

JavaScript主要使用DateDate中的getMonth()方法返回值从0开始计数,获取日期需要使用getDate()方法,而不是getDay()方法。如果要实时获取时间,则需要使用Date结合定时器实现,下面介绍两种实现方法。使用和setTimeout都可以实时获取当前时间,如果你对递归深恶痛绝的话,那还是推荐使用,毕竟看起来更加简单直观。

HerryDong的博客 1万+

Prism 入门02,区域介绍

什么是区域(Region)?区域,在Prism 框架中,区域是模块化的核心的功能之一,其主要作用是降低应用程序和模块之间的耦合度。使用方式:在应用程序的界面中,划分出某块区域,并为这个区域定义一个唯一的区域名称。那么通过这个区域名称,应用程序就可以找到指定的区域。并为这个区域动态放置一些容器或控件,从而呈现在界面中。

build2024 1126

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

HTML:使用JavaScript(js)脚本在网页上显示实时时间

hello,大家好,我是wangzirui32,今天我们来学习如何在网页上显示当前时间。 1. 静态显示 这种方式只获取网页打开时的时间: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取时间</title> </head> <body> </body> </html>

有意栽花花不发,无心插柳柳成荫。 7534

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

网页实时显示当前时间 html+js

效果: 在网页上能实时显示当前的时间: 这个秒会一直走的。 实现代码 1.在body标签里添加如下代码: <body onload="time()"> </body> 2.定义一个盒子标签来显示时间,也可以用其它标签,id设为“showtime”,如: <h2 id="showtime"></h2> 3.js代码实现功能: <script> /* 时间 */ function time() { t_div = document.getEl

你好呀,很高兴你在看这里~ 9611

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

JavaScript实现时间显示功能

目录 一、基本思路 二、代码 第一步:创建时间函数,利用date对象获得相应时间值 第二步:完善,调整星期的显示格式,数字小于十时用零占位。 一、基本思路 创建time()函数,利用JavaScript中已有对象date对象的属性及方法获取时间,最后利用document对象实现页面上的时间显示。 二、代码 第一步:创建时间函数,利用date对象获得相应时间值 <!D...

Liuxiaoyang1999的博客 1124

JavaScript实现动态显示时间

JavaScript实现动态显示时间 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;动态显示时间&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&

Zarathusa的博客 3175

javaScript---js显示日期、星期、时间

实现效果: 获取星期:【newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六")[date.getDay()]】 时间显示优化(补“0”):【date.getHours()<10?"0"+date.getHours():date.getHours()】 js动态添加html:【document.getEl...

maidu_xbd的博客 2495
上一篇: SpringMVC框架重要知识点总结(二)
下一篇: SSM架构之框架整合
智汇风渔AI小白
博客等级 码龄7年 1万+粉丝 179原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智汇风渔AI小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值