Javascript循环倒计时器

时间:2017-08-05 14:40:49

标签: javascript countdowntimer



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);
&#13;
#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;
}
&#13;
<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>
&#13;
&#13;
&#13;

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

1 个答案:

答案 0 :(得分:1)

我不确定是否有人恶作剧你或者某事,但你使用的是更大的破折号(我不确定那是什么),而不是常规的减号。我用 - 替换 -

&#xA;&#xA;

&#xD;&#xA;
&#xD;&#xA;
  function timer()&#xD;&#xA;&#xD;&#xA; {&#xD;&#xA; var currentTime = new Date()&#xD;&#xA; var hours = currentTime.getHours()&#xD;&#xA; var minutes = currentTime.getMinutes()&#xD;&#xA; var seconds = currentTime.getSeconds()&#xD;&#xA;&#xD;&#xA; if(分钟&lt; 10)&#xD;&#xA; {&#的xD;&#XA;分钟=“0”+分钟&#xD;&#xA; }&#的xD;&#XA; &#的xD;&#XA; if(小时&lt; 6)&#xD;&#xA; {&#的xD;&#XA; var hoursLeft = 5  - 小时;&#xD;&#xA; var minsLeft = 60  - 分钟;&#xD;&#xA; &#的xD;&#XA;如果(minsLeft == 60)&#的xD;&#XA; {&#的xD;&#XA; minsLeft = 0;&#的xD;&#XA; hoursLeft ++;&#的xD;&#XA; }&#的xD;&#XA; var secsLeft = 60  - 秒;&#xD;&#xA; &#的xD;&#XA;如果(secsLeft == 60)&#的xD;&#XA; {&#的xD;&#XA; secsLeft = 0;&#的xD;&#XA; minsLeft ++;&#的xD;&#XA; }&#的xD;&#XA; }&#的xD;&#XA;&#的xD;&#XA;否则如果(小时&lt; 18)&#xD;&#xA; {&#的xD;&#XA; var hoursLeft = 17  -  hours;&#xD;&#xA; var minsLeft = 60  - 分钟;&#xD;&#xA; &#的xD;&#XA;如果(minsLeft == 60)&#的xD;&#XA; {&#的xD;&#XA; minsLeft = 0;&#的xD;&#XA; hoursLeft ++;&#的xD;&#XA; }&#的xD;&#XA;&#的xD;&#XA; var secsLeft = 60  - 秒;&#xD;&#xA; &#的xD;&#XA;如果(secsLeft == 60)&#的xD;&#XA; {&#的xD;&#XA; secsLeft = 0;&#的xD;&#XA; minsLeft ++;&#的xD;&#XA; }&#的xD;&#XA; }&#的xD;&#XA; &#的xD;&#XA;否则如果(小时&lt; 24)&#xD;&#xA; {&#的xD;&#XA; var hoursLeft = 29  -  hours;&#xD;&#xA; var minsLeft = 60  - 分钟;&#xD;&#xA; &#的xD;&#XA;如果(minsLeft == 60)&#的xD;&#XA; {&#的xD;&#XA; minsLeft = 0;&#的xD;&#XA; hoursLeft ++;&#的xD;&#XA; }&#的xD;&#XA; &#的xD;&#XA; var secsLeft = 60  - 秒;&#xD;&#xA; &#的xD;&#XA;如果(secsLeft == 60)&#的xD;&#XA; {&#的xD;&#XA; secsLeft = 0;&#的xD;&#XA; minsLeft ++;&#的xD;&#XA; }&#的xD;&#XA; }&#的xD;&#XA; &#的xD;&#XA;否则如果(小时== 6)&#xD;&#xA; {&#的xD;&#XA; var xmlhttp = new XMLHttpRequest();&#xD;&#xA; xmlhttp.open(“reset.html”,true);&#xD;&#xA; xmlhttp.send();&#的xD;&#XA; }&#的xD;&#XA; &#的xD;&#XA;否则如果(小时== 18)&#xD;&#xA; {&#的xD;&#XA; var xmlhttp = new XMLHttpRequest();&#xD;&#xA; xmlhttp.open(“reset.html”,true);&#xD;&#xA; xmlhttp.send();&#的xD;&#XA; }&#的xD;&#XA; &#的xD;&#XA;否则&#的xD;&#XA; {&#的xD;&#XA; document.write(“错误,请联系管理员”);&#xD;&#xA; }&#的xD;&#XA;&#的xD;&#XA; document.getElementById('timerUpFront')。innerHTML = hoursLeft +“hours”+ minsLeft +“minutes”+ secsLeft +“seconds”;&#xD;&#xA;}&#xD;&#xA;&#xD; &#XA; var countdownTimer = setInterval('timer()',1000);  
&#xD;&#xA;
 #timerUpFront&#的xD;&#XA; {&#的xD;&#XA;颜色:#009DE3;&#的xD;&#XA;}&#的xD;&#XA;&#的xD;&#XA;#计时器&#的xD;&#XA; {&#的xD;&#XA; font-family:“Comic Sans MS”,草书,无衬线;&#xD;&#xA; margin-top:20px;&#xD;&#xA;字体大小:36px;&#的xD;&#XA;文本对齐:中心;&#的xD;&#XA;}&#的xD;&#XA;&#的xD;&#XA;#按钮&#的xD;&#XA; {&#的xD;&#XA;背景色:#008CFF;&#的xD;&#XA; font-family:Segoe,“Segoe UI”,“DejaVu Sans”,“Trebuchet MS”,Verdana,sans-serif;&#xD;&#xA;字体大小:26px;&#的xD;&#XA;宽度:160像素;&#的xD;&#XA;填充:10px;&#xD;&#xA;保证金:2em auto;&#xD;&#xA; margin-top:10px;&#xD;&#xA;}  
&#xD;&#xA;
 <代码>&LT; HTML&GT;&#的xD;&#XA;&LT; HEAD&GT;&#的xD;&#XA;&LT;标题&GT;定时器和LT; /标题&GT;&#的xD;&#XA;&LT; /头&GT;&# xD;&#xA;&#xD;&#xA;&lt; body&gt;&#xD;&#xA;&lt; div id =“timer”&gt;&#xD;&#xA;&lt; span id =“ timerUpFront“&gt;&lt; / span&gt;&#xD;&#xA;&lt; br&gt;&lt; br&gt;&#xD;&#xA;&lt; div id =”button“&gt;&#xD;&#xA ;&lt; center&gt;&lt; a href =“reset.html”style =“text-decoration:none”&gt;重置&lt; / a&gt;&lt; / center&gt;&#xD;&#xA;&lt; / div&gt;& #xD;&#XA;&LT; / DIV&GT;&#的xD;&#XA;&LT; / BODY&GT;&#的xD;&#XA;&LT; / HTML&GT;  
&#的xD; &#XA;
&#的xD;&#XA;
&#的xD;&#XA;

&#XA;