你如何使用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 });

• 演示

这将在每个h1标记中显示一次当前时间。查看setInterval以了解定期更新它。

Answer 2

首先，你的JS代码看起来有问题。我假设你想拥有类似的东西

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

对于时钟，您需要一个间隔...当前代码仅生成当前时间戳

Answer 3

您似乎要关闭对ready的调用两次。

});

Answer 4

这将创建一个时钟，该时钟在 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 5

你的代码不正确

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

Answer 6

时间将更新

$(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);
});

举个例子。