Timer: -2 dni zamiast 0 dni

pytanie zadane 24 lutego 2019 w JavaScript przez Programista 22 Bywalec (2,270 p.)
edycja 24 lutego 2019 przez Programista 22

Dzień Dobry,

Mam problem z licznikiem który odlicza czas do pewnego momentu (np. 28 luty, godz. 16:12) Natomiast kiedy ten czas przekroczy - to wyświetla -2dni mimo iż jest if (linia 81-89). Czy coś zrobiłem źle w kodzie? Czy może trzeba dodać jakąś funkcję?

<!DOCTYPE html>
<html>
<head>
	<title>Timer- Odliczanie!</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
	<script>
		function read()
		{
			let read_cookie = document.cookie;
			if(document.cookie == undefined)
			{
				set_cookie();
				alert("Cookie -!")
			}
			else
			{
				alert("SUPER!");
			} 
		}
		function set_cookie()
		{
			var cookie_time = new Date();
			var rok = cookie_time.getFullYear();
			var mes = cookie_time.getMonth();
			var data = cookie_time.getDate();
			var dia = cookie_time.getDay();
			var tag;
			if(dia== 1) tag = "Monday";
			else if(dia== 2) tag = "Tuesday";
			else if(dia== 3) tag = "Wednesday";
			else if(dia== 4) tag = "Thursday";
			else if(dia== 5) tag = "Friday";
			else if(dia== 6) tag = "Saturday";
			else if(dia== 7) tag = "Sunday";
			//MIESIĄCE!
			if(mes== 0) mes = "Jan";
			else if(mes == 1) mes = "Feb";
			else if(mes== 2) mes = "Mar";
			else if(mes== 3) mes = "Apr";
			else if(mes== 4) mes = "May";
			else if(mes== 5) mes = "Jun";
			else if(mes== 6) mes = "Jul";
			else if(mes== 7) mes = "Aug";
			else if(mes== 8) mes = "Sep";
			else if(mes== 9) mes = "Oct";
			else if(mes== 10) mes = "Nov";
			else if(mes== 11) mes = "Dec";


			var hora = cookie_time.getHours();
			var minuto = cookie_time.getMinutes();
			var cookie_string = tag+","+data+" "+mes+" "+rok+" "+hora+":"+minuto+":00";
			//alert(cookie_string);
			document.cookie = "czas = dia + 30; expires="+cookie_string;
			var read = document.cookie;
			alert(read); 
		}
		function show_time()
		{
			setTimeout("show_time()",1000);
			setTimeout("sale()",1000);
		}
		function sale()
		{
			// USTAWIANIE ZMIENNYCH
			var bool = document.cookie;
			if(bool != undefined)
			{
			var time = new Date();
			var d = time.getDate();
			var h = time.getHours();
			var m = time.getMinutes();
		    var s = time.getSeconds();
			var dzien = 22 - d;
			var godzina = 14 - h;
			var minuta = 59 - m;
			var sec = 59 - s;
			if (dzien < 0 && godzina < 0) 
			{

				// JEŻELI DZIEŃ TO WARTOŚĆ PONIŻEJ ZERA:
				dzien = 0;
				godzina = 0;
				minuta = 0;
				sec = 0;
			}
			//WYŚWIETL CZAS 
			document.getElementById("d").innerHTML = dzien + '<figcaption class="capt">DNI</figcaption>';
			document.getElementById("h").innerHTML = godzina + '<figcaption class="capt">GODZIN</figcaption>';
			document.getElementById("m").innerHTML = minuta + '<figcaption class="capt">MINUT</figcaption>';
			document.getElementById("s").innerHTML = sec +'<figcaption class="capt">SEKUND</figcaption>';
		}}
		set_cookie();
		//var read = document.cookie;
		//alert(read);
	</script>
	 <style type="text/css">
	 	.odliczanie
	 	{
	 		font-family: 'Special Elite', cursive;
	 		background-color: #fff;
	 	}
	 	.timer
	 	{
	 		background-color: #df2311;
	 		box-sizing: border-box;
	 		width: 130px;
	 		padding: 40px 10px;
	 		display: inline-block;
	 		text-align: center;
	 		font-size: 36px;
	 		border-radius: 10px;
	 		font-family: 'Special Elite', cursive;
	 		color: #fff;
	 	}
	 	.capt
	 	{	

	 		font-size: 20px;	
	 	}
	 </style>
</head>
<body onload="show_time()">
	<main class="time">CZAS:
		<div id="day"></div>
		<div id="hours">C</div>
		<div id="minutes"></div>
		<div id="seconds"></div>
	</main>
	<br><br>
	<section>
		<div class="odliczanie">
			ZOSTAŁO:
			<ul>
				<li id="d" class="timer"></li>
				<li id="h" class="timer"></li>
				<li id="m" class="timer"></li>
				<li id="s" class="timer"></li>
				<br>
			</ul>
		</div>
	</section>
</body>

1 odpowiedź

odpowiedź 24 lutego 2019 przez pablop76 VIP (123,540 p.)

        function show_time()
        {
            setTimeout("show_time()",1000);
            setTimeout("sale()",1000);
        }

Tak się nie przekazuje funkcji. Powinno być:

        function show_time()
        {
            setTimeout(show_time,1000);
            setTimeout(sale,1000);
        }

Moim zdanie lepiej użyć setInterval zamiast rekurencji, ponieważ możesz wtedy łatwo zatrzymać odliczanie używając clearInterval , a tak twoja pętla cały czas działa

Twój licznik idzie dalej ponieważ drugi warunek (godzina < 0) nie jest spełniony