0

ブラウザの右上に現在の日付と時刻のバーを作成するスクリプトがあります。ページが読み込まれた時間だけでなく、ライブ時間を維持できるように、30秒ごとに更新しようとしています。set_time（）関数onloadを使用してタイムバーを作成してから、timer（）を呼び出すことを目的としたsetIntervalを作成します。これにより、set_time（）関数を再度呼び出すことで時刻が更新されます。4秒ごとに（timer（）関数から）「hi」のアラートボックスが表示されるため、タイマーは明らかに起動していますが、その後set_time（）を呼び出すことになっている場合は、機能していません。タイマーが起動するたびに、「settime」（set_time（）関数の最後にあります）のアラートが表示されるはずですが、これは発生しません。誰か助けてもらえますか？

window.onload = function(){
    set_time();
    window.setInterval(timer, 4000);
};

function timer(){
    alert('hi');
    set_time();
}

function set_time(){

    //create date object to manipulate
    var d = new Date();

    //current day of the week
    var d_names= new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
    curr_day = d.getDay();


    //current date
    var m_names = new Array("January", "February", "March", 
    "April", "May", "June", "July", "August", "September", 
    "October", "November", "December");

    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    var curr_year = d.getFullYear();

    //current Time
    var a_p = "";

    var curr_hour = d.getHours();
    if (curr_hour < 12)
       {
       a_p = "a.m.";
       }
    else
       {
       a_p = "p.m.";
       }
    if (curr_hour == 0)
       {
       curr_hour = 12;
       }
    if (curr_hour > 12)
       {
       curr_hour = curr_hour - 12;
       }

    var curr_min = d.getMinutes();
    curr_min = curr_min + "";

    if (curr_min.length == 1)
       {
       curr_min = "0" + curr_min;
       }

    element = document.getElementById('dateTime');
    if(element){
    //if dateDiv already exists, update contents
    dateDiv.innerHTML = '';
    dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
}
else{
    //else create new dateDiv and append it to DOM body
    var dateDiv = document.createElement('div');
    dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
        dateDiv.id = 'dateTime';
        document.body.appendChild(dateDiv);
    }

    alert('set time');

    //setTimeout("set_time()", 3000);


}
4

2 に答える 2

1

#dateTimedivを変数に割り当て、elementその存在を確認しますが、存在することを確認しelementたら、変数を使用しdateDivます。innerHTMLこれは未定義であり、プロパティの設定時に例外をスローします。ブラウザのエラーコンソールでそれを確認できるはずです。

代わりに次のコードを使用してください。

var element = document.getElementById('dateTime');
if (!element) {
    element = document.createElement('div');
    document.body.appendChild(element);
}
element.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
于 2012-12-20T20:27:26.250 に答える
0

エラーコンソールを見ると、javascriptが「dateDivが定義されていません」というエラーをここ（の直前else） にスローすることがわかります。dateDiv.innerHTML = '';

これを回避する（そしてスクリプトを機能させる）には、次のようにします。

  1. 次のように、divレイヤーをHTMLにコーディングします（javascriptを使用して作成しないでください）。 <div id="dateTime"></div>

  2. 最後にブロックを削除しelseます（ステップ1のために不要になりました）

  3. これをset_time（）の先頭に追加します。 var dateDiv = document.getElementById( 'dateTime' );

于 2012-12-20T20:37:06.050 に答える