JavaScript - Special Countdown

hi,

I would like to change my validation page so that a user cannot use special characters in the form, here is my code below

Code:

				jQuery("#full_name").validate({
                    expression: "if (VAL) return true; else return false;",

                    message: "Please enter your name"
                });
				jQuery("#name").validate({
                    expression: "if (VAL.match(/^[^\\W][a-zA-Z\\_\\-\\.]+([a-zA-Z\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",

                    message: "Please enter your name"
                });

I am trying to make a very simple form so a user can enter some text then be redirected to a page that uses that text in the URL. So far I have this working using window.open but the ? and & in the URL show up as & # 0 3 8 ;
here is the code in the body;

Code:

<script type="text/javascript">
			/* <![CDATA[ */
				function orderBlog()
				{
					var subDomain = document.blogDomain.domainEntered.value;
					window.open("http://mydomain.com/portal/cart.php?=add&pid=15&domainoption=subdomain&sld=" + subDomain + "");
				}
			/* ]]> */
			</script>
			<form name='blogDomain' onsubmit="orderBlog();">
				<input type='text' name='domainEntered' size='60' style='width:100px;' />
				.mydomain.com
				<input type="submit" value="Get Your Site!" />
			</form>

but for some reason that goes to the URL mydomain.com/portal/cart.php & # 0 3 8 ; =add & # 0 3 8 ; pid=15 & # 0 3 8 ; domainoption=subdomain & # 0 3 8 ; sld=XXXXXXXX when using firfox, ie7 works fine

hi,
i need to create a javascript countdown based on the times given. If the start time is 17:45 and the end time is 19:32 (in that format) for example, how would i create a countdown for the time between 17:45 and 19:32. If anyone could point me in the right direction that would be great!
thanks

Hi everyone,

I need a countdown timer that will count down exactly from a time that i set.

i want it to count in this format: hh:mm:ss.

i need it for a online shop , at the main page there are few products for sell and i want each one of them to have its own countdown timer.

in addition when it will get to 00:00:00 i want that it will automatically add like 5 hours and continue counting down..

P.s i dont know javascript..

thanks guys

Hi please help me with this website. This website is used to list 6 events and then it should accurately countdown to when that event happens. As it is right now it accurately counts days, but hours, minutes, and seconds are counted down incorrectly. Here is the js file:

/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 2
Review Assignment

Author: Andrew Duren
Date: 8 May 2011

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) ? " a.m." : " p.m.";
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) {
var year = today.getFullYear();
holiday.setFullYear(year);
year = (today > holiday) ? year + 1 : year;
year = holiday.setFullYear(year);
}

function countdown(start, stop){
time = stop - start;
var rawdays = ((time)/(1000*60*60*24));
days = Math.floor(rawdays); //milisec/sec*sec/min*mins/hour*hours/day is what's divided 4 value
var rawhours = ((rawdays - days)*24) - 1;
hours = Math.floor(rawhours);
var rawminutes = (rawhours - hours)*60;
minutes = Math.floor(rawminutes);
var rawseconds = ((rawminutes - minutes)*60) + 1;
seconds = Math.floor(rawseconds);

return days + " days, " + hours + " hours, " + minutes + " mins, " + seconds + " secs";
}

Here is the html file:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 2
Review Assignment

Events in Tulsa
Author: Andrew Duren
Date: 08 May 2011

Filename: events.htm
Supporting files: dates.js, logo.jpg, tulsa.css
-->

<title>Upcoming Events at Tulsa</title>
<link href="tulsa.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dates.js"></script>
<script type = "text/javascript">

function timeLeft() {
//the today variable contains the current date and time
var today = new Date();
var Date1 = new Date("January 14, 2011 10:00:00");
var Date2 = new Date("May 21, 2011 12:00:00");
var Date3 = new Date("July 4, 2011 9:00:00");
var Date4 = new Date("September 1, 2011 12:00:00");
var Date5 = new Date("December 1, 2011 11:30:00");
var Date6 = new Date("December 31, 2011 3:30:00");
//Display the current date and time.
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('timeLeft()', 1000)">
<form name="eventform" id="eventform" action="">

<div id="logo">
<img src="logo.jpg" alt="Tulsa Events" />
</div>
<div id="links">
<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>
<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>
<th colspan="2" style="text-align: right">Current Date and 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 a.m." 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 p.m." 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 p.m." 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 p.m." 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 a.m." 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 p.m." readonly="readonly" size="20" /></td>
<td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>

</form>
</body>
</html>

Please tell me what I need to do to make all of them countdown properly and tell me what technique I can use in the future to do this for future websites in case I need to countdown to 30 events. I would appreciate any help.

I'm not sure what im doing wrong here this technique im using works for a different countdown file. Here is the code:

/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 2
Review Assignment

Author: Andrew Duren
Date: 8 May 2011

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) ? " a.m." : " p.m.";
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) {
var year = today.getFullYear();
holiday.setFullYear(year);
year = (today > holiday) ? year + 1 : year;
year = holiday.setFullYear(year);
}

function countdown(start, stop){
time = stop - start;
var rawdays = ((time)/(1000*60*60*24));
days = Math.floor(rawdays); //milisec/sec*sec/min*mins/hour*hours/day is what's divided 4 value
var rawhours = ((rawdays - days)*24) - 1;
hours = Math.floor(rawhours);
var rawminutes = (rawhours - hours)*60;
minutes = Math.floor(rawminutes);
var rawseconds = ((rawminutes - minutes)*60) + 1;
seconds = Math.floor(rawseconds);

return days + " days, " + hours + " hours, " + minutes + " mins, " + seconds + " secs";
}

HTML file:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 2
Review Assignment

Events in Tulsa
Author: Andrew Duren
Date: 08 May 2011

Filename: events.htm
Supporting files: dates.js, logo.jpg, tulsa.css
-->

<title>Upcoming Events at Tulsa</title>
<link href="tulsa.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dates.js"></script>
<script type = "text/javascript">

function timeLeft() {
//the today variable contains the current date and time
var today = new Date();
var Date1 = new Date("January 14, 2011 10:00:00");
var Date2 = new Date("May 21, 2011 12:00:00");
var Date3 = new Date("July 4, 2011 9:00:00");
var Date4 = new Date("September 1, 2011 12:00:00");
var Date5 = new Date("December 1, 2011 11:30:00");
var Date6 = new Date("December 31, 2011 3:30:00");
//Display the current date and time.
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('timeLeft()', 1000)">
<form name="eventform" id="eventform" action="">

<div id="logo">
<img src="logo.jpg" alt="Tulsa Events" />
</div>
<div id="links">
<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>
<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>
<th colspan="2" style="text-align: right">Current Date and 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 a.m." 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 p.m." 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 p.m." 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 p.m." 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 a.m." 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 p.m." readonly="readonly" size="20" /></td>
<td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>

</form>
</body>
</html>

Even tho my method works for 1 file it's inconsistent with this one, there must be a better technique I can use in case I have to do 100 countdowns on a page.

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?

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

Hey all,

I'm trying to sort a countdown clock for my website:
http://www.cyber-technix.com/corps/index.php/

My vision of it was a transparent background, Blue text and a simple Day : Hour : Minute : Second Layout.

I found a free .js countdown clock at http://www.hashemian.com/tools/javascript-countdown.htm

Anyone got any better suggestions?

I havn't used .js much so I may need some help implementing it if someone would be kind enough to help me out, thanks.

Hey guys/gals, I have a code working great, all except that I want it to start a 36 hour countdown and do it forever after the initial timer hits 0. Here's what I have so far:

PHP Code:
<html>
<body>
<center>

<div style="width:1000px;height:65px;border:3px outset blue;">

<a href="http://s260.photobucket.com/albums/ii17/zynner/?action=view&current=Aetherite_Icon.png" target="_blank"><img src="http://i260.photobucket.com/albums/ii17/zynner/Aetherite_Icon.png" border="0" alt="Aetherite"></a>

<sup><big><b>Guildleves Will Reset In: 

<script type = "text/javascript">

dateFuture = new Date(2010,9,5,22,10,30); //you can adjust this if a server reset changes leve times. 

function GetCount(){

    dateNow = new Date();                                    
    amount = dateFuture.getTime() - dateNow.getTime();        
    delete dateNow;

    if(amount < 0){

        This is where i think the loop should be, yes? If so, how can I countdown 36 hours over and over?
        
        }
    
        else{
        days=0;hours=0;mins=0;secs=0;out="";

        amount = Math.floor(amount/1000);

        days=Math.floor(amount/86400);
        amount=amount%86400;

        hours=Math.floor(amount/3600);
        amount=amount%3600;

        mins=Math.floor(amount/60);
        amount=amount%60;

        secs=Math.floor(amount);

        if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
        if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
        if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
        out += secs +" seconds";
        document.getElementById('countbox').innerHTML=out;

        setTimeout("GetCount()", 1000);
    }
}

window.onload=GetCount;

</script>

<div id="countbox"></div>

</sup>
</div>
</body>
</html> 


Any help I could get would be MUCH appreciated.

Hi all,

This is my first post on a forum regarding help so I'm sorry in advance.

I currently have a text based MMORPG.

I am trying to create a countdown timer for my functions(Crime, Car Steal and so on)

Code:

    window.setTimeout("Tick()", 1000);

    function Tick() {
        window.setTimeout("Tick()", 1000);
    }
	var Timer;
var TotalSeconds;


function CreateTimer(TimerID, Time) {
    Timer = document.getElementById(TimerID);
    TotalSeconds = Time;
    
    UpdateTimer()
    window.setTimeout("Tick()", 1000);
}

function Tick() {
    TotalSeconds -= 1;
    UpdateTimer()
    window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
    Timer.innerHTML = TotalSeconds;
}

function Tick() {
    if (TotalSeconds <= 0) {
        alert("Available")
        return;
    }

    TotalSeconds -= 1;
    UpdateTimer()
    window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
    var Seconds = TotalSeconds;
    
	var Days = Math.floor(Seconds / 86400);
    Seconds -= Days * 86400;
	
    var Hours = Math.floor(Seconds / 3600);
    Seconds -= Hours * (3600);

    var Minutes = Math.floor(Seconds / 60);
    Seconds -= Minutes * (60);


    var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)


    Timer.innerHTML = TimeStr + "Organised Robbery!";
}


function LeadingZero(Time) {

    return (Time < 10) ? "0" + Time : + Time;

}

Any help with regards to this would be greatly appreciated.

Thanks in advance

Hi All,

I am trying to set up a countdown function that will be called on the click of a button.

Function is below
Code:

function countDown(sec, min) {

  sec--;
  if (sec == -01) {
    sec = 59;
    min = min - 1;
  } else {
   min = min;
  }
if (sec<=9) { sec = "0" + sec; }
  time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
if (document.getElementById) { theTime.innerHTML = time; }
  SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
 
});

However I get an error after one second. Script can be found here - http://www.jivalot.co.uk/m.php

Can anyone help?

Kind regards,

Slate

Hi guys,

I'm building a page which has a countdown timer on it (days, hours, mins) and I honestly really don't know much about Javascript at all. I have spent over half a day looking through tutorials and code snippets and think I'm close, but I'm still having trouble with the output. I need to pull out the days/hours/mins separately as they sit within different HTML elements.

The days appear to be displaying correctly, but the hours is showing 3 digits instead of 2 and the mins is showing 5 digits instead of 2:

32 days, 764 hours, 45845 mins

Here is the code I'm using:

Code:

var now = new Date();
var theevent = new Date("June 18 2011 10:00:00");
var seconds = (theevent - now) / 1000;
var mins = seconds / 60;
var hours = mins / 60;
var days = hours / 24;
ID=window.setTimeout("update();", 1000);

function update() {
now = new Date();
seconds = (theevent - now) / 1000;
seconds = Math.round(seconds);
mins = seconds / 60;
mins = Math.round(mins);
hours = mins / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);

document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('mins').innerHTML = mins;

ID=window.setTimeout("update();",1000);
}

Thanks a bunch in advance...

Hi there, I was looking for a countdown script that counts down starting at a number (50) which starts again once it reaches (0). The count down isnt in seconds, it should be in 10 second increments.

This meaning that it starts at 50, and they goes to 49 after 10 seconds..

Can anyone help?