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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 纯JS实现动态时间显示代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <script language="javascript">

  • js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前

    js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li class="one-comment"> <a class="c-user-photo" href="&q

  • javascript 时间显示代码集合(Date对象)

    javascript时间函数 javascript提供了Date对象来进行时间和日期的计算. Date对象有多种构造函数: new Date() //当前时间 new Date(milliseconds) //距离起始时间1970年1月1日的毫秒数 new Date(datestring) //字符串代表的日期与时间.此字符串可以使用Date.parse()转换,比如"Jannuary 1, 1998 20:13:15" new Date(year, month, day, hours

  • js实现时间显示几天前、几小时前或者几分钟前的方法集锦

    这里汇总了js实现时间显示几天前.几小时前或者几分钟前的常见方法.分享给大家供大家参考.具体如下: 方法一: 个人做法是保存时间戳,然后在前端用jq插件做转换,比如 smart-time-ago 方法二: (通过freemarker模板)如果用freemarker模板可以这样写,别的模板类推 根据自己的意愿修改条件和输出,把你的datetime传进去即可 <#macro timeline_dt datetime=.now> <#assign ct = (.now?long-datetim

  • JavaScript实现同步于本地时间的动态时间显示方法

    本文实例讲述了JavaScript实现同步于本地时间的动态时间显示方法.分享给大家供大家参考.具体分析如下: 动态显示时间的例子非常简单,了解JavaScript之后就是几行的代码便能够完成的事情, 但是对于一些未接触过JavaScript的人来说,几乎很大工程的样子,然后在网上苦苦寻觅代码,之后在茫茫的html代码中寻求不到,最终得不到要领. 一.基本目标 实现一个随同客户端(浏览者机器上的)时间的网页文本时间,使用最短的代码. 二.制作过程 复制代码 代码如下: <!DOCTYPE html

  • js获取当前时间显示在页面上并每秒刷新

    方法很简单,代码也很简洁,直接奉上代码吧 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js获取当前时间显示在页面上</title> <script> window.onload=function(){ //定时器每秒调用一次fnDate() setInterval(f

  • javascript+jQuery实现360开机时间显示效果

    javascript+jQuery实现360开机时间显示效果

    实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设为none,使得close按钮消失. 实现代码: <!DOCTYPE html> <html> <head> <title>仿360开机效果</title> <meta charset="utf-8"> &

  • 纯js实现动态时间显示

    本文实例为大家分享了js动态时间显示 的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>js动态时间显示 </title> </head> <body id = "show"> <script> function run(){ var time = ne

  • json格式的时间显示为正常年月日的方法

    json格式的时间显示为:/Date(1377828670436)/需要转换为正常年月日,方法如下: 复制代码 代码如下: //通过序列化转换出来的json,如果里面有DateTime格式的,就不会正常显示时间,用下面的方法就可以了 var date=renderTime(json.AddDateTime); //把读出来的json格式时间传入这个方法内 function renderTime(date){ var da = new Date(parseInt(date.replace("/Da

  • Javascript 世界时区时间显示代码

    Javascript 世界時間時間顯示 //https://gist.github.com/1326893https://gist.github.com/1326893 //20120511 Geovin Du 塗聚文 function calcTime(city, offset) { var d = new Date(); utc = d.getTime() + (d.getTimezoneOffset() * 60000); var nd = new Date(utc + (3600000

随机推荐