javascript - JavaScript で動作する時計を作成するにはどうすればよいですか?

Question

これが私の壊れたスパゲッティ JavaScript/jQuery コードです。

$(document).ready(function(){
    var d = new Date;
    var hours = Date.getHours();
    var mins = Date.getMinutes();
    if(hours > 12){
        var hour = (hours - 12);
        var ampm = "PM";
    }
    else{
        var hour = hours;
        var ampm = "AM";
    }
    var time = hour + ":" + mins, ampm
    $("h1").html(time);
    });
});

動く時計を作るのを手伝ってくれませんか?

Answer 1

コメントに記載されている修正:

$(document).ready(function(){
    var d = new Date;
    var hours = d.getHours(); // call methods on your instance d
    var mins = d.getMinutes();
    if (hours > 12) {
        var hour = (hours - 12);
        var ampm = "PM";
    }
    else {
        var hour = hours;
        var ampm = "AM";
    }
    var time = hour + ":" + mins + ampm; // string concatenate ampm
    $("h1").html(time);
});​ // removed extraneous });

• デモ

これにより、現在の時刻がタグごとに1 回表示されます。定期的に更新する方法については、 を参照してh1ください。setInterval

Answer 2

これにより、DOMの準備ができた後に毎秒更新される時計が作成されます。

$(document).ready(function(){
    updateTime();
    clock = window.setInterval(updateTime, 1000);
});
function updateTime() {
    var d = new Date;
    var hours = d.getHours();
    var mins = d.getMinutes();
    var secs = d.getSeconds();
    if(hours > 12){
        var hour = (hours - 12);
        var ampm = "PM";
    }
    else{
        var hour = hours;
        var ampm = "AM";
    } 
    var time = hour + " : " + mins + ' ; ' + secs + ' ' + ampm;
    $("h1").html(time);
}​

Answer 3

通話をready2 回終了しているようです。

});

Answer 4

まず、JS コードにバグがあるように見えます。あなたは次のようなものが欲しかったと思います

var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
...
var time = hour + ":" + mins + ", " + ampm;

時計の場合は間隔が必要です...現在のコードは現在のタイムスタンプのみを生成します

Answer 5

時間は更新されます

$(document).ready(function(){
    function getTime()
    {
        var d = new Date;
        var hours = d.getHours();
        var mins = d.getMinutes();
       if(hours > 12)
       {
           var hour = (hours - 12);
           var ampm = "PM";
       }
       else
       {
           var hour = hours;
           var ampm = "AM";
       }
       return hour + ":" + mins+ampm;
    }

    setInterval(function(){ // Time will be updated
        $("h1").html(getTime())
    }, 500);

});

例。

Answer 6

あなたのコードは正しくありません

var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();