|
JavaScript - Help With Javascript Countdown..
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 Similar Tutorialshi, 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 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 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>
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 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;
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
I'm teaching myself JavaScript and created this animated countdown... I want to learn more advanced techniques, or shorthand code. If you see anything I can improve here or something that may not be suitable for a certain browser, please let me know... 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=UTF-8" />
<title>History Countdown</title>
<style>
* {
margin: 0;
padding:0;
}
p {
font-size: 1em;
color: white;
position: absolute;
left: 450px;
}
#insertHere {
background-color: #000;
padding: 10px;
width: 300px;
height: 40px;
position: relative;
}
#list {
border: solid black 3px;
height: 700px;
width: 320px;
}
h3 {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
form {
text-align: center;
}
</style>
<script>
function gogo(){
var number = 2011;
document.getElementById('formArea').innerHTML = "";
var pixelCount = 450;
var intervalCount = 0;
var opacityValue = 0;
var pixels = 65
var ems = 1;
var beginCount = setInterval(countDown, 1000)
function countDown() {
if(number==0){
clearInterval(beginCount);
clearInterval(mover);
alert ("done");
}
intervalCount = 0;
pixelCount = 450;
pixels = 65;
ems = 1;
var opacityValue = 0;
var mover = setInterval(moveNumber, 35);
function moveNumber() {
intervalCount += 1;
if (intervalCount <= 12) {
pixelCount -= pixels;
opacityValue += .1;
document.getElementById('para').style.left = pixelCount + "px"
document.getElementById('para').style.opacity = opacityValue;
document.getElementById('para').style.fontSize = ems + "em";
ems = ems + .1;
pixels = pixels - 7;
if (intervalCount == 2) {
document.getElementById('para').innerHTML= number;
number -= 1;
}
}//end if
else if (intervalCount == 13) {
clearInterval(mover);
}
}
}//moveNumber
}
</script>
</head>
<body>
<div id="list"><div id="insertHere"><p id="para"></p><span id="done"></span></div>
<h3>History Countdown</h3>
<div id="formArea">
<form>
<input type="button" value="Start" id="goButton" onclick="gogo()" />
</form>
</div>
</div>
</body>
</html>
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>
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. 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 need code for my page, i need to show time elapsing, i mean 15sec countig down to 0 could you help me? 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? Hey there, first off, here is the countdown script I am using: PHP Code: <script language="JavaScript"> TargetDate = "{$timerdate}"; BackColor = "#FFFFFF"; ForeColor = "#FF0000"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days %%H%% Hours %%M%% Minutes %%S%% Seconds"; FinishMessage = "<b>Price has been reduced!</b>"; </script> Now I was wondering if I can do 2 things to this script, 1) make it "flash" during the last 10 seconds of the countdown, and 2) Once it hits 0, then it'll show the FinishMessage for perhaps 10 sec, then it would restart the countdown with a new targetdate. Is that possible at all? In Brno, 07.06.2011 Hello everybody, i really need your help with one issue. I have got one page running under Wordpress and i would like to add some countdown to widget to show when i will be again online. for example: I am online every working day (monday - friday) from 08:00 AM to 04:30 PM. So it would be nice to show to my subscribers when i would be online again. So lets think about that is Thuesday 07:00 PM, so on my page would be visible this: "I will be back in 13 hours, 00 minutes, 00 seconds" Or in Saturday at 07:00 PM there will be written: "I will be back in 37 hours, 00 minutes, 00 seconds" I would really apreciate every help, thank you in advance! Stefan alias "Scharfheimlich" 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. 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¤t=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. 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 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? |
|||||||