2017-07-21 3 views
0

時間(時間帯別)と日付を表示するにはこのJavascriptコードを使用しましたが、問題はAM/PMです。時間の経過とともに自動的には更新されません。多くの試行の後、私は自動更新に失敗したので、ここでいくつかの助けを探しています。JavaScriptを使用してAM/PMを時間どおりに取得する方法

$(document).ready(function(){ 
// Create two variable with the names of the months and days in an array 
// Count 3 variable for months 
var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] 

// Create a newDate() object 
var newDate = new Date(); 
// Extract the current date from Date object 
newDate.setDate(newDate.getUTCDate()); 
// Output the day, date, month and year 
$('#Date').html(/*dayNames[newDate.getUTCDay()] + " " + */monthNames[newDate.getMonth()] + ' ' + newDate.getDate() + ', ' + newDate.getFullYear()); 

setInterval(function() { 
    // Create a newDate() object and extract the seconds of the current time on the visitor's 
    var seconds = new Date().getUTCSeconds(); 
    // Add a leading zero to seconds value 
    $("#sec").html((seconds < 10 ? "0" : "") + seconds); 
    },1000); 

setInterval(function() { 
    // Create a newDate() object and extract the minutes of the current time on the visitor's 
    var minutes = new Date().getUTCMinutes(); 
    // Add a leading zero to the minutes value 
    $("#min").html((minutes < 10 ? "0" : "") + minutes); 
    },1000); 

setInterval(function() { 
    // Create a newDate() object and extract the hours of the current time on the visitor's 
    var hours = new Date().getUTCHours(); 
    var ampm = 'AM'; 
if(hours > 5) 
{ 
    hours -= 5; // Time Zone 
    ampm = 'AM'; // AM/PM According to Time Chosen 
} 
    else if(hours == 5) 
{ 
    ampm = 'PM';  
}; 

    // Add a leading zero to the hours value 
    $("#hours").html((hours < 10 ? "0" : "") + hours); 

    $("#ampm").html(ampm); 
    }, 1000); 
}); 

<span id="hours"></span>:<span id="min"></span>&nbsp;<span id="ampm"></span>&nbsp;&nbsp;<span id="Date"></span> 
+0

なお 'newDate.setDate(newDate.getUTCDate()); UTC日付が常にローカル日付と同じではないので'、日付を変更することができます。なぜあなたは5を引いたUTC値を使用していますか?日付を別のタイムゾーンに設定しようとしていますか?すでにそれについてたくさんの質問があります。 – RobG

答えて

0

たぶん、いくつかのライブラリがあなたの人生を容易

https://momentjs.com/timezone/

で、これはまさにあなたです私はこれを自分で書くのは嫌だけど、それは間違いなく良い練習 であることを確認します。以下のコードは、私は思って、時間を更新するためにsetIntervalで時間を呼び出すことを続けたいと思います。

+0

これはコメントでなければならない、それは答えではない。 – RobG

0

私は本当にあなたが何をしようとしているのかわかりませんが、ホストシステムを使用してUTC-0500のタイムゾーンを設定しようとすると、特定のフォーマットで日付と時刻を表示すると、それについて既に質問があります。

簡単な方法は、ホストの日付を取得し、ホストのタイムゾーンのオフセットに基づいて時間をシフトし、デフォルトの5時間を補うことです。その後、時間を適切にフォーマットします。 getTimezoneOffsetは、オフセットが偶数時間でない場合に戻って適合します。

日付を調整したら、AM/PMを設定するのと同じくらい簡単です:

var ampm = d.getHours() < 12? 'am' : 'pm'; 

は、現在の時刻を表示するように、多くの場合、必要に応じて関数を呼び出します。

// Return a date adjusted to UTC-0500 
 
function getOffsetDate() { 
 
    var d = new Date(); 
 
    // Set to UTC-0500: add timzone offset then subtract 300 mins 
 
    d.setMinutes(d.getMinutes() + d.getTimezoneOffset() - 300); 
 
    return d; 
 
} 
 

 
// Format time as hh:mm:ss ap 
 
function formatTime(d) { 
 
    function z(n){return (n<10? '0' : '') + n} 
 
    var ap = d.getHours() < 12? 'am' : 'pm'; 
 
    return z(d.getHours()) + ':' + z(d.getMinutes()) + ':' + 
 
     z(d.getSeconds()) + ' ' + ap; 
 
} 
 

 
function showTime() { 
 
    // Delay to just after next full second 
 
    var delay = 1020 - new Date().getMilliseconds(); 
 
    // Show time 
 
    document.getElementById('time').textContent = formatTime(getOffsetDate()); 
 
    // Call again 
 
    setTimeout(showTime, delay); 
 
} 
 

 
showTime();
<div>The time in timezone UTC-0500 is <span id="time"></span></div>

関連する問題