带开始按钮的烹饪倒计时
Posted
技术标签:
【中文标题】带开始按钮的烹饪倒计时【英文标题】：Cooking countdown timer with start button 【发布时间】：2018-05-07 18:23:29 【问题描述】：我正在创建一个应用来帮助用户烹饪意大利面。用户将选择各种选项，最后一步将根据他们选择的选项创建一个计时器。 （示例：选择意大利面条，al dente 会产生 10 分钟的计时器）为了调试代码，我删除了计算 cookTime 变量的代码并将其设置为 10（分钟），以使变薄更容易一些.这是我的代码：
<script>
var cookTime = 10;
$("#timerButton").on("click", function(event)
event.preventDefault();
document.getElementById('timer').innerhtml = Number(cookTime) + ":" + 00;
startTimer();
);
function startTimer()
var presentTime = Number(cookTime) + ":" + 00;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if(s===59)
m=m-1;
//if(m<0)alert('timer completed')
document.getElementById('timer').innerHTML =
m + ":" + s;
setTimeout(startTimer, 1000);
function checkSecond(sec)
if (sec < 10 && sec >= 0) // add zero in front of numbers < 10
sec = "0" + sec;
if (sec < 0)
sec = "59";
return sec;
</script>p
text-align: center;
font-size: 60px;
margin-top:50px;
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="timer"></div>
<a href="#" id="timerButton">Start Timer</a>
</body>
</html>【问题讨论】：
【参考方案1】：您正在函数中设置分钟和秒变量，以便它们每次都获得相同的值。
var cookTime = 1;
var presentTime = Number(cookTime) + ":00";
var timeArray = presentTime.split(/[:]+/);
// set your minute and second counters
var min = parseInt(timeArray[0]);
var sec = parseInt(timeArray[1]);
$("#timerButton").on("click", function(event)
event.preventDefault();
// show initial time (using jquery since you're already using it for your click function)
$('#timer').html(presentTime);
startTimer(min, sec);
);
function startTimer(m, s)
s--;
if (s<0)
s = 59;
m--;
if (m>=0)
$('#timer').html(m+':'+pad2(s));
// pass the current values for m and s into startTimer
setTimeout(function()
startTimer(m,s);
, 1000);
else alert('time\'s up');
// shorter version of your checkSecond function
function pad2(number)
return (number < 10 ? '0' : '') + number;
检查小提琴：https://jsfiddle.net/j3txcjmz/
【讨论】：
以上是关于带开始按钮的烹饪倒计时的主要内容，如果未能解决你的问题，请参考以下文章
带计时器的绘图应用程序。绘图时间少于 20 秒后计时器开始滞后
页面显示多个计时器，有开始暂停按钮来控制倒计时的开关？？？？求大神指点