Javascript 试图编写一个函数以12小时格式显示时间，但HTML没有显示时间，函数返回null_Javascript_Function_Date

Javascript 试图编写一个函数以12小时格式显示时间，但HTML没有显示时间，函数返回null

javascript function date

Javascript 试图编写一个函数以12小时格式显示时间，但HTML没有显示时间，函数返回null,javascript,function,date,Javascript,Function,Date,我有一个任务，我们必须通过js文件中的函数以12小时的格式插入时间。我已经编写了函数，但是HTML没有提取它，函数返回空值如果我在HTML文件中的脚本标记之间布局函数，它将返回时间，但我需要为赋值设置样式，并且它必须位于单独的js文件中 /*here is the js file*/ "use strict"; var $ = function(id) { return document.getElementById(id); }; var displayCurrentTime = func

我有一个任务，我们必须通过js文件中的函数以12小时的格式插入时间。我已经编写了函数，但是HTML没有提取它，函数返回空值

如果我在HTML文件中的脚本标记之间布局函数，它将返回时间，但我需要为赋值设置样式，并且它必须位于单独的js文件中

/*here is the js file*/
"use strict";
var $ = function(id) { return document.getElementById(id); };

var displayCurrentTime = function() {
     //GET CURRENT DATE-TIME
  var currentTime = new Date ();

  //GET THE CURRENT TIME
  var hours = currentTime.getHours ();
  var minutes = currentTime.getMinutes ();
  var seconds = currentTime.getSeconds ();

  //APPEND A ZERO(0) IF MINUTES OR SECONDS ARE LESS THAN 10
  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  seconds = ( seconds < 10 ? "0" : "" ) + seconds;

  //CHOOSE AM IF HOUR IS LESS THAN 12 AND PM IF HOUR IS BIGGER THAN 12
  var ampm = ( hours < 12 ) ? "AM" : "PM";

  //CHANGE TO 12 HOUR FORMAT BY SUBTRACTING 12 IF HOUR IS BIGGER THAN 12.
  hours = ( hours > 12 ) ? hours - 12 : hours;

  //CHANGE HOUR OF 0 (MIDNIGHT) TO 12.
  hours = ( hours == 0 ) ? 12 : hours;

  //CREATE STRING OF TIME
  var currentTimeString = hours + ":" + minutes + ":" + seconds + " " + ampm;

  //DISPLAY TIME IN DIV
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
var displayCurrentTime = $("minutes");
console.log(displayCurrentTime);

var padSingleDigit = function(num) {
    if (num < 10) { return "0" + num; }
    else { return num; }
};

window.onload = function() {
    // set initial clock display and then set interval timer to display
    // new time every second. Don't store timer object because it 
    // won't be needed - clock will just run.
    displayCurrentTime(setInterval(1000));
};

/*这是js文件*/
“严格使用”；
var$=函数（id）{return document.getElementById（id）；}；
var displayCurrentTime=函数（）{
//获取当前日期时间
var currentTime=新日期（）；
//获取当前时间
var hours=currentTime.getHours（）；
var minutes=currentTime.getMinutes（）；
var seconds=currentTime.getSeconds（）；
//如果分钟或秒数小于10，则追加零（0）
分钟=（分钟<10？：“）+分钟；
秒=（秒<10？：“）+秒；
//如果小时数小于12，则选择AM；如果小时数大于12，则选择PM
var ampm=（小时数<12）？“上午”：“下午”；
//如果小时大于12，则通过减去12更改为12小时格式。
小时=（小时>12）？小时-12：小时；
//将0小时（午夜）更改为12小时。
小时=（小时==0）？12：小时；
//创建时间字符串
var currentTimeString=hours+“：“+minutes+”：“+seconds+”+ampm；
//以DIV显示时间
document.getElementById（“时钟”）.firstChild.nodeValue=currentTimeString；
}
var displayCurrentTime=$（“分钟”）；
console.log（显示当前时间）；
var PADSingledigital=函数（num）{
如果（num<10）{返回“0”+num；}
else{return num；}
};
window.onload=函数（）{
//设置初始时钟显示，然后将间隔计时器设置为显示
//每秒新时间。不要存储计时器对象，因为它
//不需要-时钟只需运行即可。
显示当前时间（设置间隔（1000））；
};

HTML文件中有4个跨度ID（小时、分钟、秒和ampm）需要填写

以下是index.html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>Clock</title>
    <link rel="stylesheet" href="clock.css">
    <script src="clock.js"></script>
</head>
<body>
    <main>
        <h1>Digital clock</h1>
        <fieldset>
            <legend>Clock</legend>
            <span id="hours">&nbsp;</span>:
            <span id="minutes">&nbsp;</span>:
            <span id="seconds">&nbsp;</span>&nbsp;
            <span id="ampm">&nbsp;</span>
        </fieldset>
    </main>
</body>
</html>


钟
数字钟
钟
:
:

我发现有几个问题可能会让你大吃一惊

1）您将函数定义为

displayCurrentTime

（可以使用），但随后使用

var displayCurrentTime=$（“分钟”）

行完全覆盖它。因此，您不需要调用函数，而是要检索一个元素 -您的console.log（）紧随其后，因此您会看到一个空值

2）您说“HTML文件中有4个span id（小时、分钟、秒和ampm）需要填写”，但您的脚本只是返回所有这些字段，并将它们合并在一起-这对您没有帮助，但您的函数中已经有了所有正确的值

var displayCurrentTime = function() {
  var currentTime = new Date ();

  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();

  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  seconds = ( seconds < 10 ? "0" : "" ) + seconds;

  var ampm = ( hours < 12 ) ? "AM" : "PM";

  hours = ( hours > 12 ) ? hours - 12 : hours;
  hours = ( hours == 0 ) ? 12 : hours;

  // At this point, all 4 values are ready to drop into your span tags
  $('hours').textContent = hours;
  $('minutes').textContent = minutes;
  $('seconds').textContent = seconds;
  $('ampm').textContent = ampm;
}

document.getElementById（“时钟”）

如果您在文件顶部定义了一个函数来处理此问题，那么应该在此处使用它，我不确定这是什么意思。index.html中根本不显示任何内容。由于某些原因，我无法将其连接到span ID。其中有4个小时、分钟、秒和ampm。你能用HTML的相关部分更新你的问题吗？当前，您似乎正在尝试更新一个元素，该元素是

#clock

元素的子元素，并且与您正在讨论的4个跨度不匹配。我已更新html代码

var displayCurrentTime=$（“分钟”）在哪里定义了$函数？错误“textContent在displayCurrentTime不是函数”我是否需要以不同的方式编写（$（'ampm'）。textContent（ampm）；）呢？不，这是因为我太习惯于jQuery而没有思考-我现在就解决这个问题我也尝试了nodeValue，但是这是很有用的，因为我们将在下周启动jQuery单元jQuery非常棒，而且被过度使用，所以在线和这里有大量的资源可供学习（您将看到大多数使用jQuery的javascript/HTML的答案）。但是是的，.textContent=text
，而不是。textContent（text）万岁！我一直被困在这个问题上。非常感谢你。现在我明白了，您必须在函数内部调用它们，而不是在函数外部调用span标记。
window.onload = function() {
    setInterval(displayCurrentTime, 1000);
};