【问题标题】:Jquery display time for specific location特定位置的jquery显示时间
【发布时间】:2013-03-27 11:08:36
【问题描述】:

使用下面的代码,我可以在网站上成功显示当地时间。我在基于 Zurb Foundation 3 的网站上使用它——我想避免加载额外的插件。

a) 如何让它始终显示悉尼的时间,而不是用户端的时间? 有没有办法使用下面的代码而不是完全不同的脚本来做到这一点?

b)另外,如果它很容易解决,我怎样才能让它显示星期几?

     function updateClock ( )

   

{
      var currentTime = new Date ( );
      var currentHours = currentTime.getHours ( );
      var currentMinutes = currentTime.getMinutes ( );
      var currentSeconds = currentTime.getSeconds ( );    



      // Pad the minutes and seconds with leading zeros, if required
       currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
       currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

          // Choose either "AM" or "PM" as appropriate
           var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM"; 



         // Convert the hours component to 12-hour format if needed
           currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours; 



      // Convert an hours component of "0" to "12"
           currentHours = ( currentHours == 0 ) ? 12 : currentHours;

          // Compose the string for display
           var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;


        $("#clock").html(currentTimeString); }

$(document).ready(function()
{setInterval('updateClock()', 1000);
});

【问题讨论】:

    标签: jquery date time location zone


    【解决方案1】:

    试试这个链接

    http://www.techtricky.com/jquery-code-to-show-time-in-different-countries/

    演示在结果中显示了日期名称。

    HTML 和 JS:

    <html>
      <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://techtricky.com/wp-content/jquery/jquery.jclock.js"></script>
      <script type="text/javascript">
        $(document).ready(
            function() {
               $("#zones").change(function(){
               if ($('#time-cont .time').length>0){ $('#time-cont .time').remove();}
           var offset = $(this).val();    
               if (offset == '') return;       
    
           $('#time-cont').append('<div class="time"></div>');
    
               var options = {
                format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
                timeNotation: '12h',
                am_pm: true,
                fontFamily: 'Verdana, Times New Roman',
                fontSize: '20px',
                foreground: 'black',
                background: 'yellow',
                utc:true,
                utc_offset: offset
              }
    
              $('#time-cont .time').jclock(options);
           });
         });
        </script>
    
      </head>
      <body>
       <select id="zones">
        <option value="">--Select--</option>
        <option value="10">Australia</option> // Australia UTC offset value is 10
        <option value="8">China</option>
        <option value="5.5">India</option>
        <option value="12">Newzealand</option>
        <option value="0">UK</option>
        <option value="-5">US EST</option>
    
      </select>
      <div id="time-cont"></div>
      </body>
    </html>
    

    【讨论】:

    • 谢谢。如何从中消除选择选项阶段?
    • 嗨 Wiz Kid - 感谢 JsFiddle。是的,我可以看到这可以使用 UTC 偏移量。这是否意味着我必须在夏令时切换时更改偏移量?
    猜你喜欢
    • 1970-01-01
    • 2016-12-18
    • 2011-06-13
    • 2010-10-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多