JavaScript - Created This Cool Javascript Countdown...

Hey Everyone,

I'm happy to have joined this forum. I have a javascript countdown but the digits countdown like 14 13 12 11 10 9 8 7 ... and I want it to look like 14 13 12 11 10 09 08 07.... I need this done for Days Hours Minutes and Seconds.

Here is the code. Thank you in advanced for your help.

Code:

<script type="text/javascript">
function cd() {
	var now = <?php echo $now; ?>;
	var target = <?php echo $target; ?>;
	var horizvert = '<?php echo $horizvert; ?>';
	var daytext = '<?php echo $daytext; ?>';
	var daystext = '<?php echo $daystext; ?>';
	var hourtext = '<?php echo $hourtext; ?>';
	var hourstext = '<?php echo $hourstext; ?>';
	var minutetext = '<?php echo $minutetext; ?>';
	var minutestext = '<?php echo $minutestext; ?>';
	var secondtext = '<?php echo $secondtext; ?>';
	var secondstext = '<?php echo $secondstext; ?>';
	var whatnow = '<?php echo $whatnow; ?>';
	var redirect = '<?php echo $redirect; ?>';
	
	timediff = target - now;
	
	var daysleft = 0;
	var hoursleft = 0;
	var minutesleft = 0;
	var secondsleft = timediff;		

	if (timediff >= 60) {
		secondsleft = timediff % 60;
		minutesleft = (timediff - secondsleft) / 60;
	}

	if (minutesleft >= 60) {
		timediff = minutesleft;
		minutesleft = timediff % 60;
		hoursleft = (timediff - minutesleft) / 60;
	}

	if (hoursleft >= 24) {
		timediff = hoursleft;
		hoursleft = timediff % 24;
		daysleft = (timediff - hoursleft) / 24;
	}
	
	var gmctime = document.getElementById("gmctime");
	var gmctimetext = '';
	
	var gmccountdown_timer = setInterval(gmcTimer, 1000);

	function gmcUpdateDivHorizontal() {
		gmctimetext = '';
		gmctimetext += (daysleft) ? daysleft + (daysleft==1 ? ' '+daytext+' ' : ' '+daystext+' ') : '';
		gmctimetext += (hoursleft || daysleft) ? hoursleft + (hoursleft==1 ? ' '+hourtext+' ' : ' '+hourstext+' ') : '';
		gmctimetext += (minutesleft || hoursleft || daysleft) ? minutesleft + (minutesleft==1 ? ' '+minutetext+' ' : ' '+minutestext+' ') : '';
		gmctimetext += secondsleft + (secondsleft==1 ? ' '+secondtext+' ' : ' '+secondstext+' ');
		gmctime.innerHTML = gmctimetext;
	}
	
	function gmcUpdateDivVertical() {
		gmctimetext = '';
		gmctimetext += (daysleft) ? daysleft + (daysleft==1 ? ' '+daytext+'<br />' : ' '+daystext+'<br />') : '';
		gmctimetext += (hoursleft || daysleft) ? hoursleft + (hoursleft==1 ? ' '+hourtext+'<br />' : ' '+hourstext+'<br />') : '';
		gmctimetext += (minutesleft || hoursleft || daysleft) ? minutesleft + (minutesleft==1 ? ' '+minutetext+'<br />' : ' '+minutestext+'<br />') : '';
		gmctimetext += secondsleft + (secondsleft==1 ? ' '+secondtext+'<br />' : ' '+secondstext+'<br />');
		gmctime.innerHTML = gmctimetext;
	}
	
	function gmcTimer() {
		if (secondsleft == 0 && minutesleft == 0 && hoursleft == 0 && daysleft ==0) {
			clearInterval(gmccountdown_timer);
			if (whatnow == 'text') {
				document.getElementById('gmcpre').style.display = 'none';
				document.getElementById('datetime').style.display = 'none';
				document.getElementById('gmcpost').style.display = 'none';
				document.getElementById('gmcafter').style.display = 'block';
			} else {
				window.location = redirect;
			}
			return;
		}
	
		if (secondsleft > 0) secondsleft--;
		else {
			secondsleft = (minutesleft || hoursleft || daysleft) ? 59 : 0;
			if (minutesleft > 0) minutesleft--;
			else {
				minutesleft = (hoursleft || daysleft) ? 59 : 0;
				if (hoursleft > 0) hoursleft--;
				else {
					hoursleft = (daysleft) ? 23 : 0;
					if (daysleft) daysleft--;
				}
			}
		}
		
		if (horizvert == 'Horizontal') {
			gmcUpdateDivHorizontal();
		} else {
			gmcUpdateDivVertical();
		}
	}
}
window.onload = cd;
</script>

i want a simple javascript countdown that counts down from 10 seconds to 0 and does NOTHING ELSE. im redirecting the page with a meta refresh and i want users to know when they'll be redirected, but most of the scripts found online have either minutes, hours, or days in them or have a javascript countdown after it's finished, which i don't want either since i'm doing a meta refresh.

i know making something like this isnt rocket science but i know almost NOTHING about javascript

Hi peeps

I found this script on another forum, It is nearly perfect, I was wondering if you peeps could help me make a few changes...

how do I change the cut off to 8pm I have tried

var c_t = 8; but it does 8am

I have also tried

var c_t = 20; but it doesnt work...

Any ideas?

Also instead of just saying "your order will ship shifted to tommrow" would it be possible to insert tomorrows date, i.e Thursday 13th
and then for "and your order will ship to Monday" could it say Monday 15th etc

Here is the script,

Code:

<html>

<head>

<script type="text/javascript">
function ord()
{
var c_t = 4;

var dd = new Date();

var ti_h = dd.getHours();

var ti_m = dd.getMinutes();


if(ti_h > c_t)
{

var di_t_h = ti_h - c_t;

var di_t_mi = 60 - ti_m;

var h = 24 - di_t_h;

var mi = di_t_mi;

var mess = h+"hours"+mi+"minutes";

}



var da = dd.getDay();

//var da = document.getElementById("da").value;

switch(da)
{
case 2:
case 3:
case 4:
case 5:
document.write("Place your order within the next 1 day"+mess+"and your order will ship shifted to tommrow");
break;
case 6:
case 7:
case 1:
document.write("and your order will ship to Monday");
break;
}
}

ord();

</script>

</head>

<body>

</body>

</html>

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 using a javascript datepicker which works fine with simple textboxes:
For example:
I have a textBox startDate1 in the table below:
<form method="post" name="upload" action="">
<table id="tableId">
<tr>
<td>
<input type="text" name="startDate1" value="" readonly="true" size="10"/>
<script language="JavaScript">
new tcal ({'formname': 'upload','controlname': 'startDate1'});
</script>
<td>
</tr>
<table>
</form>

--Now I want to add rows dynamically to this table for which I have
<a href="javascript:addRowToTable();" >Add Row</a>

and the corresponding javascript function:
<script type = "text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tableId');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

var box = row.insertCell(0);
var element = document.createElement('input');
element.setAttribute('type', 'text');
element.setAttribute('name', 'startDate' + iteration);
box.appendChild(element);
}
</script>
--This code creates the text boxes properly, but I am not being able to add the datepicker to it.
Please suggest me a way to add the datepicker to the textboxes in the dynamically generated rows.

Thank You
Regards
Rusho Shaw

I'm trying to understand how forms, data, php, javascript all work together. So 1) I hardcoded some html form fields with values using php using "echo", then 2) I dynamically created some more html form fields with values using javascript using "createElement" and appending to the html form element. When I click on the submit form, the php created form fields still show on the webpage, but the javascript dynamically created form fields disappear.

Can anyone shed some light for me? Why are the javascript created form fields disappearing when I click on submit and not the PHP created form fields?

Thank you!

Code:

<form method="post" id="commentform" action="<?php echo $PHP_SELF?>">

I have created a form with javascript embedded to dynamically assign value to Code:

document.myForm.myTextBox.value

based on user inputs, and when submitting the form, the targeted php file will process the data and records them in MySQL. The problem is that the value of myTextBox remains 'null' even when the javascript assigns a value to it (and it is visible in the form). Here is the code of the javascript:
Code:

document.register.street.value = http.responseText.split('^')[0];
document.register.city.value = http.responseText.split('^')[1];
document.register.street.disabled = true;
document.register.city.disabled = true;

To prevent user-mistyping, the textbox will be disabled after the value is set.

I tried to search but I found it is very difficult when I don't even know what key word to use to describe this issue. I hope anyone can help me with this here, and thanks for any inputs.

I am very new to Javascript and I am hopeful someone can help me with this issue.

I am trying to create a weekly countdown timer that will countdown until a certain date and time in the week (Friday at 4 PM EST). Once that date is reached I would like to have the counter reset automatically and once the date and time is reached I would like to have the counter show the remaining time until the next 4 PM on Friday.

I would like to be able to show how many days, hours, minutes, and seconds are left between the current time and set time.

I have found some code on this site already and I have started to modify it to try and achieve what I am after but I am running into issues. I can not get my day calculation to work as well as figure out how to change the end date that the timer counts down until.

I had thought about calculating the seconds left until that date and subtracting the current time (seconds) from that number to give me a time value, but I'm not sure if that is the best practice?

Any help would be greatly appreciated.

Here is my code:

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,15,0); // midnight 0000 hrs
// midnight - change time hh,mm,ss to whatever time required, e.g. 9,15,0 (0915)
var ft = midnight.getTime() + 86400000 + 43200000; // add one day 12 hours
var offset = now.getTimezoneOffset(); // local time in minutes vs GMT
offset = offset * 60000; // milliseconds
ft = ft + offset;
var diff = ft - time;
diff = parseInt(diff/1000);
if (diff > 129600) {diff = diff - 129600}
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 days = Math.floor(secs/864000);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result =  + days + " days " + ((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-weight: bold;"></span>

</body>
</html>

Hello,
I have the following DIV tag
Code:

<div id = "cbContainer"> </div>

The div is initially hidden as the display is set to none. I have one text input in my form. Depending upon the changed text in that textbox, there is a javascript function which creates a list of checkboxes and by using the innerHTML, the above div is filled up with the check boxes like shown in the code below:

Code:

var chkboxes = '';
for(var r = 0; r < related.length; r++)
{
	chkboxes = chkboxes + 
        '<div class ="versionswidth">'+
        '<input type="checkbox" name="version" value = related[r] />'+ related[r] + 
        '</div>';
}
var div = document.getElementById("cbContainer");
div.innerHTML = chkboxes;

div display is then set as "block" which makes the div visible. The problem is that on form submission, the input of selected checkboxes is not submitting.

I will be grateful for any help.

Thank you.

My html form code is

<html>
<head>
<script type="text/javascript" src="2.js"></script>
</head>
<body>
<h1 id="remain"></h1>
<form action="3.php" method="post" id="form1" name="form1">
<input type="text" name="id">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>

I need to submit the form after coundown.Here is my countdown script file

window.onload=counter;
function counter()
{
var seconds = 5;
countDown();
function countDown()
{
document.getElementById("remain").innerHTML=seconds;
if(seconds>0)
{
seconds=seconds - 1;
setTimeout(countDown,1000);
}
if(seconds == 0)
{
document.form1.submit();
}

}
}


Countdown is working but form does not submit after countdown.Please help me regarding this.Thanks in advance

Hello.

I open a new forum thread as adviced by jmrker.

Old forum thread related to this topic:
http://www.codingforums.com/showthre...8#post12243889




Here is my code, based on the latest Philip M's work :
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(),20,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 = days +':';
result += ((hours < 10 ) ? "0":"" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins
+ ":" + ( (secs < 10) ? "0":"" ) + secs + "";
document.getElementById("countdown").innerHTML =  result;
}
</script>
</head>




	
	<body onload = "getSeconds()" style="background-color: #ffffff;">
	
	
	
		<br><br>	
		
		<div id="CountDownLogo" style="background-color: #ffffff; width:300px; height: 180px; background-image:url(ScreenShot002.png) ">
			<span id="title" style="font-family: arial; font-size: 20; font-weight: bold; color: #ffffff; position: relative; top:27px; left:60px; z-index:1;">Weekend Cup 2012</span>
			<br><br>
			<span id="countdown" style="font-family: arial; font-size: 25; font-weight: bold; color: #3b3b3b; position: relative; top:34px; left:127px; z-index:1;"> </span>			
			<br><br>
		
		</div>		
		
		
		
	</body>
	
	
	
	
	
</html>

My event takes place at 8pm on fridays.
To see if this script works in all conditions, I change my system date and time (to see if the script displays the good remaining duration).

TESTS:
Friday
- So I set my system date on friday but at different times. When I do that, everything seems to work fine.
- If I chose an earlier time (11am for example), it's fine too.
- If I chose 7:59:45 pm (and wait a few seconds) I can see the countdown resetting and displaying 6 days 23 hours 59 min 59 sec. So it's fine too.

Saturday
- But if I chose saturday 00:00:01 am it doesn't work. It displays 0:19:59:59 (as if the event occured the same day, saturday).
- And if I chose saturday 7:59:45 pm, the counter resets and displays 6 days 23 hours 59 min 59 sec.. Which is also wrong because it would mean that the even occurs on saturdays 8pm.

Sunday
- Same for sunday (the same errors like saturdays)


Btw, could it be possible to display on the HTML page, all variable values ?
This could help me understand how the script is done. (I am a poor coder).

Thank you very much.

Please see the "watching eyes" next to the search box at the top of: http://www.burton.com

I am looking to recreate a similar effect for a project, and I cannot figure out what script is running this. I can see there is some CSS and JS associated with this file but I cannot seem to figure out how it works. It seems to be done using x,y coordinates.

Any help would be greatly appreciated.

Thank you in advance,
Jim

Hello everyone,

I've got done with a few hours of coding! What took me the longest was the update system. Now, some features notepad elite has:
Color Changing Bold/Italic/Underline/Strike Font Changing Saving/Opening And more!
Remember, it may seem like a plain old notepad as it is, but in 30 minutes or so a new update will be released. You can check by pressing this button:



Some screenshots:



Download Notepad Elite! - http://host-a.net/RSEB/Notepad%20Elite.exe

Virus scan:

1 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

Hello,

I REALLY like the dropdown menus that are on the Patagonia website. How difficult would this be to replicate? Is there a write-up or tutorial somewhere I can read and learn how to do this?

Any help would be greatly appreciated,
Thanks

Here is the link:

http://www.patagonia.com/web/us/home