web-dev-qa-db-ja.com

定期的に時間を更新するには？

function timeClock()
{
    setTimeout("timeClock()", 1000);        
    now = new Date();
    alert(now);
    f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
    return f_date;
}

<span class="foo"><script type="text/javascript">document.write(timeClock());</script></span>

アラート（今）;毎秒値を取得しますが、htmlで更新されません。ページを更新せずにHTMLの時間を更新するにはどうすればよいですか？

javascriptjquerydatetime
15
alex

コードには多くの誤りがあります。変数宣言の前でvarを使用しないと、グローバルスコープにリークされます。

また、document.writeの使用は 非推奨 です。

ここに私がそれをする方法があります：

JavaScript：

function updateClock() {
    var now = new Date(), // current date
        months = ['January', 'February', '...']; // you get the idea
        time = now.getHours() + ':' + now.getMinutes(), // again, you get the idea

        // a cleaner way than string concatenation
        date = [now.getDate(), 
                months[now.getMonth()],
                now.getFullYear()].join(' ');

    // set the content of the element with the ID time to the formatted string
    document.getElementById('time').innerHTML = [date, time].join(' / ');

    // call this function again in 1000ms
    setTimeout(updateClock, 1000);
}
updateClock(); // initial call

HTML：

<div id="time"> </div>
34
Ivo Wetzel

setInterval（expression、timeout）;

関数setTimeoutは単一のタイムアウトを対象としているため、setIntervalを使用する方が適切なオプションです。 SetIntervalは、Ivoの回答にある追加の行なしで定期的に実行されます。

Ivoの回答を次のように書き換えます。

JavaScript：

function updateClock() {
  // Ivo's content to create the date.
  document.getElementById('time').innerHTML = [date, time].join(' / ')
}
setInterval(updateClock, 1000);

ぜひお試しください！ https://jsfiddle.net/avotre/rtuna4x7/2/

4
Aaron Votre
x = document.getElementsByTagName('SPAN').item(0);
x.innerHTML = f_date;

returnステートメントの代わりにこのコードブロックを配置してみてください。テストしていませんが、おそらく機能します

0
Yunus Eren Güzel

ストレートJavaScript時間形式/更新

1：月のコンバーターfuncを作成する2：時間の関数を作成する3：更新の関数を作成する4：outPutの関数を作成する

    // month converter from index / 0-11 values
function covertMonth(num){
  let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  // look into index with num 0-11
  let computedRes = months[num];
  return computedRes;
}

// time func
function Time(){
   // important to get new instant of the Date referrance
  let date = new Date();
  this.time = date.toLocaleTimeString();
  this.year = date.getUTCFullYear();
  this.day = date.getUTCDate();
  this.month = date.getUTCMonth();
  this.currentTime = date.toLocaleTimeString() + ' ' + covertMonth(this.month) + ' ' + this.day + ' ' + this.year;
  return this.currentTime;
}


 function timeOutPut(){
  let where = document.getElementById('some-id');
  where.textContent = Time(); // 1:21:39 AM Dec 17 2017
}

   // run every 5secs
setInterval(timeOutPut, 5000);
0
soloproper

あなたがフックできる何かが時々jQueryプラグインにあるかもしれませんが、私は正直に試していません...

http://timeago.yarp.com/

0
Tim Reddy
_$('span.foo').html(f_date);
_

これをtimeclock()関数内に配置します

未テスト

_    function timeClock()
    {
        setTimeout("timeClock()", 1000);        
        now = new Date();
        alert(now);
        f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
       $('span.foo').html(f_date);

}
_
0
Rafay

SetTimeoutではなくsetIntervalを使用します。

https://developer.mozilla.org/en/DOM/window.setInterval

0
Abderrahmane TAHRI JOUTI

私は@soloproper setIntervalの概念@Ivo Wetzelの全体的な答えを使用しました。私の更新はすべて、必要に応じて時間をフォーマットすることに関するものです。 縮小プログラミング行

<div id="liveClock"> </div>

$(document).ready(function () {
        updateClock();
});

function updateClock() {
   document.getElementById('liveClock').innerHTML = new Date().format("dd/MMMM/yyyy hh:mm:ss tt");
}
setInterval(updateClock, 1000);
0
Pranesh Janarthanan

私はあなたのsetTmeout関数が間違った変数を持っていると思います、最初のものは文字列ではなく関数であるはずです、それは私を少し混乱させました。基本的には、関数を実行するときにspanタグに書き込む必要があります。

私はフィドルでjQueryバージョンを作成して、私が何を意味するかを示しました。 strMonth関数がありませんでしたが、アイデアはわかりました。また、アラートをconsole.logに変更しましたが、その行を削除できます。

http://jsfiddle.net/5JWEV/

0
BenWells