JavaScript实现世界各地时间显示


Posted in Javascript onSeptember 07, 2020

本文实例为大家分享了JavaScript实现世界各地时间显示的具体代码,供大家参考,具体内容如下

JavaScript实现世界各地时间显示

代码如下:

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
详解wow.js中各种特效对应的类名
Sep 13 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 #Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 #Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 #Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 #Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 #Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 #Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 #Javascript
You might like
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
php 中的closure用法详解
2017/06/12 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
selenium+python环境配置教程详解
2019/05/28 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
解除劳动合同协议书
2014/04/14 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
农业项目建议书
2014/08/25 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
领导干部失职检讨书
2015/05/05 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
八年级作文之感恩
2019/11/22 职场文书