Home > General > Affiliate Marketing Forum

Need a Countdown Script That Does This... (4)

10-18-2011 07:03 PM #1 getgreen (Member)
Need a Countdown Script That Does This...

I've searched the forum for count down scripts and found a few, but none of them were the kind I need. I need something I can simply copy/paste into my LP and have it count down from like 5 minutes and be customizable through CSS.

I tried using the one from the STM blog but it shows up in it's own text field box and I have no idea of how to customize the appearance of it since it's technically a form. Not sure if this makes sense, but hopefully someone knows what I'm talking about

10-18-2011 07:51 PM #2 atlepe (Member)

Save this as countdown.js and store it in the same folder you have your page:

Code:

var mins
var secs;

function cd() {
 	mins = 1 * m("5"); // Change the minutes here
 	secs = 0 + s(":01"); // Change the seconds here (add an extra second to the total)
 	redo();
}

function m(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(0, i));
}

function s(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
 	var disp;
 	if(mins <= 9) {
  		disp = " 0";
 	} else {
  		disp = " ";
 	}
 	disp += mins + ":";
 	if(secs <= 9) {
  		disp += "0" + secs;
 	} else {
  		disp += secs;
 	}
 	return(disp);
}

function redo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
 	}
 	document.cd.disp.value = dis(mins,secs); // setup additional displays
 	if((mins == 0) && (secs == 0)) {
  		// window.alert("Time is up. Press OK to get your next discount."); // change timeout message if needed
  		// 'window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
 	} else {
 		cd = setTimeout("redo()",1000);
 	}
}

function init() {
  cd();
}
window.onload = init;

(Uncomment window.alert + window.location to add an alert and redirect when the timer runs out).

Then include it in your head section:

HTML Code:

<script type="text/javascript" src="countdown.js"></script>

You can also store the file under a different folder, just make sure you specify the appropriate path under 'src='.

Next use this whereever you want to include it:

HTML Code:

<form name="cd">
<input id="txt" readonly="true" type="text" value="05:00" border="0" name="disp" style="border:0px;"></form>

If you want to style it, use form or input in your style sheet like this:

Code:

form: { width: 70px; color: black; }

if you are using the attribute form in your html more than once, give it a class in your css, like below and add class="timer" to the opening <form>:

Code:

form.timer { width: 70px; color: black; }

Always worked for me

10-18-2011 08:03 PM #3 getgreen (Member)

Thank you so much man, seriously appreciate it!

10-18-2011 09:36 PM #4 getgreen (Member)

I figured it all out. This worked, but I was still getting the same problem as STM where the box didn't take the style changes... so I just updated the style info in the form itself using CSS.

So where it says style="border:0px;"> I just added the style info I wanted to add after that, i.e. <style="broder:0px; color=#FFF; width="100px";> and that formatted the count down exactly how I needed it. Just wanted to update the thread in case others come across this later on.

Home > General > Affiliate Marketing Forum