Countdown timer for WordPress -- not working - javascript

I am trying to setup a countdown timer that is reoccurring and goes every Sunday and counts down till 9:30am and then 11am...and I found the following code, but I can't seem to get it working. The HTML loads, but the JavaScript isn't...any ideas/help? It's a WP site and I just placed the JS in the JS section and then dropped the HTML...but nothing other than the HTML shows...
Sorry, don't have a lot of coding experience. Thank you so much--I really appreciate any help! (Code from #wssupport)
<script>
var curday;
var secTime;
var ticker;
function getSeconds() {
var nowDate = new Date();
var dy = 1 ; //Sunday through Saturday, 0 to 6
var countertime = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate(),21,0,0); //20 out of 24 hours = 8pm
var curtime = nowDate.getTime(); //current time
var atime = countertime.getTime(); //countdown time
var diff = parseInt((atime - curtime)/1000);
if (diff > 0) { curday = dy - nowDate.getDay() }
else { curday = dy - nowDate.getDay() -1 } //after countdown time
if (curday < 0) { curday += 7; } //already after countdown time, switch to next week
if (diff <= 0) { diff += (86400 * 7) }
startTimer (diff);
}
function startTimer(secs) {
secTime = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); //initial count display
}
function tick() {
var secs = secTime;
if (secs>0) {
secTime--;
}
else {
clearInterval(ticker);
getSeconds(); //start over
}
var days = Math.floor(secs/86400);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
//update the time display
document.getElementById("days").innerHTML = curday;
document.getElementById("hours").innerHTML = ((hours < 10 ) ? "0" : "" ) + hours;
document.getElementById("minutes").innerHTML = ( (mins < 10) ? "0" : "" ) + mins;
document.getElementById("seconds").innerHTML = ( (secs < 10) ? "0" : "" ) + secs;
}
</script>
Call getSeconds() function to start timer with body onload
<body onload="getSeconds();">
</body>
HTML
<h6>Live in <span class="days" id="days"></span><span class="smalltext"> days,</span>
<span class="hours" id="hours"></span><span class="smalltext"> hours,</span>
<span class="minutes" id="minutes"></span><span class="smalltext"> minutes</span>
</h6>

You forgot the <span id="seconds"></span>
var secTime;
var ticker;
function getSeconds() {
var nowDate = new Date();
var dy = 1; //Sunday through Saturday, 0 to 6
var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 21, 0, 0); //20 out of 24 hours = 8pm
var curtime = nowDate.getTime(); //current time
var atime = countertime.getTime(); //countdown time
var diff = parseInt((atime - curtime) / 1000);
if (diff > 0) {
curday = dy - nowDate.getDay()
} else {
curday = dy - nowDate.getDay() - 1
} //after countdown time
if (curday < 0) {
curday += 7;
} //already after countdown time, switch to next week
if (diff <= 0) {
diff += (86400 * 7)
}
startTimer(diff);
}
function startTimer(secs) {
secTime = parseInt(secs);
ticker = setInterval("tick()", 1000);
tick(); //initial count display
}
function tick() {
var secs = secTime;
if (secs > 0) {
secTime--;
} else {
clearInterval(ticker);
getSeconds(); //start over
}
var days = Math.floor(secs / 86400);
secs %= 86400;
var hours = Math.floor(secs / 3600);
secs %= 3600;
var mins = Math.floor(secs / 60);
secs %= 60;
//update the time display
document.getElementById("days").innerHTML = curday;
document.getElementById("hours").innerHTML = ((hours < 10) ? "0" : "") + hours;
document.getElementById("minutes").innerHTML = ((mins < 10) ? "0" : "") + mins;
document.getElementById("seconds").innerHTML = ((secs < 10) ? "0" : "") + secs;
}
Call getSeconds() function to start timer with body onload
<body onload="getSeconds();">
<h6>Live in <span class="days" id="days"></span><span class="smalltext"> days,</span>
<span class="hours" id="hours"></span><span class="smalltext"> hours,</span>
<span class="minutes" id="minutes"></span><span class="smalltext"> minutes</span>
<span class="seconds" id="seconds"></span><span class="smalltext"> seconds</span>
</h6>
</body>

Related

How To Increase Countdown With Input Well Running?

I want to restart the setInterval for only -1 second every time I click insert any idea? how to make it restart and increase my value well running? For example clear the setInterval -1 second session from tick( ) and start a new -1 second session so the tick() wont keep looping the function every time I click it
var timeInSecs;
var ticker;
function startTimer() {
var newValues = document.getElementById("mm").value;
var secondInput = document.getElementById("secondsdown").value;
if (secondInput == null || secondInput == '') {
secondInput = '0';
} else {
secondInput = document.getElementById("secondsdown").value;
}
var secs = 60 * parseInt(newValues);
timeInSecs = parseInt(secs + parseInt(secondInput));
ticker = setInterval("tick()", 1000);
}
function tick() {
var secs = timeInSecs;
document.getElementById("secondsdown").value = secs;
if (secs > 0) {
timeInSecs--;
} else {
clearInterval(ticker);
}
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 pretty = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs;
document.getElementById("countdown").innerHTML = pretty;
}
<div class="master-slider ms-skin-light-2" id="masterslider">
<div class="ms-slide">
<input type="number" id="secondsdown"/>
<span id="countdown"></span>
<input id="mm" placeholder="分钟" type="number";/>
<input type="button" value="Click" onclick="startTimer()"/>
</div>
</div><!-- end of masterslider1 -->
I understand this line cause the issues but how to stop it increase from i++
ticker = setInterval(tick, 1000);
I guess it depends on how you look at it :) You've started alright, but the problem is your startTimer(), where upon every click, you always start a new interval.
This shouldn't really be necessary, so either:
always clear the interval before starting a new interval
only start the interval if no interval was active yet
As I'm not sure what your goal is, the easiest change was to consecutively call clearInterval and setInterval.
The only other thing I've changed, is to call tick() once inside the startTimer so that the user doesn't have to wait 1 second before a reaction comes from the UI ( which is a bit confusing :) )
var timeInSecs;
var ticker;
function startTimer() {
var newValues = document.getElementById("mm").value;
var secondInput = document.getElementById("secondsdown").value;
if (secondInput == null || secondInput == '') {
secondInput = '0';
} else {
secondInput = document.getElementById("secondsdown").value;
}
var secs = 60 * parseInt(newValues);
timeInSecs = parseInt(secs + parseInt(secondInput));
tick();
// clear any previous timers
clearInterval( ticker );
// start new timer
ticker = setInterval(tick, 1000);
}
function tick() {
var secs = timeInSecs;
document.getElementById("secondsdown").value = secs;
if (secs > 0) {
timeInSecs--;
} else {
clearInterval(ticker);
}
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 pretty = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs;
document.getElementById("countdown").innerHTML = pretty;
}
<div class="master-slider ms-skin-light-2" id="masterslider">
<div class="ms-slide">
<input type="number" id="secondsdown"/>
<span id="countdown"></span>
<input id="mm" placeholder="分钟" type="number";/>
<input type="button" value="Click" onclick="startTimer()"/>
</div>
</div><!-- end of masterslider1 -->

Display countdown in user's local time

I want to implement a simple javascript countdown that always counts down to the user's local next Friday, 15:00. I currently use the following code, but I believe that it only displays the countdown to next Friday, 15:00 UTC. Any help would really be appreciated!!
var curday;
var secTime;
var ticker;
function getSeconds() {
var nowDate = new Date();
var dy = 5; //Sunday through Saturday, 0 to 6
var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 0, 0);
var curtime = nowDate.getTime(); //current time
var atime = countertime.getTime(); //countdown time
var diff = parseInt((atime - curtime) / 1000);
if (diff > 0) {
curday = dy - nowDate.getDay()
} else {
curday = dy - nowDate.getDay() - 1
} //after countdown time
if (curday < 0) {
curday += 7;
} //already after countdown time, switch to next week
if (diff <= 0) {
diff += (86400 * 7)
}
startTimer(diff);
}
function startTimer(secs) {
secTime = parseInt(secs);
ticker = setInterval("tick()", 1000);
tick(); //initial count display
}
function tick() {
var secs = secTime;
if (secs > 0) {
secTime--;
} else {
clearInterval(ticker);
getSeconds(); //start over
}
var days = Math.floor(secs / 86400);
secs %= 86400;
var hours = Math.floor(secs / 3600);
secs %= 3600;
var mins = Math.floor(secs / 60);
secs %= 60;
//update the time display
document.getElementById("days").innerHTML = curday;
document.getElementById("hours").innerHTML = ((hours < 10) ? "0" : "") + hours;
document.getElementById("minutes").innerHTML = ((mins < 10) ? "0" : "") + mins;
document.getElementById("seconds").innerHTML = ((secs < 10) ? "0" : "") + secs;
}
function starter() {
getSeconds();
}
Javascript dates are inherently UTC, however the various non–UTC get and set methods all work on local dates and times based on the host system clock and daylight saving settings.
So if you're not using UTC methods, everything in the OP is "local" by default. The following is a simplistic implementation of your "time until next Friday at 15:00" all as local values:
function timeUntil() {
let now = new Date();
// Create date for 15:00 on coming Friday
let friday = new Date(now);
friday.setHours(15,0,0,0);
let dayNum = friday.getDay();
friday.setDate(friday.getDate() + 5 - (dayNum < 6? dayNum : 5 - dayNum));
// If today is Friday and after 15:00, set to next Friday
if (dayNum == 5 && friday < now) {
friday.setDate(friday.getDate() + 7);
}
// Time remaining
let diff = friday - now;
let days = diff / 8.64e7 |0;
let hrs = (diff % 8.64e7) / 3.6e6 | 0;
let mins = (diff % 3.6e6) / 6e4 | 0;
let secs = (diff % 6e4) / 1e3 | 0;
// Display result
document.getElementById('days').textContent = days;
document.getElementById('hrs').textContent = hrs;
document.getElementById('mins').textContent = mins;
document.getElementById('secs').textContent = secs;
document.getElementById('fullDate').textContent = friday.toLocaleString();
}
setInterval(timeUntil, 1000);
td {
text-align: center;
}
<table>
<tr><th>Days<th>Hrs<th>Mins<th>Secs
<tr><td id="days"><td id="hrs"><td id="mins"><td id="secs">
<tr><td id="fullDate" colspan="4">
</table>
Note that setInterval isn't a good way to run a timer over a long period as it drifts (it doesn't run at exactly the specified interval). The overall time will be OK, it will just seem to skip from time to time and drift within a second with respect to the system displayed clock.
Better to use sequential calls setTimeout, calculating the time until just after the next full second each time so it closely matches the system clock's tick.

Countdown Timer Based on Day?

I'm trying to create a countdown timer that counts from Monday to Wednesday, Wednesday to Friday and Friday to Monday. Everything seems to be working ok except for the actual day value. That is not calculating correctly.
Before I had it set up to just countdown to Monday and that was working fine for me. This is the code I was following - https://vincoding.com/weekly-repeating-countdown-timer-javascript/
var curday;
var secTime;
var ticker;
function getSeconds() {
var nowDate = new Date();
var destinationDay;
var weekDay = nowDate.getDay();
if (nowDate.getHours() >= 24) {
weekDay++;
}
// in case it is Saturday after 8PM we would have a 7 as week day which should be changed to 0 (sunday).
weekDay = weekDay % 7;
if (weekDay > 1 && weekDay <= 3) {
destinationDay = 3;
} else if (weekDay > 3 && weekDay <= 5) {
destinationDay = 5;
} else {
destinationDay = 1;
}
var counterTime = new Date();
// calculate the date by adding an offset based on current and target date.
counterTime.setDate(counterTime.getDate() + (destinationDay + 7 - weekDay) % 7);
counterTime.setHours(24);
counterTime.setMinutes(0);
counterTime.setSeconds(0);
var currentTime = nowDate.getTime(); //current time
var destinationTime = counterTime.getTime(); //countdown time
var diff = parseInt((destinationTime - currentTime) / 1000);
startTimer(diff);
}
function startTimer(secs) {
secTime = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); //initial count display
}
function tick() {
var secs = secTime;
if (secs>0) {
secTime--;
}
else {
clearInterval(ticker);
getSeconds(); //start over
}
var days = Math.floor(secs/86400);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
//update the time display
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = ((hours < 10 ) ? "0" : "" ) + hours;
document.getElementById("minutes").innerHTML = ( (mins < 10) ? "0" : "" ) + mins;
document.getElementById("seconds").innerHTML = ( (secs < 10) ? "0" : "" ) + secs;
}
$( document ).ready(function() {
getSeconds();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countholder">
<div><span class="days" id="days"></span><div class="smalltext">Days</div></div>
<div><span class="hours" id="hours"></span><div class="smalltext">Hours</div></div>
<div><span class="minutes" id="minutes"></span><div class="smalltext">Minutes</div></div>
<div><span class="seconds" id="seconds"></span><div class="smalltext">Seconds</div></div>
</div>
It should countdown to each day and move on to the new day after midnight.

HeIp me for litle thing Countdown

I don't know javascript. How to add minute to datadate in that html/javascript?
Example:
Datadate is 3,19--> Wednesday 7pm. I wanna make it 3,19,30--> Wednesday 7pm past half (7:30pm).
function getRemaining(EVENTDAY, EVENTHOUR, now) {
now = new Date();
var dow = now.getDay();
var hour = now.getHours() + now.getMinutes() / 60 + now.getSeconds() / 3600;
var offset = EVENTDAY - dow;
if (offset < 0 || (offset === 0 && EVENTHOUR < hour)) {
offset += 7;
}
var eventDate = now.getDate() + offset;
var eventTime = new Date(now.getFullYear(), now.getMonth(), eventDate,
EVENTHOUR, 0, 0);
var millis = eventTime.getTime() - now.getTime();
var seconds = Math.round(millis / 1000);
var minutes = Math.floor(seconds / 60);
seconds %= 60;
var hours = Math.floor(minutes / 60);
minutes %= 60;
var days = Math.floor(hours / 24);
hours %= 24;
if (seconds < 10) seconds = "0" + seconds;
if (minutes < 10) minutes = "0" + minutes;
if (hours < 10) hours = "0" + hours;
return days + "d " + hours + "h " + minutes + "m ";
}
function tick() {
$.each($('.countdown'), function (i, v) {
startdate = $(this).attr('datadate');
startdate = startdate.split(',');
$(this).html(getRemaining(startdate[0], startdate[1]));
});
}
setInterval(tick, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="countdown" datadate='6,19'></span>
<br>
<span class="countdown" datadate='2,19'></span>
<br>
<span class="countdown" datadate='3,19'></span>
<br>
<span class="countdown" datadate='3,20'></span>
<br>
Hope you can help me.
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
First of all, the last parameter from the function getRemaining(EVENTDAY, EVENTHOUR, now) is always null ( or undefined ). I removed the parameter and made a function-scoped variable.
I also made some visual changes to the code. Here You go, this should work:
function getRemaining(EVENTDAY, EVENTHOUR, EVENTMINUTE) {
var now = new Date();
var offset = EVENTDAY - now.getDay();
var hour = now.getHours() + now.getMinutes() / 60 + now.getSeconds() / 3600;
if (offset < 0 || (offset === 0 && EVENTHOUR < hour)) {
offset += 7;
}
var eventDate = now.getDate() + offset;
var eventTime = new Date(now.getFullYear(), now.getMonth(), eventDate, EVENTHOUR, EVENTMINUTE, 0);
var millis = eventTime.getTime() - now.getTime();
var seconds = Math.round(millis / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
seconds %= 60;
minutes %= 60;
hours %= 24;
if (seconds < 10) seconds = "0" + seconds;
if (minutes < 10) minutes = "0" + minutes;
if (hours < 10) hours = "0" + hours;
return days + "d " + hours + "h " + minutes + "m ";
}
function tick() {
$.each($('.countdown'), function (i, v) {
startdate = $(this).attr('datadate');
startdate = startdate.split(',');
$(this).html(getRemaining(startdate[0], startdate[1], startdate[2]));
});
}
setInterval(tick, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="countdown" datadate='6,5,8'></span>
<span class="countdown" datadate='3,10,30'></span>
You could use a library like moment.js
Then:
moment().format('MMMM Do YYYY, h:mm:ss a'); // February 12th 2015, 6:05:32 pm

How to calculate the hours between two times with jquery?

I am trying to calculate the hours between two times.
Below is where I am currently but this code fails in two ways.
1). I need .Hours to output time in decimal.
(e.g one and half hours should output 1.5 and 15mins should be 0.25).
2). Calculation currently does not treat values for time as time.
(e.g 23:00 to 2:00 should equal 3 and NOT -21 as currently).
HTML
<input class="Time1" value="10:00" />
<input class="Time2" value="12:00" />
<input class="Hours" value="0" />
JQUERY
$(function () {
function calculate() {
var hours = parseInt($(".Time2").val().split(':')[0], 10) - parseInt($(".Time1").val().split(':')[0], 10);
$(".Hours").val(hours);
}
$(".Time1,.Time2").change(calculate);
calculate();
});
http://jsfiddle.net/44NCk/
Easy way is if you get a negative value, add 24 hours to it and you should have your result.
var hours = parseInt($(".Time2").val().split(':')[0], 10) - parseInt($(".Time1").val().split(':')[0], 10);
// if negative result, add 24 hours
if(hours < 0) hours = 24 + hours;
Demo: http://jsfiddle.net/44NCk/1/
Getting the minutes as a decimal involves a bit more as you can see in thsi fiddle: http://jsfiddle.net/44NCk/2/
function calculate() {
var time1 = $(".Time1").val().split(':'), time2 = $(".Time2").val().split(':');
var hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10);
var hours = hours2 - hours1, mins = 0;
// get hours
if(hours < 0) hours = 24 + hours;
// get minutes
if(mins2 >= mins1) {
mins = mins2 - mins1;
}
else {
mins = (mins2 + 60) - mins1;
hours--;
}
// convert to fraction of 60
mins = mins / 60;
hours += mins;
hours = hours.toFixed(2);
$(".Hours").val(hours);
}
function timeobject(t){
a = t.replace('AM','').replace('PM','').split(':');
h = parseInt(a[0]);
m = parseInt(a[1]);
ampm = (t.indexOf('AM') !== -1 ) ? 'AM' : 'PM';
return {hour:h,minute:m,ampm:ampm};
}
function timediff(s,e){
s = timeobject(s);
e = timeobject(e);
e.hour = (e.ampm === 'PM' && s.ampm !== 'PM' && e.hour < 12) ? e.hour + 12 : e.hour;
hourDiff = Math.abs(e.hour-s.hour);
minuteDiff = e.minute - s.minute;
if(minuteDiff < 0){
minuteDiff = Math.abs(60 + minuteDiff);
hourDiff = hourDiff - 1;
}
return hourDiff+':'+ Math.abs(minuteDiff);
}
difference = timediff('09:10 AM','12:25 PM'); // output 3:15
difference = timediff('09:05AM','10:20PM'); // output 13:15
$(function () {
function calculate() {
var time1 = $(".Time1").val().split(':'), time2 = $(".Time2").val().split(':');
var hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10),
seconds1 = parseInt(time1[2], 10),
seconds2 = parseInt(time2[2], 10);
var hours = hours2 - hours1, mins = 0, seconds = 0;
if(hours < 0) hours = 24 + hours;
if(mins2 >= mins1) {
mins = mins2 - mins1;
}
else {
mins = (mins2 + 60) - mins1;
hours--;
}
if (seconds2 >= seconds1) {
seconds = seconds2 - seconds1;
}
else {
seconds = (seconds2 + 60) - seconds1;
mins--;
}
seconds = seconds/60;
mins += seconds;
mins = mins / 60; // take percentage in 60
hours += mins;
//hours = hours.toFixed(4);
$(".Hours").val(hours);
}
$(".Time1,.Time2").change(calculate);
calculate();
});
Here is an HTML Code
<input type="text" name="start_time" id="start_time" value="12:00">
<input type="text" name="end_time" id="end_time" value="10:00">
<input type="text" name="time_duration" id="time_duration">
Here is javascript code
function timeCalculating()
{
var time1 = $("#start_time").val();
var time2 = $("#end_time").val();
var time1 = time1.split(':');
var time2 = time2.split(':');
var hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10);
var hours = hours2 - hours1, mins = 0;
if(hours < 0) hours = 24 + hours;
if(mins2 >= mins1) {
mins = mins2 - mins1;
}
else {
mins = (mins2 + 60) - mins1;
hours--;
}
if(mins < 9)
{
mins = '0'+mins;
}
if(hours < 9)
{
hours = '0'+hours;
}
$("#time_duration").val(hours+':'+mins);
}

Categories

Resources