|
JavaScript - New To Java Scripts! Simple Countdown Timer Needed Please
Hello all,
As I am new to java scripts, I usually solve thing with trial and error. What I need is a very simple java script for a count down timer, after searching here I found this: ---------------------- Code: <font style="font-size:72px" color="#FF0000" face="Arial">
<script type = "text/javascript">
var page = "http://www.google.com"; //The page to redirect to
function getSeconds() {
startTimer (3); // 36 hours
}
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 {
window.location = page; // stop counting at zero
// and start again if required
}
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ( (mins < 10) ? "0" : "" ) + mins
+ ":" + ( (secs < 10) ? "0" : "" ) + secs;
document.getElementById("countdown").innerHTML = result;
}
</script>
<body onload = "getSeconds()">
<span id="countdown" style="font-weight: bold;" ></span>
----------------------------- I modified some stuff, as I defined the font face and size, the color as well, and I added a var to open a certain page when the time is over (as I said before, all these modifications came right with trial and error). So, is that script good? or are there better scripts that do the same job? And, can someone please provide me with a script that does the same functionality of the script I mentioned but instead of showing digits it shows: 01 minutes 31 seconds ? Thank you so much. Similar TutorialsI realy need some help i pass the end_time of the script using ajax from a database then calculate the remaining time calculating the dif from the current time each second. It works for the first second then I get NaN error + the timer then refreshes back to the first output in a countinous loop.. the contents of my timer where the js does its job Code: <html>
<head>
<script type="text/javascript">
var xmlhttp;
var secs=0;
var mins=0;
var hours=0;
var days=0;
var t;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction(actionvar)
{
var urlString = getHash();
var string = 'time.php?hash='+urlString+'&action='+actionvar;
loadXMLDoc(string,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("timer").innerHTML='';
var end_time=xmlhttp.responseText;
end_time = parseInt(end_time);
end_time = end_time*1000;
end_time = parseInt(end_time);
update(end_time);
var t = setTimeout(function(){myFunction(end_time);},1000);
}
});
}
function getHash(){
return document.getElementById('hash').innerHTML;
}
function update(end_time){
out="";
var d=new Date();
end_time = parseInt(end_time);
var time= parseInt(d.getTime());
var amount = end_time - time; // The time left in milliseconds
amount = parseInt(amount);
amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
days=Math.floor(amount/86400);//days
amount=amount%86400;
hours=Math.floor(amount/3600);//hours
amount=amount%3600;
mins=Math.floor(amount/60);//minutes
amount=amount%60;
secs=Math.floor(amount);//seconds
if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
out += mins +" "+((mins==1)?"min":"mins")+", ";
out += secs +" "+((secs==1)?"sec":"secs")+", ";
out = out.substr(0,out.length-2);
document.getElementById('timer').innerHTML = out;
if(secs == 0 && mins == 0 && hours==0 && days == 0){
clearTimeout(t);
document.getElementById('timer').innerHTML='Boost ready';
}
}
</script>
</head>
<body style='background-image:url("main_bg.jpg");color:#580000'>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id='timer' align='center'></div>
<div align='center'>
<?php
require('global.php');
if(!isset($_SESSION['user'])){
header("Location: lol.php");
exit;
}
$id=$_SESSION['id'];
$q= mysql_query("SELECT * FROM loltimerclient WHERE id='$id'");
$row = mysql_fetch_assoc($q);
$hash=$row['hash'];
echo "<div style='visibility:hidden' id='hash'>$hash</div>";
echo '<button type="button" onClick="myFunction(0)">Start timer NOW!</button>';
?>
</div>
<div align='center'><a href='logout.php'>Logout</a></div>
</body>
</html>
And the php that retrieves the time from the database (this file passes its info through ajax to the first code) Code: <?php
require('global.php');
$hash = $_GET['hash'];
$action = $_GET['action'];
if(!isset($hash)|| !isset($action))
exit;
$search_hash = mysql_query("SELECT * FROM loltimerclient WHERE hash='$hash' LIMIT 0,1");
if(mysql_num_rows($search_hash) < 1)
exit;
$row=mysql_fetch_assoc($search_hash);
$id= $row['id'];
$q = mysql_query("SELECT * FROM loltimers WHERE user_id='$id' LIMIT 0,1 ");
$endtime = time() + (60*60*24);
if($action == 0)
if(mysql_num_rows($q) == 1){
mysql_query("UPDATE loltimers SET end_time='$endtime' WHERE user_id='$id'");
echo $endtime;
}
else{
if(mysql_num_rows($q) < 1){
mysql_query("INSERT INTO loltimers SET user_id='$id', end_time='$endtime' ");
echo $endtime;
}
}
else
if($action == 1){
$row2=mysql_fetch_assoc($q);
echo $row2['end_time'];
}
?>
Any help is greatly appriciated since i can;t seem to figure this out. Thx in advance! Hi. I'm looking for a simple JS countdown timer for a quiz that counts down 60 seconds. I've done a lot of searching and have found plenty of countdown timers for a specific time/date in the future, but nothing for my needs. I just want it to count down from 60 seconds to zero. Thanks a lot for your help! Ok, I have been trying for the last week to get my head around this javascript thing to create myself a countdown timer. And after many search keywords in whatever search engine I still couldn't find any good results which could meet my needs. I actually found a cute little script here on the forum, but unfortunately, and after many times trying, couldn't make it work for me as well. Yes it did what it was supposed to do, but I need something more specific. So here's the thing. I am working with PHP variables and need two countdown timers on one page. I have altered the script in various ways, and it kinda works, but whenever it starts running, the top countdown timer starts with the correct amount of seconds but then jumps to the same output as the below one. Code: <span id = \"closingtimer". $target ."\">". $seconds ."</span>
<script type=\"text/javascript\">
var seconds = ". $seconds .";
function display". $target ."() {
seconds --;
if (seconds < 1) {
closeMyAd();
} else {
document.getElementById( \"closingtimer". $target ."\" ).innerHTML = seconds ;
setTimeout(\"display". $target ."()\", 1000);
}
}
display". $target ."();
</script>
$target is a variable from the Db $seconds is the amount of seconds The script IS in a loop to be able to perform the function twice for the two different targets with their amount of seconds. Due to this (I suspect) the timer is counting down at 2 seconds at a time, which also is quite annoying Target 1 has 2400 seconds and target 2 has 1600 seconds. How can I make this work correctly and without having a huge script in the middle of my page? 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. 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, 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 I am making a website and the page is oriented around a countdown system. If the timer ever reaches 0, the whole thing will stop. Below are the specifics: I need a countdown timer that runs from 30 seconds to 0 seconds. If the timer is at 0 seconds, the script runs php code #1 (which makes the timer stop and if any user refreshes the page, it will still stay at zero). There is also two buttons. If user clicks on button #1, the timer will get reset to 30 seconds remaining. Then the script will run the php code #2 (which allows the timer to begin counting down again from 30 seconds). If user clicks on button #2, the timer will get reset to 5 seconds remaining and same thing follows as the first button. And obviously the timer should show the same number (seconds remaining) for all the users on the website! Thank You index.php Code: <a href="#" onClick="getTimer();return false;">Show Timer</a> <br /> <div id="test"></div> getTimer.js Code: function getTimer() {
new Ajax.Request('filegoeshere',
{
onSuccess: function(req)
{eval(req.responseText);},
onFailu function(){ alert('Something went wrong...') }
});
}
timer.php Code: <?php echo "$('test').innerHTML = '<form><input type=\"text\" name=\"timer\" id=\"timer\" size=\"8\" style=\"text-align: center;\" /></form>';"; ?>
var seconds= 30
$('timer').value='30'
function display() {
seconds--;
if (seconds<=-1){
seconds=30
}
else
$('timer').value=seconds;
setTimeout("display()",1000)
}
display()
Everything seems to work, but the once the timer is in the input box, after the request, it get's stuck on 29, and will not continue counting down, and I can't seem to get it to work. I am using ProtoType with this, and I did just take that little part out of the index.php file, since that is all that is needed from that file. 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 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 folks, I am in need of a functionality for a system where in there is PHP mysql system having a table "bid" which has columns(bid_product, "createtime") basically if the user does not bid for the product within 20 hours the bid will close for this i need to display a timer which keeps counting till 5+ hours or so of the createtime, After a tiring search for timers i finally found a .Js which would work just fine for static values Within the .js script when i tried to pass values from my database the timer does not change on itself but each time i have to refresh the page to check the time left. Please have a look at the code and let me know what could be wrong testingtime.php Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vott</title>
<script type="text/javascript" src="js/testtime.js"></script>
<style>
p.timer{font-size:15px; color:#43C6DB; border: 2px solid #fc0;width: 100px; position: absolute; top: 350px; left: 375px;}
</style>
</head>
<body>
<table style="background-color: #CCC" width="100%" border="0" cellpadding="12">
<tr>
<td width="78%"><h1>My Logo Image</h1></td>
</tr>
</table>
<span class="bids">
<p class="timer"><b>bid Closes in :</br>
<span id="timeleft"> <script>timeleft('<?php print($bid['createtime']); ?>')</script>
</span></b></p></span></br></br>
</body>
</html>
The Javascript code Code: var eventtext = "Left"; // text that appears next to the time left
var endtext = "bids Closed!!"; // text that appears when the target has been reached
function timeleft(mydate){
// Split timestamp into [ Y, M, D, h, m, s ]
var t = mydate.split(/[- :]/);
// Apply each element to the Date function
var date = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
// -> Wed Jun 09 2010 13:12:01 GMT+0100 (GMT Daylight Time)
var year = date.getYear(); // in what year will your target be reached?
var month = date.getMonth(); // value between 0 and 11 (0=january,1=february,...,11=december)
var day = date.getDate(); // between 1 and 31
var hour =date.getHours(); // between 0 and 24
var minute = date.getMinutes(); // between 0 and 60
var second = date.getSeconds(); // between 0 and 60
var end = new Date(year,month,day,hour,minute,second);
end.setMinutes(end.getMinutes() + 50);
var now = new Date();
if(now.getYear() < 1900)
yr = now.getYear() + 1900;
var sec = end.getSeconds() - now.getSeconds();
var min = end.getMinutes() - now.getMinutes();
var hr = end.getHours() - now.getHours();
var dy = end.getDate() - now.getDate();
var mnth = end.getMonth() - now.getMonth();
var yr = year - yr;
var daysinmnth = 32 - new Date(now.getYear(),now.getMonth(), 32).getDate();
if(sec < 0){
sec = (sec+60)%60;
min--;
}
if(min < 0){
min = (min+60)%60;
hr--;
}
if(hr < 0){
hr = (hr+24)%24;
dy--;
}
if(dy < 0){
dy = (dy+daysinmnth)%daysinmnth;
mnth--;
}
if(mnth < 0){
mnth = (mnth+12)%12;
yr--;
}
var sectext = " Seconds ";
var mintext = " Minutes, and ";
var hrtext = " Hours, ";
var dytext = " Days, ";
var mnthtext = " Months, ";
var yrtext = " Years, ";
if (yr == 1)
yrtext = " Year, ";
if (mnth == 1)
mnthtext = " Month, ";
if (dy == 1)
dytext = " Day, ";
if (hr == 1)
hrtext = " Hour, ";
if (min == 1)
mintext = " Minute, and ";
if (sec == 1)
sectext = " second ";
if(now >= end){
document.getElementById("timeleft").innerHTML = endtext;
clearTimeout(timerID);
}
else{
//alert(now.getHours()+1);
document.getElementById("timeleft").innerHTML =min + ":" + sec;
//document.getElementById("timeleft").innerHTML = dy + dytext + hr + ":" + min + ":" + sec;
}
timerID = setTimeout("timeleft()", 1000);
}
window.onload = timeleft;
I'm going crazy trying to figure this out. What I'm looking for is a javascript timer / count down script. When the hours, minutes and seconds hit 0, I need a button the page to become enabled and I also need a button to pause the timer and start it. I have the following code so far. Willing to pay $50 for solution...
Code: <html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// how many minutes
var mins = 30;
// how many seconds
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()',1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
if(secs > 0)
{
setTimeout('Decrement()',1000);
}
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
</script>
</head>
<body onload="countdown();">
Countdown: <form><input id="minutes" type="text" style="width: 22px;"> minutes <input id="seconds" type="text" style="width: 22px"> seconds remaining.</form>
</body>
</html>
Code: <script language="JavaScript"> TargetDate = "12/5/2009 12:00 PM"; BackColor = "grey"; ForeColor = "white"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "Its finally here"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> i found this code on a website. it is a countdown timer. and i wanted to put it on a forum. but i think there will be a problem when others view it.. i think that other people from different time zones will see the time countdown different times.. is there a way to include a specific time zone (i.e. mine?) in this code? BTW its suppose to go to December 5, 2009. i am in GMT-6 Central Time. Hi, Im looking for a simple script or solution that will allow a timer to count down 48hrs from a set time of the day and then after that reset and start the process again. For Example: Order within 23 hours 6 minutes for Delivery Tommorow The problem I have got is im not sure how to create a timer that does not reset every time you refresh the browser etc. Any hep would be great as im stumped with this one! Thanks Hi there. I am wanting to create a countdown timer that is based on a SELECT feature. If a user selected 15 MINUTES, the script would know 15 minutes was selected and would prompt start to time down when selected. Or if the user selected 30 MINUTES it would go to countdown from 30 minutes. I would also like a stopwatch feature on there if STOPWATCH was selected. It would also be great if when counting down the background box of the timer turns red to visually show the timer had gone over and start counting back up in minus to show how many minutes/seconds it has gone over. I've looked on good old Google but can't find a code i'm looking for! Thanks Ash Hi guys. I'm making a webpage for a school project and I need help modifying this timer he http://web.mac.com/rkuhnhenn/Countdo.../Style_3b.html I want it to countdown from 48 hours, and as soon as it counts down, I need it to reset. I need an endless countdown of 48 hours. How can I go about doing that? Thanks guys, your help is highly appreciated. Hi there, Hopefully someone will be able to help me here. I found the below script that works fine for the actual countdown, but when the user refreshes the page, the countdown starts from 5 minutes again. What I am trying to do, is handle users that put something in their shopping cart and then get side tracked or what ever reason and that same product then being purchased by another person when I only have 1 left. So using PHP I am going to subtract the qty of that product by 1 and then I want the website to either put it back, if the users checkout times out, or if a normal process it is taken out permanently. So long story short I think I need some sort of 'memory' for the javascript, so the user can't just keep refreshing and it starting from 5 minutes each time. Also it needs to be carried through to other pages. Your help is greatly appreciated. Thanks, Simon. Code: <script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php */
var mins
var secs;
function countdown() {
mins = 1 * CDm("5"); // change minutes here
secs = 0 + CDs(":01"); // change seconds here (always add an additional second to your total)
CDredo();
}
function CDm(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(0, i));
}
function CDs(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(i + 1, obj.length));
}
function CDdis(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 CDredo() {
secs--;
if(secs == -1) {
secs = 59;
mins--;
}
document.getElementById("countdown").firstChild.nodeValue = CDdis(mins,secs);
//document.cd.disp.value = dis(mins,secs); // setup additional displays here.
if((mins == 0) && (secs == 0)) {
window.alert("Time is up. Press OK to continue."); // change timeout message as required
// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
} else {
countdown = setTimeout("CDredo()",1000);
}
}
function coundowninit() {
countdown();
}
</script>
Code: <span id="countdown"> </span> Using the following script: <script language="JavaScript">TargetDate = "01/22/2010 7:50 AM UTC-0500"; BackColor = "palegreen"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "Call In Now!!! Lines Are Open" </script> Want target date to equal every day so it resets after the target date and time is hit. Optionally, it would be nice to have it reset 60 minutes after target is hit (so the FinishMessage can display) but if that's too complicated, I'd be happy to not have to manually reset the date every day. I apologize in advance for being a newbie and this may be a straight-forward and simple issue. |
|||||||