Javascript数字输入倒计时
我想做一个倒计时网站，一切都很好，但它不需要在文本框中的数字，我已经启用，只有数字可以输入。每次我输入一些数字，它都会显示NaN:NaN Index.htmlJavascript数字输入倒计时,javascript,Javascript,我想做一个倒计时网站，一切都很好，但它不需要在文本框中的数字，我已经启用，只有数字可以输入。每次我输入一些数字，它都会显示NaN:NaN Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
<!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>
比萨饼计时器
比萨饼定时器
世界上最好的比萨饼计时器
当您单击按钮时，计时器将启动！
开始
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);
};
var number1=document.getElementById（'input1'）.value；
var number2=document.getElementById（'input2'）。值；
功能启动计时器（持续时间、显示）{
var定时器=持续时间，分钟，秒；
var倒计时=设置间隔（函数（）{
分钟=parseInt（计时器/60,10）
秒=parseInt（计时器%60,10）；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
display.textContent=分钟+“：”+秒；
如果（--定时器<0）{
警惕（“你的比萨饼准备好了！”）；
清除间隔（倒计时）；
}
}, 1000);
}
功能按钮指示器（编号1、编号2）{
var分钟数=1*60+输入2，
display=document.querySelector（“#time”）；
开始计时器（分钟，显示）；
};
onclick=buttonTimer()
buttonTimer (number1, number2)
document.getElementById('input1').value
var number1 = document.getElementById('input1').value;
var number2 = document.getElementById('input2').value;
function buttonTimer () {
var number1 = parseInt(document.getElementById('input1').value,10);
var number2 = parseInt(document.getElementById('input2').value,10);
var Minutes = number1*60+number2, //possibly this better rename to Seconds
display = document.querySelector('#time');
startTimer(Minutes, display);
};
按如下方式修改您的代码：
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);
};
需要将int解析为number1和number2
var Minutes=number1*60+input2input2未定义的parseInt