【问题标题】:Calculate the time in another country based on timezones offset根据时区偏移量计算另一个国家的时间
【发布时间】:2014-11-22 07:56:26
【问题描述】:

我敢打赌,肯定有一些插件可以把这个问题变成更容易解决的问题,比如 MomentJs,但事实是;我不知道如何使用它:) 所以我想尽可能地做它。

我已经构建了一个几乎可以在此处实现的目标的示例:

http://jsfiddle.net/Frondor/5a5wrssn/

界面和控件已经制作完成,但我仍然缺少以下功能: 1. 自动检测用户的时区(如“-1”、“0”、“+2”)并计算给定时间(见输入#time) 以匹配法国时区(UTC/GMT +2)。

以某种顺序:

  1. 获取用户当前时间/时区(仅小时,而不是分钟或秒)
  2. 获取用户介绍的计算Calculate的时间
  3. 引入了其他国家/地区的时间(在本例中为法国)。
  4. 以小时形式返回值,例如 02:00

到目前为止,这是我的脚本,这些主要是控件,我不知道如何构建所需的函数才能像我上面描述的那样工作:)

$(document).ready(function () {
//Automatically detect user's timezone and store it inside this variable
    //Let's use a temporal example just to see how the whole script works
    var userTimeZone = "-3"; //here goes a function, its just an example of the variable userTimeZone already resolved for some function I don't know how to code hehe

    $("#detected").hide().fadeIn(2000); //just4fancy
    $("#uTZ").text(userTimeZone); //print the detected timezone

    var timeInput = $('#time');
    timeInput.focus();
    timeInput.on('change keyup mouseup', function () {
        var userTZ = $("#uTZ").text();

        var franceTZ = "2"; //predefined timezone of France +2

//Now I try to set the differnce of timezones in order to see how to calculate the final time        
        var calculation = userTZ-franceTZ; //here is where the calculation happens. Actually, It is (of course) wrong :)

        var actualValue = $(this).val();

//print the results
        if (timeInput.val() !== '00') {
            $('#actual').text(actualValue + ':00 hours');

            $('#result').text(actualValue - calculation + ':00 hours'); //this calculates
the given time with the difference of timezones to show a converted time

            $('.panel-footer').removeClass('hidden').hide().slideDown();
        }
    }).bind('mousewheel', function (e) {
        return false;
    });
});

如果它对某人有用,我发现了这个Convert timezone offset number of hours to timezone offset in (military?) hours,但我不知道如何在我的脚本上实现它:(

提前致谢!

【问题讨论】:

  • 试试moment.js
  • 我鼓励您阅读我写的内容,尤其是第一段。

标签: javascript jquery datetime timezone timezone-offset


【解决方案1】:

一些事情:

  • 时区与偏移量不同,不能这样对待。补偿也不能限于整个小时。请阅读the timezone tag wiki 中的“Time Zone != Offset”。

  • 法国的时区是"Europe/Paris"。它仅在 daylight saving time 生效的夏季月份使用 +2 偏移量。其余时间,它使用 +1 偏移量。

  • 您实际上并不需要检测用户的时区来完成这项工作。浏览器已经在用户的时区内工作。无论浏览器设置如何,您只需要能够使用法国时间,您可以使用库来做到这一点。

  • 你说你使用了 moment.js。您只需要使用moment-timezone 扩展。

    // current time in France
    moment().tz('Europe/Paris').format('H:mm')
    
    // When it's 3:00 local time today, what time is it in France?
    moment('3:00','H:mm').tz('Europe/Paris').format('H:mm')
    
  • 您应该注意如何表达信息的措辞。简单地说“当 A 是 X 时间,B 是 Y 时间”是无效的。还必须涉及日期,因为答案可能会根据 DST 当前在 A 还是 B 中生效而改变。您可以引用“今天”,但请确保您知道那是 A 的今天还是 B 的今天。那些可能不一样。

  • 您可能还会发现某些输入值不明确。例如,如果我说现在是 2014 年 11 月 2 日纽约凌晨 1:00,那么可能是美国东部时间 1:00 (UTC-4),或者可能是一小时后的美国东部时间 1:00 (UTC-5) .你会发现,在输入不明确的情况下,有些浏览器会选择白天时间(IE、Safari),而有些浏览器会选择标准时间(Chrome、Firefox、Opera、NodeJS)。

【讨论】:

    【解决方案2】:
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" >
        /*finding time for india and usa in both 12hr and 24 hr format*/
    function indUsaTime(){
        msg1=document.getElementById("msg1");
        msg2=document.getElementById("msg2");
        msg3=document.getElementById("msg3");
        msg4=document.getElementById("msg4");
        dayFormatIndia=document.getElementById("dayFormatIndia");
        dayFormatUs=document.getElementById("dayFormatUs");
            /*creating date object to collect hours/minutes/seconds*/
            var date=new Date();
            var hrs=date.getHours();
                /*converting into 12hr format*/
                if(hrs>12){
                    hrs1=hrs%12;
                    dayFormatIndia.innerHTML="PM";
                }
                else if(hrs==12){
                   hrs1=hrs;
                   dayFormatIndia.innerHTML="PM";
                  }else{
                    hrs1=hrs;
                    dayFormatIndia.innerHTML="AM";
                   }
        /*printing both 12hr and 24hr format for India*/
        msg1.innerHTML=hrs1+":"+date.getMinutes()+":"+date.getSeconds();
        msg2.innerHTML=hrs+":"+date.getMinutes()+":"+date.getSeconds();
            var hrsUS=hrs-10;
            var mnsUS=date.getMinutes()+30;
            mnsUS=mnsUS%60;
            /*converting hours of usa east cost using its minutes*/
                if(mnsUS>=0&&mnsUS<30){
                    hrsUS=date.getHours()-9;
                }else{
                    hrsUS=date.getHours()-10;
                }
            /*converting into proper 24 hr format based upon cases*/    
                if(hrsUS<0){
                    hrsUS=hrsUS+24;
                }    
                if(hrsUS>24){
                    hrsUS=hrsUS%24;
                }
                /*converting into proper 12 hr format based upon cases*/    
                if(hrsUS<0){
                    hrsUS=hrsUS+12;
                }else{
                    hrsUS=hrsUS;
                }
                if(hrsUS>=12){
                    hrsUS1=hrsUS%12;
                    dayFormatUs.innerHTML="PM";
                }if(hrsUS==0){
                    hrsUS1=hrsUS+12;
                    dayFormatUs.innerHTML="AM";
                }else{
                    hrsUS1=hrsUS;
                    dayFormatUs.innerHTML="AM";
                }
             /*printing both 12hr format and 24hr format*/    
                msg3.innerHTML=hrsUS1+":"+mnsUS+":"+date.getSeconds();
                msg4.innerHTML=hrsUS+":"+mnsUS+":"+date.getSeconds()
            }
     /*calling indUsaTime() in each second sothat it will look dynamic*/        
    setInterval(indUsaTime,1000);
    function bodyload(){
        indUsaTime();
         /*input countries as an array and appending on bodyload*/
        countries=["select","UK(+1 GMT)","Germany(+2 GMT)","Spain(+2 GMT)","Brazil(-3 GMT)","Mexico(-5 GMT)","Japan(+9 GMT)","Canada(-4 GMT)","Aus(+10 GMT)","Qatar(+3 GMT)"];
            country=document.getElementById("country");
            for(i=0;i<countries.length;i++){
                var opt=document.createElement("option");
                opt.text=countries[i];
                opt.values=countries[i];
                country.appendChild(opt);
            }  
    }
     /*finding time for all the countries in our list*/
    function findTime(){
        country=document.getElementById("country");
        showTime=document.getElementById("showTime");
        var date=new Date();
           switch(country.value)
           {
               case "UK(+1 GMT)":
                   /*converting minute of UK*/
                   ukMns=date.getMinutes()+30;
                   ukMns=ukMns%60;
                       /*converting hours of UK*/    
                       if(ukMns>=0&&ukMns<30){
                           ukHrs=date.getHours()-4;
                        }else{
                           ukHrs=date.getHours()-5;
                        }
                        if(ukHrs<0){
                           ukHrs=ukHrs+24;
                        }else{
                           ukHrs=ukHrs;
                        }
                    /*printing 24hr format*/ 
                    showTime.innerHTML=ukHrs+":"+ukMns+":"+date.getSeconds();
                break;
                case "Germany(+2 GMT)":
                    /*converting minute of Germany*/
                    germanyMns=date.getMinutes()+30;
                    germanyMns=germanyMns%60;
                       /*converting hours of Germany*/ 
                        if(germanyMns>=0&&germanyMns<30){
                            germanyHrs=date.getHours()-3;
                        }else{
                            germanyHrs=date.getHours()-4;
                        }
                        if(germanyHrs<0){
                            germanyHrs=germanyHrs+24;
                        }else{
                            germanyHrs=germanyHrs;
                        }
                    /*printing 24hr format*/    
                    showTime.innerHTML=germanyHrs+":"+germanyMns+":"+date.getSeconds();
                break;
                case "Spain(+2 GMT)":
                     /*converting minutes of Spain*/ 
                    spainMns=date.getMinutes()+30;
                    spainMns=spainMns%60;
                         /*converting hours of Spain*/ 
                        if(spainMns>=0 && spainMns<30){
                            spainHrs=date.getHours()-3;
                        }else{
                             spainHrs=date.getHours()-4;
                        }
                        if(spainHrs<0){
                            spainHrs=spainHrs+24;
                        }else{
                            spainHrs=spainHrs;
                        }
                    /*printing 24hr format*/     
                    showTime.innerHTML=spainHrs+":"+spainMns+":"+date.getSeconds();
                break;
                case "Mexico(-5 GMT)":
                     /*converting minutes of Mexico*/            
                    mexicoMns=date.getMinutes()+30;
                    mexicoMns=mexicoMns%60;
                         /*converting hours of Spain*/ 
                        if(mexicoMns>=0 && mexicoMns<30){
                            mexicohrs=date.getHours()-10;
                        }
                        else{
                            mexicohrs=date.getHours()-11;
                        }
                        if(mexicohrs<0){
                            mexicohrs=mexicohrs+24;
                        }
                        else{
                            mexicohrs=mexicohrs;
                        }
                     /*printing 24hr format*/     
                    showTime.innerHTML=mexicohrs+":"+mexicoMns+":"+date.getSeconds();
                break;
                case "Brazil(-3 GMT)":
                    /*converting minutes Brazil*/ 
                    brazilMns=date.getMinutes()+30;
                    brazilMns=brazilMns%60;
                        /*converting hours of Mexico*/ 
                        if(brazilMns>=0 && brazilMns<30){
                            brazilHrs=date.getHours()-8;
                        }else{
                            brazilHrs=date.getHours()-9;
                        }
                        if(brazilHrs<0){
                            brazilHrs=brazilHrs+24;
                        }else{
                            brazilHrs=brazilHrs;
                        }
                    /*printing 24hr format*/     
                    showTime.innerHTML=brazilHrs+":"+brazilMns+":"+date.getSeconds();
                break;
                case "Japan(+9 GMT)":
                     /*converting minutes of Japan*/ 
                    japanMns=date.getMinutes()+30;
                    japanMns=japanMns%60;
                        /*converting hours of Japan*/ 
                        if(japanMns>=0 && japanMns<30){
                            japanHrs=date.getHours()+4;
                        }else{
                            japanHrs=date.getHours()+3;
                        }
                        if(japanHrs<0){
                            japanHrs=japanHrs+24;
                        }
                        else{
                            japanHrs=japanHrs;
                        }
                    /*printing 24hr format*/     
                    showTime.innerHTML=japanHrs+":"+japanMns+":"+date.getSeconds();            
                break;
                case "Canada(-4 GMT)":
                    /*converting minutes of Canada*/ 
                    canadaMns=date.getMinutes()+30;
                    canadaMns=canadaMns%60;
                        /*converting hours of Canada*/ 
                        if(canadaMns>=0 && canadaMns<30){
                            canadaHrs=date.getHours()-9;
                        }else{
                            canadaHrs=date.getHours()-10;
                        }
                        if(canadaHrs<0){
                            canadaHrs=canadaHrs+24;
                        }else{
                            canadaHrs=canadaHrs;
                        }
                    /*printing 24hr format*/ 
                    showTime.innerHTML=canadaHrs+":"+canadaMns+":"+date.getSeconds();
                break;
                case "Aus(+10 GMT)":
                    /*converting minutes of Aus*/ 
                    ausMns=date.getMinutes()+30;
                    ausMns=ausMns%60;
                        /*converting hours of Canada*/ 
                        if(ausMns>=0 && ausMns<30){
                            ausHrs=date.getHours()+5;
                        }else{
                            ausHrs=date.getHours()+4;
                        }
                        if(ausHrs<0){
                            ausHrs=ausHrs+24;
                        }else{
                            ausHrs=ausHrs;
                        }
                     /*printing 24hr format*/     
                    showTime.innerHTML=ausHrs+":"+ausMns+":"+date.getSeconds();
                break;
                case "Qatar(+3 GMT)":
                     /*converting minutes of Qatar*/ 
                    qatarMns=date.getMinutes()+30;
                    qatarMns=qatarMns%60;
                         /*converting hours of Qatar*/ 
                        if(qatarMns>=0 && qatarMns<30){
                            qatarHrs=date.getHours()-2;
                        }else{
                            qatarHrs=date.getHours()-3;
                        }
                        if(qatarHrs<0){
                            qatarHrs=qatarHrs+24;
                        }else{
                            qatarHrs=qatarHrs;
                        }
                     /*printing 24hr format*/     
                    showTime.innerHTML=qatarHrs+":"+qatarMns+":"+date.getSeconds();
                break;
                default:
                    /*clearing div*/
                    showTime.innerHTML="";
                break;    
            }
    }
    /*dropdownlist countries time dynamic*/
    setInterval(findTime,1000);
        </script>
    </head>
    <body onload="bodyload()">
        <fieldset>
            <legend style="margin:auto">
                <b>India(+5:30 GMT)</b>
            </legend> 
            <table  width="300px" cellspacing="2px" cellpadding="2px">
                <tr>
                    <td align="center">
                        <i>12 hr format</i>
                    </td>
                    <td align="center" style="width:180px">
                        <span align="center" id="msg1"  class="digiClock">
                        </span>
                        <span id="dayFormatIndia" class="digiClock">
                        </span>
                    </td>
    
                </tr>
                <tr>
                    <td align="center">
                        <i>24 hr format</i>
                    </td>
                    <td align="center" style="width:180px">
                        <span id="msg2" class="digiClock">
                        </span>
                    </td>
                </tr>
    
            </table>   
        </fieldset>
            <fieldset>
            <legend style="margin:auto">
                <b>USA-EastCost(-4:00 GMT)</b>
            </legend> 
            <table  width="300px">
                <tr>
                    <td align="center">
                        <i>12 hr format</i>
                    </td>
                    <td align="center" style="width:180px">
                        <span align="center" id="msg3" class="digiClock" >
                        </span>&nbsp
                        <span id="dayFormatUs" class="digiClock">
                        </span>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <i>24 hr format</i>
                    </td>
                    <td align="center">
                        <span id="msg4" class="digiClock">
                        </span>
                    </td>
                </tr>
    
            </table>
        </fieldset>
        <fieldset>
            <legend style="margin:auto">
                <b>other countries(24 hr format)</b>
            </legend> 
            <table width="300px">
                <tr>
                    <td >
                        <select id="country" onclick="findTime()">
                        </select>
                    </td>
                    <td align="left">
                        <span id="showTime" class="digiClock"></span>
                        <span id="formatTime">
    
                        </span>
                    </td>
                </tr>
            </table>
        </fieldset>
    </body>
    </html>
    

    【讨论】:

      猜你喜欢
      • 2020-08-05
      • 2010-10-03
      • 1970-01-01
      • 1970-01-01
      • 2018-03-04
      • 1970-01-01
      • 2022-12-18
      • 2011-08-04
      • 2021-06-12
      相关资源
      最近更新 更多