Javascript循环倒数计时器答案

【问题标题】：Javascript loop countdown timerJavascript循环倒数计时器
【发布时间】：2017-08-05 14:40:48
【问题描述】：

function timer()

{
	var currentTime = new Date()
	var hours = currentTime.getHours()
	var minutes = currentTime.getMinutes()
	var seconds = currentTime.getSeconds()

	if (minutes < 10)
	{
		minutes = "0" + minutes
	}
	
	if (hours < 6)
	{
		var hoursLeft = 5 – hours;
		var minsLeft = 60 – minutes;
		
		if(minsLeft==60)
		{
			minsLeft=0;
			hoursLeft++;
		}
	var secsLeft = 60 – seconds;
	
		if(secsLeft==60)
		{
			secsLeft=0;
			minsLeft++;
		}
	}

	else if (hours < 18)
	{
		var hoursLeft = 17 – hours;
		var minsLeft = 60 – minutes;
		
		if(minsLeft==60)
		{
			minsLeft=0;
			hoursLeft++;
		}

		var secsLeft = 60 – seconds;
		
		if(secsLeft==60)
		{
			secsLeft=0;
      minsLeft++;
		}
	}
	
	else if (hours < 24)
	{
		var hoursLeft = 29 – hours;
		var minsLeft = 60 – minutes;
		
		if(minsLeft==60)
		{
			minsLeft=0;
			hoursLeft++;
		}
		
		var secsLeft = 60 – seconds;
		
		if(secsLeft==60)
		{
			secsLeft=0;
			minsLeft++;
		}
	}
	
	else if (hours == 6)
	{
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("reset.html", true);
		xmlhttp.send();
	}
	
	else if (hours == 18)
	{
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("reset.html", true);
		xmlhttp.send();
	}
	
	else
	{
		document.write("Error, please contact admin");
	}

	document.getElementById('timerUpFront').innerHTML= hoursLeft + " hours " + minsLeft + " minutes " + secsLeft + " seconds";
}

	var countdownTimer = setInterval('timer()', 1000);

#timerUpFront
{
	color:#009DE3;
}

#timer
{
  font-family: "Comic Sans MS", cursive, sans-serif;
  margin-top: 20px;
  font-size:36px;
  text-align:center;
}

#button
{
	background-color:#008CFF;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size:26px;
	width:160px;
	padding: 10px;
	margin: 2em auto;
	margin-top: 10px;
}

<html>
<head>
<title>Timer</title>
</head>

<body>
<div id="timer">
<span id="timerUpFront"></span>
<br><br>
<div id="button">
<center><a href="reset.html" style="text-decoration:none">Reset</a></center>
</div>
</div>
</body>
</html>

尝试创建一个自动倒计时计时器，该计时器应在到达 0:00:00 或按下按钮后自行重置，但不会在页面刷新时重置。我已经尝试了几个小时，但无法显示计时器，在我自己显示的 .js 文件中找不到任何错误。作为我最后一个选项，我不得不在这个网站上询问。

【问题讨论】：

标签： javascript countdowntimer

【解决方案1】：

我不确定是否有人在恶作剧或其他什么，但您使用的是更大的破折号（我不确定它叫什么），而不是常规的减号。我用-替换了–。

function timer()

{
	var currentTime = new Date()
	var hours = currentTime.getHours()
	var minutes = currentTime.getMinutes()
	var seconds = currentTime.getSeconds()

	if (minutes < 10)
	{
		minutes = "0" + minutes
	}
	
	if (hours < 6)
	{
		var hoursLeft = 5 - hours;
		var minsLeft = 60 - minutes;
		
		if(minsLeft==60)
		{
			minsLeft=0;
			hoursLeft++;
		}
	var secsLeft = 60 - seconds;
	
		if(secsLeft==60)
		{
			secsLeft=0;
			minsLeft++;
		}
	}

	else if (hours < 18)
	{
		var hoursLeft = 17 - hours;
		var minsLeft = 60 - minutes;
		
		if(minsLeft==60)
		{
			minsLeft=0;
			hoursLeft++;
		}

		var secsLeft = 60 - seconds;
		
		if(secsLeft==60)
		{
			secsLeft=0;
      minsLeft++;
		}
	}
	
	else if (hours < 24)
	{
		var hoursLeft = 29 - hours;
		var minsLeft = 60 - minutes;
		
		if(minsLeft==60)
		{
			minsLeft=0;
			hoursLeft++;
		}
		
		var secsLeft = 60 - seconds;
		
		if(secsLeft==60)
		{
			secsLeft=0;
			minsLeft++;
		}
	}
	
	else if (hours == 6)
	{
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("reset.html", true);
		xmlhttp.send();
	}
	
	else if (hours == 18)
	{
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("reset.html", true);
		xmlhttp.send();
	}
	
	else
	{
		document.write("Error, please contact admin");
	}

	document.getElementById('timerUpFront').innerHTML= hoursLeft + " hours " + minsLeft + " minutes " + secsLeft + " seconds";
}

	var countdownTimer = setInterval('timer()', 1000);

#timerUpFront
{
	color:#009DE3;
}

#timer
{
  font-family: "Comic Sans MS", cursive, sans-serif;
  margin-top: 20px;
  font-size:36px;
  text-align:center;
}

#button
{
	background-color:#008CFF;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size:26px;
	width:160px;
	padding: 10px;
	margin: 2em auto;
	margin-top: 10px;
}

<html>
<head>
<title>Timer</title>
</head>

<body>
<div id="timer">
<span id="timerUpFront"></span>
<br><br>
<div id="button">
<center><a href="reset.html" style="text-decoration:none">Reset</a></center>
</div>
</div>
</body>
</html>

【讨论】：