Question

我想制作一个倒计时网站，一切正常，但它不需要文本框中的数字，我已启用只能输入数字。每当我输入一些数字时，它会显示NaN：NaN。

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link href='https://fonts.googleapis.com/css?family=Merriweather:700italic' rel='stylesheet' type='text/css'>
    <title>Pizza Timer</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/styles.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../0../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
    <body id="test" background="pizza.jpg">
        <h1 class="text-center"><strong>Pizza Timer!</strong></h1>
        <p class="text-center"><small>The Best Pizza Timer In The World!</small></p>
        <p id="demo"></p>
        <div class="timer">
            <span id="time">The Timer Will Start When You Click The Button!</span>
        </div>
        <div class="row">
            <div class="container">
                <input id="input1" class="form-control" type="number" placeholder="Minutes" />
                <input id="input2" class="form-control" type="number" placeholder="Seconds" />
                <button id="timerstarter" class="btn btn-success" onclick=buttonTimer()>Start!</button>
            </div>
        </div>
    </body>
</html>

app.js

var number1 = document.getElementById('input1').value;
var number2 = document.getElementById('input2').value;

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var countdown = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

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

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            alert("Your Pizza Is Ready!");
            clearInterval(countdown);
        }
    }, 1000);
}

function buttonTimer (number1, number2) {
    var Minutes = number1*60+input2,
        display = document.querySelector('#time');
    startTimer(Minutes, display);
};

Answer 1

你打电话

java.lang.Object

没有args，但这个函数需要两个参数

onclick=buttonTimer()

所以在你的情况下，他们都是 undefined

下一步：这一行

buttonTimer (number1, number2)

返回字符串，因此您应该在使用 parseInt 或 parseFloat

之前对其进行解析

所以，似乎你应该移动线

document.getElementById('input1').value

像这样 buttonTimer

var number1 = document.getElementById('input1').value;
var number2 = document.getElementById('input2').value;

Answer 2

不要将分钟和秒数作为args传递，而是在调用buttonTimer函数时尝试读取它们。

或者，您可以获取值并在调用onClick时传递它。

（这是对其他帖子的补充，因为它必须被解析成数值才能进行计算。这就是你得到NAN（不是数字）的原因

Answer 3

按如下方式修改代码：

var number1 = document.getElementById('input1');
var number2 = document.getElementById('input2');

function buttonTimer () {
  var Minutes = number1.value * 60+ number2.value,
      display = document.querySelector('#time');
  startTimer(Minutes, display);
};

Javascript数字输入倒计时

3 个答案: