NaN而不是数字 - javascript

时间：2016-11-03 12:02:08

标签： javascript html

我正在制作一个显示当前时间的网页，以及一个硬编码时间的倒​​计时。 当前时间很完美，但倒计时显示的是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>

4 个答案:

答案 0 :(得分：0)

这就是我想要的。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您实际的问题是，您的倒计时变量无效：

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

countdown / 10
//NaN

答案 2 :(得分：0)

3个问题：

  • var countdown = new Date("12:10:00");不是valide日期格式。
    • 应该在startCountdown参数中使用
  • countdown而不是deadline。
    • 在countdownTotal方法中应使用
  • countdown代替getCountdown。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您应该将注释掉的部分用于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>

相关问题
最新问题