d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Need Help To Add A Feature To This Countdown > #javascript
Add Reply New Topic New Poll
Member
Posts: 7,274
Joined: Sep 20 2007
Gold: 660.67
Apr 21 2018 05:07am
Edit: Sorry, just noticed there is a subforum for Java requests - My bad.


Hi everybody :)

First let me tell you what this is about:

It's a simple countdown script which makes it possible to me/us to track an event and of course when it's about to start, once the counter reaches zero it resets itself.

Example:
Friday, 9pm - Shows me the days, hours, minutes and seconds left - As soon as the timer hits the given day and time it resets and counts until we reach the next Friday and so on.

What I need:

Java refers to the user's local time, which doesn't help at all as we are having different time zones - Is there any way that some of you may change the script to just stick to one fixed Timezone? (Like GMT)
(Yes i googled a lot and no, I haven't found a fix) - Java seems to be Client based as can be.. There must be some kind of workaround though.

You can imagine it doesn't make sense if I organize an event living in a GMT+2 zone and people from Australia get there like 8 or 10 hours later ;)

I'm not into coding nor programming anymore so I'd really appreciate your help :)

Thanks in advance for your time <3

Here's the complete code:

Code
<html>
<head>

<script type = "text/javascript">

var cday;
var timeInSecs;
var ticker;

function getSeconds() {
var now = new Date();
var nowtime= now.getTime(); // time now in milliseconds
var countdowntime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),21,0,0); // 16 hrs = 4 pm
// countdowntime - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)

var dy = 5 ; // Friday (day 5) - change for other days 0-6
var atime = countdowntime.getTime();
var diff = parseInt((atime - nowtime)/1000); // positive if date is in future
if (diff >0) {
cday = dy - now.getDay();
}
else {
cday = dy - now.getDay() -1;
}
if (cday < 0) { cday += 7; } // aleady passed countdown time, so go for next week
if (diff <= 0) { diff += (86400 * 7) }
startTimer (diff);
}

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 all over again!
}

var days = Math.floor(secs/86400);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = "Time remaining " + cday +' day(s) ';
result += ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
+ " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
document.getElementById("countdown").innerHTML = result;
}
</script>
</head>

<body onload = "getSeconds()">
<span id="countdown" style="font-size: 20; font-weight:bold;" > </span>
<p><span style="margin-right: 10px;"><span id="circle-days" class="circle-time">
</span><span id="circle-hours" class="circle-time"></span>
<span id="circle-minutes" class="circle-time"></span>
<span id="circle-seconds" class="circle-time"></span></span><span id="timer">
</span></p>
</body>
</html>


This post was edited by Bl4cKDeviL on Apr 21 2018 05:16am
Member
Posts: 36,120
Joined: Apr 2 2006
Gold: 208,274.67
Apr 22 2018 01:21pm
Let me know if I interpreted your request properly.
I used UTC for displaying the time.

It's not the most elegant and I pooped everything into the HTML as well to match your example.

Feel free to mess around with it here
https://codepen.io/anon/pen/JvYLNv

From line 20 you can edit the time you want the timer to use.

Code
<html>
<head>
<meta charset="UTF-8">
<title>Countdown Timer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script>
var weekdays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];

function tickTock() {
// 1. Declaring & initialising variables
// Set your desired countdown date here (in UTC)
var day = 0; // 0 = Sunday, 1 = Monday, 2 = Tuesday, etc.
var hours = 19;
var minutes = 5;
var seconds = 15;

var timeLeft;
var daysLeft;
var hoursLeft;
var minutesLeft;
var secondsLeft;
// --- Current Time ---
var currentDate = new Date();
var UTCDay = currentDate.getUTCDay();
var UTCHours = currentDate.getUTCHours();
var UTCMinutes = currentDate.getUTCMinutes();
var UTCSeconds = currentDate.getUTCSeconds();
if (UTCHours < 10) UTCHours = "0" + UTCHours;
if (UTCMinutes < 10) UTCMinutes = "0" + UTCMinutes;
if (UTCSeconds < 10) UTCSeconds = "0" + UTCSeconds;
var dateInUTC =
weekdays[UTCDay] + " " + UTCHours + ":" + UTCMinutes + ":" + UTCSeconds;
// Making it readable
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
var countdownDate =
weekdays[day] + " " + hours + ":" + minutes + ":" + seconds;
// 2. Calculations
daysLeft = day - UTCDay;
hoursLeft = hours - UTCHours;
minutesLeft = minutes - UTCMinutes;
secondsLeft = seconds - UTCSeconds;
if (secondsLeft < 0) {
secondsLeft += 60;
minutesLeft -= 1;
}
if (minutesLeft < 0) {
minutesLeft += 60;
hoursLeft -= 1;
}
if (hoursLeft < 0) {
hoursLeft += 24;
daysLeft -= 1;
}
if (daysLeft < 0) daysLeft += 7;
// 3. Result
timeLeft =
daysLeft +
" day(s) " +
hoursLeft +
" hour(s) " +
minutesLeft +
" minute(s) " +
secondsLeft +
" second(s) remaining";
// 4. DOM manipulation
document.getElementById("currentDate").innerHTML = currentDate;
document.getElementById("dateInUTC").innerHTML = dateInUTC;
document.getElementById("countdownDate").innerHTML = countdownDate;
document.getElementById("timeLeft").innerHTML = timeLeft;
}
setInterval(tickTock, 1000);
</script>

<style>
* {
background: #222;
color: white;
margin: 0;
}

.header {
background: indigo;
text-align: center;
}

#content {
margin: 1%;
}

a {
text-decoration: none;
}

p {
margin: 0;
}
</style>

<body>
<a href="http://forums.d2jsp.org/user.php?i=226463">
<div class="header"> Code written by eekzie</div>
</a>
<div id="content">
<p>Current local time:</p>
<div id="currentDate"></div>
<br>
<p>Current time in UTC:</p>
<div id="dateInUTC"></div>
<br>
<p>Countdown date in UTC:</p>
<div id="countdownDate"></div>
<br>
<p>Time left until countdown date:</p>
<div id="timeLeft"></div>
</div>
</body>

</html>


This post was edited by eekzie on Apr 22 2018 01:45pm
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll