Odliczanie do wydarzeń (countdown)

rafaeru · 15 Września 2017

Potrzebuje pomocy z napisaniem skryptu który odlicza czas do wydarzeń.

Napisałem coś takiego tylko, że nie wiem jak dodać więcej wydarzeń i żeby odliczało do najbliższego.

<script type = "text/javascript">
function getSeconds() {
var now = new Date();
var time = now.getTime();  // time now in milliseconds
var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),13,0,0); // midnight 0000 hrs
// midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
var ft = midnight.getTime() + 86400000;  // add one day
var diff = ft - time;  
diff = parseInt(diff/1000);
if (diff > 86400) {diff = diff - 86400}
startTimer (diff);
}


var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000); 
tick(); // to start counter display right away
}

function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
getSeconds();  // and start again if required
}

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins
                  + ":" + ( (secs < 10) ? "0" : "" ) + secs;
document.getElementById("countdown").innerHTML = result;
}
</script>

<body onload = "getSeconds()">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Next Event</h3>
					</div>
					<div class="panel-body">
						<table class="table table-condensed table-content table-striped">
							<tbody>						
								<tr>
									<center><h4>
									Hollowstorm Event<br>
									<span id="countdown"></span>
									</center></h4>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
</body>

Damian_RastMan · 16 Września 2017

<!doctype HTML>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			//array with events, ['name of the Event', unix timestamp]
			var events = [
					['Najbliższy Event', 1505865661],
					['Odległy Event', 1509975661],
					['Nieaktualny Event', 1505501264]
				];
				
			//date
			var date = new Date();
			//current time
			var cTime = Math.round(date.getTime()/1000);
			//index of event from events[]
			var evID;
			//How long should it show the name of the event which is now happening;
			var eDuration = 0;
			
			var tempTS;
			for(i=0;i<events.length;i++){
				tempTS = events[i*1][1];
				if(i==0){
					evID = i;
				}
				else{
					if(tempTS < events[evID][1] && ((events[evID][1]-cTime)*1)<=(0-eDuration)){
						evID = i;
					}
				}
			}
			//The time which has left to event
			var timeLeft = events[evID][1]-cTime;
			//converting to d:h:m:s
			function convert(time){
				var result;
				//checking the event is currently ongoing
				if(time > 0){
					var s, m, h, d;
					
					m = Math.floor(time/60);
					s = time-(m*60);
					
					h = Math.floor(m/60);
					m = m-(h*60);
					
					d = Math.floor(h/24);
					h = h-(d*24);
					result = d+' dni, oraz<br />'+h+':'+m+':'+s;
				}
				else {
					result = 'Event Trwa!';
				}
				return result;
			}
			$(document).ready(function(){
				$('#eventTime').html(convert(timeLeft));
				$('#eventName').html(events[evID][0]);
				setInterval(function(){
					$('#eventTime').html(convert(timeLeft));
					timeLeft--;
				}, 1000);
			});
			

		</script>
	</head>
	<body>
		<p id="eventName"></p>
		<p id="eventTime"></p>
	</body>
</html>

W tablicy masz eventy, system jest prosty dodajesz sobie dowolnie wydarzenia do tablicy a resztę robi kod. Do tego możesz sobie ustawić czas w sekundach, przez jaki twoje wydarzenie będzie się wyświetlać jako wydarzenie trwające (żeby od razu po zakończeniu wydarzenia nie ustawiał się licznik do nowego tylko przez jakiś czas (np. kilka godzin) wyświetlał się trwający)

rafaeru · 3 Października 2017

Niby wszystko działa ale zauważyłem, że przy zmianie minut licznik zatrzymuje się na około 2-3 sekundy przez co robi się niedokładność o kilka minut w przeciągu godziny jeśli jesteśmy cały czas na stronie i jej nie odświeżymy.

Damian_RastMan · 19 Września 2017

<!doctype HTML>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			//array with events, ['name of the Event', unix timestamp]
			var events = [
					['Crocodile attack Event', '10:00:00'],
					['Doflamingo is back! Event', '15:00:00'],
					['Big mum pirates! Event', '20:00:00']
				];
				
			//date
			var date = new Date();
			//actually time
			var now = (date.getHours()*3600)+(date.getMinutes()*60)+(date.getSeconds());
			//index of event from events[]
			var evID;
			//How long should it show the name of the event which is now happening;
			var eDuration = 0;
			
			//temp - temporary variable, currEvDate - Current event time in seconds
			var temp,currEvDate;
			for(i=0;i<events.length;i++){
				//event time string array
				evTSA = events[i][1].split(':');
				temp = (evTSA[0]*3600)+(evTSA[1]*60)+(evTSA[2]*1);
				temp = (temp<now)?temp+86400:temp;
				if(i==0){
					evID = i;
					currEvDate=temp;
				}
				else{
					if(temp >= (now+eDuration) && temp < currEvDate){
						evID = i;
						currEvDate = temp;
					}
				}
			}
			
			var timeLeft = currEvDate-now;
			//converting to h:m:s
			function convert(time){
				var result;
				//checking the event is currently ongoing
				if(time > 0){
					var s, m, h;
					
					m = Math.floor(time/60);
					s = time-(m*60);
					
					h = Math.floor(m/60);
					m = m-(h*60);
					
					s=(s<=9)?'0'+s:s;m=(m<=9)?'0'+m:m;h=(h<=9)?'0'+h:h;
					result = h+':'+m+':'+s;
				}
				else {
					result = 'Event Trwa!';
				}
				return result;
			}
			$(document).ready(function(){
				$('#eventTime').html(convert(timeLeft));
				timeLeft--;
				$('#eventName').html(events[evID][0]);
				eTimer = setInterval(function(){
					$('#eventTime').html(convert(timeLeft));
					if(timeLeft< (0)){
						clearInterval(eTimer);
					}
					timeLeft--;
				}, 1000);
			});
		</script>
	</head>
	<body>
		<p id="eventName"></p>
		<p id="eventTime"></p>
	</body>
</html>

rafaeru · 19 Września 2017

Dzięki, ale to nie do końca tak jak chciałem bo w sumie nie napisałem, że eventy powtarzają się codziennie. Może już dam rade sam to przerobić.

Zaloguj się

👋 Witaj na MPCForum!

Odliczanie do wydarzeń (countdown)

Pytanie

rafaeru

rafaeru

4 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

Damian_RastMan

Damian_RastMan

rafaeru

rafaeru

Damian_RastMan

Damian_RastMan

rafaeru

rafaeru

Zarchiwizowany