最新公告
  • 欢迎您光临奇兔源码社区,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 本文实例为大家分享了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>

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

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,请不要用于商业用途!
    3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.qitupic.com",如遇到无法解压的请联系管理员!

    成华区美乐滋网络工作室|奇兔源码网 » JavaScript实现世界各地时间显示

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台