|
JavaScript - Countdown By Hours, Not By Date??
Hi guys,
I've looked around the web and tried to find a Javascript Countdown, however, the only ones I could really find were the ones that countdown to a particular date (see below). Code: <script language="JavaScript"> TargetDate = "12/31/2020 5:00 AM"; BackColor = "palegreen"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="/js/countdown.js"></script> Problem is, it counts down to a particular date, and I don't want that. The reason why is because everyone's time will be different, and I want it to be a "global" countdown, fr an event happening on a website (like the launch of something). Is it possible to, other then going by date, go by days/hours/minutes/seconds? So if I enter say, 2 days, 5 hours, 0 minutes, 0 seconds, it'll start counting down EXACTLY 2 days and 5 hours, and not change per people's time zone? Any help would be greatly appreciated. If someone can point me in the right direction, or has a code already developed, I'd really appreciate it.. Thank you so much! Similar Tutorialshi guys, as im still a noob at javascript, so im asking for your help, i didnt make this script, someone else did and i asked for their permission to change it to my needs, the problem is, i have it working for times that are over an hour long, but i need to also make it possible to display in just under an hour aswell, eg instead of 01:00:00 it would display 60:00 then 59:59 eg, so basically im asking, how can i take the hours out of this, without it currupting the entire JS? Code: var HAS_EXPIRED = 'Time has Expired!';
var IS_NONE = 'None';
function secondCountdown(s){
if(s){
var timeleft = document.getElementById('timeleft').innerHTML;
if((timeleft == HAS_EXPIRED) || (timeleft == IS_NONE)) return false;
timeleft = timeleft.replace('<font>', '');
timeleft = timeleft.replace('</font>', '');
var time = timeleft.split(":");
var secs = time[2] * 1;
var mins = time[1] * 1;
var hrs = time[0] * 1;
secs += (mins * 60) + (hrs * 3600);
secs -= 1;
if(secs <= 0){
document.getElementById('timeleft').innerHTML = HAS_EXPIRED;
return false;
} else {
hrs = Math.floor(secs/3600);
secs -= (hrs * 3600);
mins = Math.floor(secs/60);
secs -= (mins * 60);
if(hrs < 10) hrs = '0' + hrs;
if(mins < 10) mins = '0' + mins;
if(secs < 10) secs = '0' + secs;
document.getElementById('timeleft').innerHTML = hrs + ':' + mins + ':' + secs;
}
}
setTimeout('secondCountdown(true)',1000);
}
bootloaderAdd('secondCountdown()');
bootloaderOn();
Cheers. Dan Hello, I've been trying to figure this script out for awhile and I've hit a wall. Basically, what I want to do for my organization's website is to use JS to display an image containing our hours and have it change each day of the week. The hard part (for me) is that there are certain days we're closed. Ideally, I'd like a separate "We're Closed" message to overwrite the image carrying our hours on specific days (major holidays like Xmas, New Years, Vet's Day, furlough periods, etc. etc.). Here's the code I've managed to cobble together (I have a real basic understanding of JS, so I've been pulling scripts from sites offering free copy/pastecode): [CODE] <script language="javascript"> mytime=new Date(); mymonth=mytime.getMonth()+1; mydate=mytime.getDate(); myday=mytime.getDay(); arday = new Array("sunday.png", "monday.png", "tuesday.png", "wednesday.png", "thursday.png", "friday.png", "saturday.png"); document.write("<img src='" + arday[myday] + "'>"); if (mymonth==12 && mydate==24){document.write("<img src='closure.png'>"); } </script> [CODE] For the most part, this code works just fine. However, if I jump my system clock to December 24, the "closure.png" comes up appears ALONGSIDE the hours image for that day of the week. In other words, I've got two images appearing right next to each other - that's not what I want. How can I work the code in such a way that when a closure date comes up (in this case, 12/24), just the "closure.png" image shows up by itself? Thank you all so much for your time and patience. Here is yet another project of mine...ive got most done but the timers are working in milliseconds and the hours, minutes, and seconds arent working right. heres the code. THE .JS FILE Code: /* Function List:
showDateTime(time)
Returns the date in a text string formatted as:
mm/dd/yyyy at hh:mm:ss am
changeYear(today, holiday)
Changes the year value of the holiday object to point to the
next year if it has already occurred in the present year
countdown(stop, start)
Displays the time between the stop and start date objects in the
text format:
dd days, hh hrs, mm mins, ss secs
*/
function showDateTime(time) {
date = time.getDate();
month = time.getMonth()+1;
year = time.getFullYear();
second = time.getSeconds();
minute = time.getMinutes();
hour = time.getHours();
ampm = (hour < 12) ? " am" : " pm";
hour = (hour > 12) ? hour - 12 : hour;
hour = (hour == 0) ? 12 : hour;
minute = minute < 10 ? "0"+minute : minute;
second = second < 10 ? "0"+second : second;
return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}
function changeYear(today, holiday){
year = today.getFullYear();
holiday.setFullYear(year);
(holiday < today) ? year++ : year;
holiday.setFullYear(year);
}
function countdown(start, stop) {
time = stop - start;
days = Math.floor(time/1000*60*60*24);
hours = (days - Math.floor(days))*24;
minutes = (hours - Math.floor(hours))*60;
seconds = (minutes - Math.floor(minutes))*60;
return days + " days," + hours + "hours," + minutes + " mins," + seconds + "secs";
}
THE HTML FILE.. Code: <script type="text/javascript" src="dates1.js"></script>
<script type="text/javascript">
function showCountdown() {
var today = new Date();
var Date1 = new Date("January 14, 2007 10:00:00");
var Date2 = new Date("May 21, 2007 12:00:00");
var Date3 = new Date("July 4, 2007 21:00:00");
var Date4 = new Date("September 1, 2007 12:00:00");
var Date5 = new Date("December 1, 2007 11:30:00");
var Date6 = new Date("December 31, 2007 15:30:00");
document.eventform.thisDay.value = showDateTime(today);
changeYear(today, Date1);
changeYear(today, Date2);
changeYear(today, Date3);
changeYear(today, Date4);
changeYear(today, Date5);
changeYear(today, Date6);
document.eventform.count1.value = countdown(today, Date1);
document.eventform.count2.value = countdown(today, Date2);
document.eventform.count3.value = countdown(today, Date3);
document.eventform.count4.value = countdown(today, Date4);
document.eventform.count5.value = countdown(today, Date5);
document.eventform.count6.value = countdown(today, Date6);
}
</script>
</head>
<body onload="setInterval('showCountdown()' ,100)">
yes ive done all the coding just cant figure out why the timers wont work correctly. Hi, how would i edit the code below so instead of today is day 16 of the month to an actual date eg Today is 10/11/2011 (dd/mm/yyyy or mm/dd/yyyy compatible). I need the code to execute on a specific date. javascript or php versions very welcome THANKS Code: <script type="text/javascript">
var Date = new Date();
var Today = Date.getDate();
if(Today == 16)
{
document.write('<img src="http://www.imagelocation_here" alt="Image title " width="117" height="100" />');
}
else
{
document.write('<img src="http://www.imagelocation_here" alt="image title " width="117" height="100" />');
}
</script>
hey im simply tryna make a 24 hours countdown, reg ardless of timezones, computer clock etc., just a straight 24 h our stretch. here is what i have, somehow its not working, any help on fixing>? PHP Code: <script language="JavaScript"> TargetDate = 24 * 60 * 60 * 1000; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> Hello, I understand that this question have been posted before several times. I looked at many of those threads and tried it but could not get it to work. So the idea is to use either cookies or html5 localstorage to control the java script behavior, but how do I really implement it on my code? Please help me out here on piecing all the code together. Either cookie/localstorage is fine. Thanks in advance Code: <div id='cptup-ready'>
</div>
<script data-cfasync='false' type='text/javascript'>
//<![CDATA[
window.captain = {up: function(fn) { captain.topics.push(fn) }, topics: []};
// Add your settings he
captain.up({
api_key: 'XXXXXXXX'
});
//]]>
</script><script data-cfasync='false' type='text/javascript'>
//<![CDATA[
setTimeout(function() {
var cpt = document.createElement('script');
cpt.type = 'text/javascript'; cpt.async = true;
cpt.src = 'http' + (location.protocol == 'https:' ? 's' : '') + '://captainup.com/assets/embed.en.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(cpt);
}, 31000)();
//]]>
</script>
I am wanting to display an image for 24 hours, how can I do this?
hi, I have three variables - string openTime format hh:mm - eg "08:30" - string closeTime format hh:mm eg "17:30" - float lunchHours eg 1.5 Are there any js functions I can use to calculate how many hours the shop is open ? thanks Hey everyone. I need a little help and I'm not an expert by any stretch of the imagination with javascript. I have a simple little code script and I'd like either the onClick function (or the entire code itself, whichever is easiest) to only load once every 24 hours for each IP address. So "123.1.22.333" should only get the effect of this code once every 24 hours regardless if they revisit my site 5 times a day let's say. So here's my little script: Code: <script language="JavaScript">
function goNewWin() {
TheNewWin=window.open("http://google.com",'Google','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1');
TheNewWin.blur();
}
</script>
<body onClick="goNewWin()">
Any help would be very appreciated. Thanks! I have the below form where the user enters the hours and minutes worked on a task. I want to be sure that the total for the form is at least 8 hours. How can I do that? Code: <form method="POST" onSubmit="return validateHours()" name="theForm" > <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form> Changing Seconds to Hours in Timer Code: <script type="text/javascript">
// Javascript to compute elapsed time between "Start" and "Finish" button clicks
function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) {
this.this_current_time = this_current_time;
this.this_start_time = this_start_time;
this.this_end_time = this_end_time;
this.this_time_difference = this_time_difference;
this.GetCurrentTime = GetCurrentTime;
this.StartTiming = StartTiming;
this.EndTiming = EndTiming;
}
//Get current time from date timestamp
function GetCurrentTime() {
var my_current_timestamp;
my_current_timestamp = new Date(); //stamp current date & time
return my_current_timestamp.getTime();
}
//Stamp current time as start time and reset display textbox
function StartTiming() {
this.this_start_time = GetCurrentTime(); //stamp current time
document.TimeDisplayForm.TimeDisplayBox.value = 0; //init textbox display to zero
}
//Stamp current time as stop time, compute elapsed time difference and display in textbox
function EndTiming() {
this.this_end_time = GetCurrentTime(); //stamp current time
this.this_time_difference = (this.this_end_time - this.this_start_time) / 1000; //compute elapsed time
document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference; //set elapsed time in display box
}
var time_object = new timestamp_class(0, 0, 0, 0); //create new time object and initialize it
//-->
</script>
<form>
<input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton">
</form>
<form>
<input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton">
</form>
<form name="TimeDisplayForm">
Elapsed time:
<input type="text" name="TimeDisplayBox" size="6">
seconds
</form>
Hello I am trying to do something similar to this post http://www.codingforums.com/showthread.php?t=168903 except I need it to be dependent on the hour and minute. Background: I am trying to create a schedule website, the schedule has say 20 items and I want it to display the current "active" event in the schedule, 1 previous event and 3 future events so a total of 5 items from the schedule. An event can range from 30 minutes to 2 hours long, so simply using the above code will not work. It needs to take the minutes into consideration as well. Let me know if you have additional questions. EDIT: 17-Mar-12 @ 12:37PM I would rather not use a bunch of if statements. (http://www.codingforums.com/showthread.php?t=250358) The schedule could change mid day so having to go through and edit a bunch of if statements would not be ideal Hi, I had a requirement in javascript.If I enter time as 12 it should automatically insert colon after hours and shoud allow user to enter minutes. First enter hours 12 while we are ready to insert minutes it should automatically insert colon as well as minutes. function autoTabTimes(input, len) { if (input.value.length == 2) { if (input.value.indexOf(":") == -1) { input.value = input.value + ":"; } var str = input.value.split(":"); if (str[0].length == 1) { input.value = "0" + str[0]; } } if (input.value.length >= len) { input.value = input.value.slice(0, len); input.form[(getIndex(input) + 1)].focus(); } return true; } The above code is working but it is not allowing user to edit the time back space is not working. I've done LOTS of Googling on this subject. I can write cookies beautifully to '[other data]; path=/Stats' but I can't figure out how on EARTH to read from it. How do I access the data there? If I just say path=/ then it will read beautifully, but I need to be able to have different paths for what I want this to ultimately do.
Not sure if this is possible in javascript: I'm looking for two different dates (bill date and due date) on an invoice that are captured by OCR. If one of them exists, but the other does not, I want the empty field to be 14 days before (or after) the other. For example: if the bill date is 7/27/2010 and the due date was not captured, I want to set the due date as 8/10/2010 (14 days after the bill date). If the due date was captured as 8/10/2010, but the due date is blank, I want to assign the bill date as 7/27/2010 (14 days before the due date). if both dates have values, do nothing. Thanks. hello i need code for my page, i need to show time elapsing, i mean 15sec countig down to 0 could you help me? i need help in following js code. what i want it to add micro seconds to this code. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id = "time"></div>
<script type = "text/javascript">
function display(secs) {
if (secs <= 0) {
alert("Your time is up!");
return;
}
secs--;
document.getElementById("time").innerHTML = "You have " +
Math.floor(secs/60) + ":" + (secs % 60 < 10 ? "0" : "" ) + (secs % 60) + " left";
setTimeout("display("+secs+")",1000);
}
display(301); // 300 seconds = 5 minutes
</script>
</body>
</html>
how can i add micro secs? I found this countdown timer online that starts when the page loads at 30 seconds and counts down to zero. What I need for it to do however is once it hits 0 it needs to automatically reset itself back to 30 seconds. It's being used in conjunction with a online (not a chat room) chatterbot where people often abuse the bot with foul language. The idea being to stop them from entering text to the bot for 30 seconds. I'm using these lines in the chatterbot where xxx would be the foul language. The stopTalk part prevents entering text for 30 seconds. The display() triggers the countdown. However, once it hits 0 it's dead in the water. If someone types another bad word the timer isn't going to work. Note: The timer is just a visual diplay so the user can see how long he must wait. The StopTalk below is working fine to stop the user from entering text. That part isn't the problem. Code: if (input.search("xxx")!= -1)
{document.result.result.value = "Stop the foul language. You can no longer enter text for 30 seconds";
display()
stopTalk = setTimeout('icon.src=icon1.src;stopTalk=false;',30000)
return true;}
1) Because this is an online chatterbot that temporarily stores information about the user I can't restart the timer by refreshing the page or I would lose that information. 2) I don't want to use a button to reset the timer. If at all possible I want the timer to reset automatically. Any help would be appreciated. Code: <form name="counter"><input type="text" size="8"
name="d2"></form>
<script>
<!--
//
var milisec=0
var seconds=30
document.counter.d2.value='30'
function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
}
display()
-->
</script>
Please understand that i have looked through the different timers on the JavaScript section but did not find any that can do what i am looking for and i don't know programming to edit any of them. I would like to have a countdown timer on my website that will count down from 12:00:01 am server time and end at midnight again of the same day (the clock should count down a full 24 hours) then it will automatically reset itself and count down again each and every day starting from 1 second after midnight. The count down should display hours : minutes : seconds just like a digital watch. I would also like to it to go with the server time and not client computer time so it will only count down according to the server time. One more thing .... each day a new trivia question will be posted and ppl have 1 day to answer the trivia question for a chance to win something (that is why the script is counting down). Will the script be able to automatically load a new trivia each day at midnight as the timer resets or do i have to load the trivia manually? If im getting way out of my head here then lets forget this last part. If it can be done i will certainly appreciate the advice. |
|||||||