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>
(资源库 www.zyku.net)
原文链接:https://blog.csdn.net/javaScript1997/article/details/108434563
上一篇:使用JS输出html的方法
栏 目:JavaScript
下一篇:jquery版右下角弹窗特效
本文标题:javaScript实现世界各地时间显示
本文地址:https://www.zyku.net/js/1980.html
您可能感兴趣的文章
- 09-26Dreamweaver如何修改默认编码
- 01-14SSH上传文件提示:encountered 1 errors
- 02-19php运行出现Call to undefined functi
- 02-21Nginx彻底隐藏版本号的安全性与方法
- 02-26帝国cms封面网页模板调用栏目别名
- 02-28Linux下rar包的压缩与解压详解
- 02-28帝国CMS Linux安装权限设置
- 02-29帝国CMS内容页模版调用当前栏目名称和
- 02-29Apache的SSL加密配置方法教程
- 03-27php判断两个浮点数是否相等的方法
- 04-24Radio选项选中触发事件弹出输入框效果
- 07-10帝国CMS商城系统在线支付后,订单邮件提
- 07-15帝国CMS仿站常用函数介绍
- 07-15帝国CMS会员通过推广链接获得点数奖励
- 07-15在dedecms5.7首页和列表页模板中怎样
- 01-13织梦dedecms内页、详情页中调用文章发
- 01-13织梦Dedecms获取缩略图片原图地址的方
- 01-13Dedecms无法保存远程图片到本地服务器
- 01-13DEDECMS显示英文日期时间的方法
- 02-14js实现文本上下来回滚动
阅读排行
猜你喜欢
- 11-21CSS的四种引入方式
- 11-21Sublime Text 3 安装Package Control
- 11-21PHP流程控制语句
- 11-21PHP中清除HTML标签的函数strip_tags
- 11-22Apache的安装、配置及卸载
- 12-27HTML网页特殊符号代码大全
- 02-21PHP脚本超时时间设置
- 02-21HTTP网站状态码说明大全
- 02-23Nginx开启Gzip压缩大幅提高页面加载速
- 02-23织梦推荐属性默认加粗的修改方法