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 相关文章推荐
jquery动态加载js三种方法实例
Aug 03 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
webpack的tree shaking的实现方法
Sep 18 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
javascript的BOM汇总
2015/07/16 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python 字符串常用函数详解
2019/09/11 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
爱游人:Travelliker
2017/09/05 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
应届护士推荐信
2013/11/16 职场文书
庆元旦广播稿
2014/02/10 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
法学求职信
2014/06/22 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
民主评议党员个人总结
2015/02/13 职场文书
个人学习总结范文
2015/02/15 职场文书
阿凡达观后感
2015/06/10 职场文书