根据时区偏移量计算另一个国家/地区的时间

时间:2014-09-27 11:36:43

标签: javascript jquery datetime timezone timezone-offset

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

我已经在这里构建了一个ALMOST-WORKING示例:

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

进行了界面和控制,但我仍然缺少以下功能:1。自动检测用户的时区(如'-1','0','+ 2')并计算给定时间(参见输入) #time)匹配法国时区(UTC / GMT +2)。

以某种顺序:

  1. 获取用户当前时间/时区(仅限小时,不是分钟或秒)
  2. 获取用户介绍的计算计算时间
  3. 介绍其他国家/地区的时间(本例中为法国)。
  4. 将值返回为小时,如02:00
  5. 到目前为止,这是我的脚本,这些是控件,我不知道如何构建所需的函数,以便像上面描述的那样工作:)

    $(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,但我不知道如何在我的脚本上实现相同的内容:(

    提前致谢!

2 个答案:

答案 0 :(得分:3)

一些事情:

  • 时区与偏移量不同,不能这样对待。抵消也不能限制在整个小时。请在the timezone tag wiki中阅读“时区!=偏移”。

  • 法国的时区为"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点,那么可能是美国东部标准时间1点(UTC-4),也可能是1小时后美国东部标准时间1点(UTC-5) 。你会发现,如果输入含糊不清,有些浏览器会选择白天时间(IE,Safari),有些会选择标准时间(Chrome,Firefox,Opera,NodeJS)。

答案 1 :(得分:0)

<!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>