|
JavaScript - Adding A Autorefresh To A Time Countdown
What im trying to do is have the page auto refresh after the time countdown has expired. Here is the java code for the counter how would it be possible to add a autorefresh after the counter has reached 0 time left.
Code: function ulticountdown(time, id, format, keepCounting, zero, langarray){
timeleft = time;
var countUp = false;
if (timeleft < 0) {
if (keepCounting == 0) {
timeleft = 0;
} else {
timeleft *= -1;
countUp = true;
}
}
seconds = timeleft%60;
timeleft -= seconds;
timeleft = timeleft/60;
minutes = timeleft%60;
timeleft -= minutes;
timeleft = timeleft/60;
hours = timeleft%24;
timeleft -= hours;
days = timeleft/24;
var counterstring = '';
if (zero == 1) {
if (seconds < 10) {
seconds = '0'+seconds;
}
if (minutes < 10) {
minutes = '0'+minutes;
}
if (hours < 10) {
hours = '0'+hours;
}
}
if (format == 1) {
if (days != 0) {
if (days != 1) {
counterstring = counterstring+" "+days+" "+langarray[1];
} else {
counterstring = counterstring+" "+days+" "+langarray[0];
}
}
if (hours != 0) {
if (hours != 1) {
counterstring = counterstring+" "+hours+" "+langarray[3];
} else {
counterstring = counterstring+" "+hours+" "+langarray[2];
}
}
if (minutes != 0) {
if (minutes != 1) {
counterstring = counterstring+" "+minutes+" "+langarray[5];
} else {
counterstring = counterstring+" "+minutes+" "+langarray[4];
}
}
if (seconds != 1) {
counterstring = counterstring+" "+seconds+" "+langarray[7];
} else {
counterstring = counterstring+" "+seconds+" "+langarray[6];
}
} else if (format == 2) {
if (days != 0) {
if (days != 1) {
counterstring = counterstring+" "+days+" "+langarray[1];
} else {
counterstring = counterstring+" "+days+" "+langarray[0];
}
}
if (hours != 0) {
if (hours != 1) {
counterstring = counterstring+" "+hours+" "+langarray[3];
} else {
counterstring = counterstring+" "+hours+" "+langarray[2];
}
}
if (minutes != 0) {
if (minutes != 1) {
counterstring = counterstring+" "+minutes+" "+langarray[5];
} else {
counterstring = counterstring+" "+minutes+" "+langarray[4];
}
}
} else if (format == 3) {
if (days != 0) {
if (days != 1) {
counterstring = counterstring+" "+days+" "+langarray[1];
} else {
counterstring = counterstring+" "+days+" "+langarray[0];
}
}
if (hours != 0) {
if (hours != 1) {
counterstring = counterstring+" "+hours+" "+langarray[3];
} else {
counterstring = counterstring+" "+hours+" "+langarray[2];
}
}
} else if (format == 4) {
if (days != 0) {
if (days != 1) {
counterstring = counterstring+" "+days+" "+langarray[1];
} else {
counterstring = counterstring+" "+days+" "+langarray[0];
}
}
} else if (format == 5) {
if (days != 0) {
if (days != 1) {
counterstring = counterstring+" "+days+" "+langarray[1];
} else {
counterstring = counterstring+" "+days+" "+langarray[0];
}
}
counterstring += " "+hours+":"+minutes+":"+seconds;
} else if (format == 6) {
counterstring = days;
}else {
// we should never get here, but for safety add the last one as default case.
if (days != 0) {
if (days != 1) {
counterstring = counterstring+" "+days+" "+langarray[1];
} else {
counterstring = counterstring+" "+days+" "+langarray[0];
}
}
counterstring += " "+hours+":"+minutes+":"+seconds;
}
var newdiv = document.createElement("div");
newdiv.innerHTML = counterstring;
var olddiv = document.getElementById("counter"+id);
var parent = olddiv.parentNode;
parent.removeChild(olddiv);
newdiv.id = "counter"+id;
parent.appendChild(newdiv);
if (countUp == true) {
newtime = time-1;
} else {
newtime = time-1;
}
setTimeout("ulticountdown("+newtime+","+id+","+format+", "+keepCounting+", "+zero+", langarray)",1000);
}
Similar Tutorials1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help Hi I hope I hit the topic I have a problem in java script i need it for an online game that I develop but not as I do not go javasript countdown or can help me I need a timer that counts down and ceases to move to the other side but not when Refresh to go back and allow you to set time thanks in advance
hi, i am now playing with the time. can you please tell me how to make the time move in downwards, i mean a countdown like format, e.g the time will start countdown and end in 2 days? here's my initial noob code for creating time Code: <script type="text/javascript">
var today = new Date();
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
function showDate(){
if(document.getElementById('but').value = "locked"){
h = checktime(h);
m = checktime(m);
s = checktime(s);
}
document.getElementById('t').innerHTML = h +":"+m+":"+s;
}
function checktime(i){
if(i < 10){
i = "0" + i;
}
return i;
}
function ocl(){
var x = true;
if(x){
document.getElementById('but').value = "locked";
showDate();
}
}
function mo(){
document.getElementById('but').value = "lock me ?";
x = false;
}
</script>
<h3>
<a id="t"></a>
</h3>
<input type="button" id="but" value="unlocked" onmouseover="mo();" onclick="ocl();" />
I am new to JavaScript and am enrolled in an introductory class. My assignment is to create JavaScript for a Web page that counts down the time left until several events. I have been working on this code for several hours now, and I have done everything the textbook instructs me to do, yet when I load the Web page I still get blank fields where my countdown info should be. I would really appreciate it if someone could look through the code I've created and give me some pointers. I have an .htm file and an external .js file. The .htm file is: Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 2
Review Assignment
Events in Dixon
Author:
Date:
Filename: events.htm
Supporting files: dates.js, dixon.css, logo.jpg
-->
<title>Upcoming Events at Dixon</title>
<link href="dixon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dates.js"></script>
<script type="text/javascript">
function showCountdown() {
var today = new Date("December 1, 2007 6:31:45");
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)">
<form name="eventform" id="eventform" action="">
<div id="links1">
<a href="#">Home</a>
<a href="#">City Services</a>
<a href="#">City Agencies</a>
<a href="#">Mayor's Office</a>
<a href="#">News Today</a>
<a href="#">Upcoming Events</a>
</div>
<div id="logo">
<img src="logo.jpg" alt="New Years Bash" />
</div>
<div id="links2">
<a href="#">Site Map</a>
<a href="#">Search Engine</a>
<a href="#">Public Notices</a>
<a href="#">Survey Form</a>
<a href="#">Contact Us</a>
<a href="#">E-Government</a>
</div>
<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
<td></td>
<th style="text-align: right">Current Time </th>
<td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td>
</tr>
<tr>
<th>Event</th>
<th>Starting Time</th>
<th>Countdown to Event</th>
</tr>
<tr>
<td><input value="Heritage Day" readonly="readonly" size="20" /></td>
<td><input value="Jan 14 at 10:00 am"readonly="readonly" size="20" /></td>
<td><input name="count1" id="count1" size="40" /></td>
</tr>
<tr>
<td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
<td><input value="May 21 at 12:00 pm"readonly="readonly" size="20" /></td>
<td><input name="count2" id="count2" size="40" /></td>
</tr>
<tr>
<td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
<td><input value="Jul 4 at 9:00 pm" readonly="readonly" size="20" /></td>
<td><input name="count3" id="count3" size="40" /></td>
</tr>
<tr>
<td><input value="Summer Bash" readonly="readonly" size="20" /></td>
<td><input value="Sep 1 at 12:00 pm" readonly="readonly" size="20" /></td>
<td><input name="count4" id="count4" size="40" /></td>
</tr><tr>
<td><input value="Holiday Party" readonly="readonly" size="20" /></td>
<td><input value="Dec 1 at 11:30 am" readonly="readonly" size="20" /></td>
<td><input name="count5" id="count5" size="40" /></td>
</tr>
<tr>
<td><input value="New Year's Bash" readonly="readonly" size="20" /></td>
<td><input value="Dec. 31 at 3:30 pm" readonly="readonly" size="20" /></td>
<td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
The external .js file is: Code: /*
New Perspectives on JavaScript
Tutorial 2
Review Assignment
Author:
Date:
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) {
var time = stop - start;
var days = Math.floor(time/(1000*60*60*24);
var hours = Math.floor(time/1000*60*60);
var minutes = Math.floor(time/1000*60);
var seconds = Math.floor(time/1000);
return days +"days, "+ hours +"hrs, "+ minutes +"mins, "+ seconds +"secs"+;
}
If there is any more information that is needed, I will do my best to give that, as well. Thanks! Hey. I'm currently looking for a countdown script, which is based on the server's time. I've only found scripts, that's based on the local computer's time, which means the output of the script changes, when the time on the computer is changed. And I want to make a public announcement which counts down to something - and should output the same at every person. I'm not that familiar with JavaScript, I know some jQuery - if anyone can supply any links or can help me with this, I'd appreciate it. Figured this out (I think)
Hello everyone, I am completely new to javascripts. I want to have a count down timer on my webpage. I already found a script, but it does not do everything I want it to do. I couldn't find a script that did everything I need. I need it to do the following things: - Use the time zone GMT+1 - Reset everyday at a specific time - From 15:00 till 17:30: A countdown (so it shows 2 hours and 30 minutes from the start and count's down to 0 (which will be 17:30) - During 15:00 till 17:30 it shows: "The game is playing" - Once it is 17:30 I want it to reset and countdown till the next day 15:00 - From 17:30 till 15:00 next day it says: "The game will start in" So it is actually 2 countdown clocks in one javascript. One countdown from 15:00 to 17:30 (whilst the game is playing) and one directly starting after it from 17:30 till 15:00 next day. But both are displayed on the same spot. The countdown will be in text. No buttons or fancy images etc. Hope you can help me out. Thanks Code: <html>
<head>
<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(),0,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 + " hours " + ( (mins < 10) ? "0" : "" ) + mins
+ " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
document.getElementById("countdown").innerHTML = "The game will start in " + result;
}
</script>
</head>
<body onload = "getSeconds()">
<span id="countdown" style="font-weight: bold;"></span>
</body>
</html>
Reply With Quote 01-07-2015, 10:11 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts First of all, move your JavaScript where it belongs: Just before the </body> tag. Then you don't need stuff such as onload='....' Here's my attempt at it: Code: <!DOCTYP html>
<html>
<head>
<title>Game play starts at 17:30</title>
</head>
<body>
Other stuff...<br/><br/>
<span id="countdown" style="font-weight: bold;"></span>
<br/><br/>Other stuff...<br/><br/>
<script type="text/javascript">
var timer = null;
function tick( )
{
var msg = document.getElementById("countdown");
var now = new Date();
var yr = now.getFullYear(); var mon = now.getMonth(); var dy = now.getDate();
var startat = new Date(yr,mon,dy,15,0,0);
var endat = new Date(yr,mon,dy,17,30,0);
if ( now.getTime() < startat.getTime() )
{
msg.innerHTML = "The game will start at 17:30";
} else if ( now.getTime() > endat.getTime() )
{
msg.innerHTML = "The game started at 17:30";
} else {
var sec = Math.floor( ( endat.getTime() - now.getTime() ) / 1000 );
var min = Math.floor ( sec / 60 );
sec %= 60;
var hr = Math.floor ( min / 60 );
min %= 60;
if ( min < 10 ) min = "0" + min;
if ( sec < 10 ) sec = "0" + sec;
msg.innerHTML = "The game will start in " + hr + ":" + min + ":" + sec;
}
}
tick(); // immediate start
timer = setInterval( tick, 1000 ); // every second
</script>
</body>
</html>
Can someone help me modify this script be set to a specific Time Zone rather than picking up the time from the local machine? I want it to countdown to 6:00 am EST. http://javascript.internet.com/time-...countdown.html Can anyone tell me what to add where if it is possible? Thank you in advance. Hello, i need your help. I have a program witch generates a .bmp file when it detect a motion. I would like to make a web page witch make the autorefresh with the last file generated by this program. How do i do this in javascript language? Thanks in advance. I am trying to set up a web that new times will be displayed when they add current times to a form. here is the static HTML <form method="POST" > current time is 11:32 AM</p> <p>add <input type="text" name="T1" size="5" value="20"> mins and the new time time would be <b> 11:52 AM</b></p> <p>add another<input type="text" name="T2" size="5" value="15"> mins and the time then changes to <b>12:07 PM</b></p> <p><input type="submit" value="Submit" name="B1"></p> <p><input type="reset" value="Reset" name="B2"></p> </form> I would like to have the new times to change dynamically as they type in either (or both) input boxes Hello I am new to javascript (4 months), I would like to add an hour to the current time each time a button is clicked. I have this code: ------------------------------------------------------------------ var hourstbutton=document.getElementById("button3"); hoursbutton.onclick=function() { var divlink=document.getElementById("math3"); var newtime2=new Date(); var currenthours2=newtime2.getHours()+1; var currentmins2=newtime2.getMinutes(); var currentsecns2=newtime2.getSeconds(); var ampm2= (currenthours2>=12) ? "P.M." : "A.M."; if (currenthours2>=13) { currenthours2-=12; } if(currenthours2<1){ currenthours2=12; } if(currentmins2<10){ currentmins2= "0" + currentmins2; } if(currentsecns2<10){ currentsecns2="0" + currentsecns2; } divlink.innerHTML=currenthours2+":"+currentmins2+":"+currentsecns2+ " "+ampm2; ------------------------------------------------------------------------ How do I tie the number of button clicks into the number of times this code is executed? Any help is appreciated thanks. hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
hi, can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds regards, verve I'm not really a Java writer, so I don't know how to do this myself, though I imagine it would be pretty simple. I am looking to add a script to a webpage that allows users to input a time manually, and have it converted to GMT/Zulu time and display the converted time. I have seen a lot of time zone conversion scripts online, but they all just convert whatever the current system time is to another time zone. I am looking for a script that allows users to convert a time and show the zulu time, for times other than the current time. The time zone the inputed local time would be in is +4:30 (Kabul). I don't really care about style or aestehtics, just a simple script I can insert into a web page to have a time input field. The converted output time can appear in another field, a popup bubble, etc, again style isn't really an issue. It's really just to help people in my job who need to know what the GMT/Zulu time was for certain local times after the fact. One would think it shouldn't be that hard to just subtract 4:30 in your head, but apparently it is. Sorry if just asking for code outright like this is frowned upon. 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? hello i need code for my page, i need to show time elapsing, i mean 15sec countig down to 0 could you help me? hi, i am currently trying to write a javascript program; it would be for a library reservation system. this would be put on the computers with sessions from 15 minutes to 2 hours (in 15 minute chunks i.e, 15, 30, 45, 1 hour). this program would countdown the remaining time on their session, with pop-up messages appearing every so often. at the end of the session, the program will have to automatically log the user off. i am a student studying javascript, and haven't got any idea how to even start can anyone give me a helping hand to get me started. thanks http://icant.co.uk/sandbox/countdown.html Hi, I am trying to understand the countdown above but I am having some problems. I am trying to remove some of the fields under preferences, I just want to show "Time in Seconds" and "warning start" and not any of the other fields. When I try to remove something from the script the entire thing just stop working. So my question is simple, how do I hide/remove fields under preferences without breaking the countdown? |
|||||||