NaN而不是数字- javascript

NaN instead of numbers - javascript

本文关键字:javascript 数字 NaN      更新时间:2023-09-26

我正在制作一个显示当前时间的网页,以及一个硬编码时间的倒计时。目前的时间工作完美,但倒计时显示NaN而不是数字…没有控制台错误。这是我的代码:

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var now = new Date();
    var deadline = new Date();
    var countdown = new Date("12:10:00");
    // deadline setten moet via gui kunnen____________________________
    // deadline.setHours(11);
    // deadline.setMinutes(10);
    // deadline.setSeconds(0);
    //________________________________________________________________
    var clockH = now.getHours();
    var clockM = now.getMinutes();
    var clockS = now.getSeconds();
    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;
    //m = checkTime(m);
    //s = checkTime(s);
    startClock('clock');
    startCountdown('countdown', deadline);
    var t = setTimeout(startTime, 500);
}
function getCountdown(deadline){
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdown/1000) % 60 );
    var countdownM = Math.floor( (countdown/1000/60) % 60 );
    var countdownH = Math.floor( (countdown/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}
function startClock(id){
  var clock = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var now = new Date();
    var nowH = now.getHours();
    var nowM = now.getMinutes();
    var nowS = now.getSeconds();
    clock.innerHTML =  'hours: '+ nowH + ' minutes: ' + nowM + ' seconds: ' + nowS;
  }, 1000);
}
function startCountdown(id, deadline){
  var countdown = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var t = getCountdown(deadline);
    countdown.innerHTML = 'hours: '+ t.countdownH + ' minutes: ' + t.countdownM + ' seconds: ' + t.countdownS;
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 1000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>
<body onload="startTime()">
<div id="clock"> </div><br>
<div id="countdown"> </div>
</body>
</html>

你的实际问题是,你的倒计时变量无效:

var countdown = new Date("12:10:00")
//Invalid Date
countdown / 10
//NaN

三个问题:

  • var countdown = new Date("12:10:00");日期格式无效。
  • countdown应该代替startCountdown参数中的deadline
  • getCountdown方法中,应使用
  • countdownTotal代替countdown

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var now = new Date();
    var deadline = new Date();
    // year, month, day, hours, minutes, seconds, milliseconds
    var countdown = new Date(2016, 11, 3, 18, 00);
    //console.log(countdown);
    // deadline setten moet via gui kunnen____________________________
    // deadline.setHours(11);
    // deadline.setMinutes(10);
    // deadline.setSeconds(0);
    //________________________________________________________________
    var clockH = now.getHours();
    var clockM = now.getMinutes();
    var clockS = now.getSeconds();
    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;
    //m = checkTime(m);
    //s = checkTime(s);
    startClock('clock');
    startCountdown('countdown', countdown);
    var t = setTimeout(startTime, 500);
}
function getCountdown(deadline){
  //console.log(Date.parse(deadline));
  //console.log(Date.parse(new Date()));
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdownTotal/1000) % 60 );
    var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
    var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}
function startClock(id){
  var clock = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var now = new Date();
    var nowH = now.getHours();
    var nowM = now.getMinutes();
    var nowS = now.getSeconds();
    clock.innerHTML =  'hours: '+ nowH + ' minutes: ' + nowM + ' seconds: ' + nowS;
  }, 1000);
}
function startCountdown(id, deadline){
  var countdown = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var t = getCountdown(deadline);
    //console.log(t);
    countdown.innerHTML = 'hours: '+ t.countdownH + ' minutes: ' + t.countdownM + ' seconds: ' + t.countdownS;
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 1000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>
<body onload="startTime()">
<div id="clock"> </div><br>
<div id="countdown"> </div>
</body>
</html>

您应该使用注释掉的部分为您的startTime

function startTime() {
    var now = new Date();
    var deadline = new Date();
    //var countdown = new Date("12:10:00");
    // deadline setten moet via gui kunnen____________________________
     deadline.setHours(19);
     deadline.setMinutes(10);
     deadline.setSeconds(0);
    //________________________________________________________________
    //var clockH = now.getHours();
    //var clockM = now.getMinutes();
    //var clockS = now.getSeconds();
    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;
    //m = checkTime(m);
    //s = checkTime(s);
    startClock('clock');
    startCountdown('countdown', deadline);
    var t = setTimeout(startTime, 500);
}

getCountdown方法中,你应该使用正确的变量名

function getCountdown(deadline){
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdownTotal/1000) % 60 );
    var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
    var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var now = new Date();
    var deadline = new Date();
    //var countdown = new Date("12:10:00");
    // deadline setten moet via gui kunnen____________________________
     deadline.setHours(19);
     deadline.setMinutes(10);
     deadline.setSeconds(0);
    //________________________________________________________________
    //var clockH = now.getHours();
    //var clockM = now.getMinutes();
    //var clockS = now.getSeconds();
    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;
    //m = checkTime(m);
    //s = checkTime(s);
    startClock('clock');
    startCountdown('countdown', deadline);
    var t = setTimeout(startTime, 500);
}
function getCountdown(deadline){
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdownTotal/1000) % 60 );
    var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
    var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}
function startClock(id){
  var clock = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var now = new Date();
    var nowH = now.getHours();
    var nowM = now.getMinutes();
    var nowS = now.getSeconds();
    clock.innerHTML =  'hours: '+ nowH + ' minutes: ' + nowM + ' seconds: ' + nowS;
  }, 1000);
}
function startCountdown(id, deadline){
  var countdown = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var t = getCountdown(deadline);
    countdown.innerHTML = 'hours: '+ t.countdownH + ' minutes: ' + t.countdownM + ' seconds: ' + t.countdownS;
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 1000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>
<body onload="startTime()">
<div id="clock"> </div><br>
<div id="countdown"> </div>
</body>
</html>

我认为这将是你需要的。

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var now = new Date();
    var deadline = new Date();
    var countdown = new Date("November 03, 2016 20:00:00");
    // deadline setten moet via gui kunnen____________________________
    // deadline.setHours(11);
    // deadline.setMinutes(10);
    // deadline.setSeconds(0);
    //________________________________________________________________
    var clockH = now.getHours();
    var clockM = now.getMinutes();
    var clockS = now.getSeconds();
    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;
    //m = checkTime(m);
    //s = checkTime(s);
    startClock('clock');
    startCountdown('countdown', countdown);
    var t = setTimeout(startTime, 500);
}
function getCountdown(deadline){
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdownTotal/1000) % 60 );
    var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
    var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}
function startClock(id){
  var clock = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var now = new Date();
    var nowH = now.getHours();
    var nowM = now.getMinutes();
    var nowS = now.getSeconds();
    clock.innerHTML =  'hours: '+ nowH + ' minutes: ' + nowM + ' seconds: ' + nowS;
  }, 1000);
}
function startCountdown(id, deadline){
  var countdown = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var t = getCountdown(deadline);
    countdown.innerHTML = 'hours: '+ t.countdownH + ' minutes: ' + t.countdownM + ' seconds: ' + t.countdownS;
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 1000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>
<body onload="startTime()">
<div id="clock"> </div><br>
<div id="countdown"> </div>
</body>
</html>