|
JavaScript - Newbie Help With Countdown Script
Similar TutorialsHi 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? 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? Thread duplicated see one above!
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 found code for a simple javascript countdown timer, and edited it to countdown to a specific date, Sept 3rd, 2011. It works perfectly... in Firefox. Unfortunately in other browsers (I've checked Safari, Chrome, Explorer), the date reverts back to the default date that the author of the script set, Dec 31st, 2020. Any idea why it would work in Firefox but not the others? What can I do to fix it? This is site where I found the code. Here's the original script: Code: <script language="JavaScript"> TargetDate = "12/31/2020 5:00 AM"; BackColor = "palegreen"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="http://mysite.com/js/countdown.js"></script> Here's what I changed it to: Code: <script language="JavaScript"> TargetDate = "09/03/2011 12:01 AM UTC-0500"; BackColor = "white"; ForeColor = "666666"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% days left"; FinishMessage = "Today is the day!"; </script> <script language="JavaScript" src="http://mysite.com/js/countdown.js"></script> (Side note: I left the countdown.js file attached to the author's server because when I placed it in my "js" folder, the countdown completely disappeared.) I've done some digging around and found that Code: <script language="JavaScript"> is somewhat obsolete, and that it should be replaced with Code: <script type="text/javascript"> But I don't have programming experience to know how to fix it-- simply replacing one with the other didn't work for me. Any ideas? Again, it works fine on Firefox, but not other browsers... I 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 everyone; I have searched all of the forums before posting this, every year I have a Halloween Party and post it with this script for the continuous countdown? Now it is not working it seems to be off by one day? Daylight savings Time Problem? Or a Leap year problem Thank you to anyone who can help me with this ... Code:
var today=new Date()
//Enter the occasion's MONTH (1-12) and DAY (1-31):
var theoccasion=new Date(today.getFullYear(),10 ,31 )
//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText="Left until our Annual Halloween Party"
var onOccasiontext="It is Little Spook Day, Happy Halloween!"
var monthtext=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion
var one_day=1000*60*60*24
var calculatediff=""
calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){ //if bday already passed
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}
//Display message accordingly
var pluraldayornot=(calculatediff==0)? "Day" : "Days"
if (calculatediff>0)
document.write("<center><b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"<br><br></b><center>")
else if (calculatediff==0)
document.write("<b>"+onOccasiontext+" <br> "+showdate+"!<br><br></b>")
Hi everyone, I have a countdown script I'd like to modify so that the countdown ends at a specific hour, and not on a particular day at midnight. I'm new to coding (Ruby), so still trying to get the hang of Javascript: Code:
var current="Expired"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countdown(yr,m,d){
theyear=yr;themonth=m;theday=d
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[m-1]+" "+d+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday==0&&dhour==0&&dmin==0&&dsec==1){
document.getElementById('counter').style.display='none';
document.getElementById('expired').style.display='block';
return
}
else{
document.getElementById('countdown_day').innerHTML=dday;
document.getElementById('countdown_hour').innerHTML=dhour;
document.getElementById('countdown_min').innerHTML=dmin;
document.getElementById('countdown_sec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday)",1000)
}
}
//MODIFY THIS LINE: enter the count down date using the format year/month/day
//e.g. countdown(2009, 03, 23);
countdown(2011, 12, 24);
I've tried to play with it by changing the following in green: Code:
function countdown(yr,m,d, h ){
theyear=yr;themonth=m;theday=d; thehour=h
.
.
.
setTimeout("countdown(theyear,themonth,theday, thehour )",1000)
.
.
countdown(2011, 12, 24, 10 )
But I don't seem to be getting anywhere. Any tips or pointers to push me in the right direction is much appreciated. Thanks! Hi, there. I'm wanting to put a gif on my site that when clicked, will display a random page for the visitor to see next. The gif name is located on my site he image/nextrandombutton.gif I have the below saved at randomlink.js and have it loaded to my site. But I can't get it to work. <!-- /* Random link button- By JavaScript Kit (http://javascriptkit.com) Over 300+ free scripts! This credit MUST stay intact for use */ //specify random links below. You can have as many as you want var randomlinks=new Array() randomlinks[0]="http://www.bigpileofdogshirts.com/vintageorangecratedogs.htm" randomlinks[1]="http://www.bigpileofdogshirts.com/mikesibley.htm" randomlinks[2]="http://www.bigpileofdogshirts.com/floraldreams.htm" randomlinks[3]="http://www.bigpileofdogshirts.com/pirates.htm" randomlinks[4]="http://www.bigpileofdogshirts.com/ilovemycartoonpupsquares-new.htm" function randomlink(){ window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)] } //--> I've tried all four of the below, but each returns a different error message. <a href="javascript:randomlink.js"><img src="images/nextrandombutton.gif"></a> <a href="javascript:randomlink.()"><img src="images/nextrandombutton.gif"></a> <a href="javascript:randomlink.js()"><img src="images/nextrandombutton.gif"></a> <a href="javascript:randomlink.()"><img border="0" src="images/nextrandombutton.gif"></a> Hi Everyone, I'm trying to place some script on my website using Dreamweaver. I have been given the script to add a review to our site from another service provider. I get the message "There is a syntax error on line 1..." I am totally unfamiliar with Java and was wondering if someone could check the code for me and tell me where the problem is? Really appreciate any help you can offer. Many thanks Cathal Code: <script type='text/javascript' language='javascript'>document.write(unescape("%3Clink rel='stylesheet' href='http://www.whatclinic.com/css/reva_reviews.css' type='text/css' media='screen' /%3E%3Cscript src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'%3E %3C/script %3E%3Cscript src='http://www.whatclinic.com/js/flXHR/flXHR.js' type='text/javascript'%3E %3C/script %3E%3Cscript src='http://www.whatclinic.com/js/external_reviews.js' type='text/javascript'%3E %3C/script %3E"));</script><script type='text/javascript' language='javascript'>document.write(unescape("%3Cdiv id='reva_reviewscoreholder' class='provider_all_Reviews'%3E%3C/div%3E%3Cscript type='text/javascript' language='javascript'%3E $(document).ready(function() {reva_showReviewScore_New(103086);});%3C/script %3E"));</script>
Hi guys, i am trying to work with google maps api my issue is with creating an array of markers count the number of marker, and then if it equal two, issue an error msg. i wrote some code, but that doesn't work obviously. and my question is how do i write that code in javascript ? GEvent.addListener(map, 'click', function (overlay, latlng) { if (placeMarker.length < 2) { pendingLatLng = latlng; setTimeout("settleClick()", 225) } else { message("You can only select 2 points."); } }); a sample click event which looks like the line below does work. what am i doing wrong ?: google.maps.event.addListener(map, 'click', function (event) {placeMarker(event.latLng); }) How can i go about showing on screen a count from an initial value to an end value over a set time period. Initial value = 0 End value = 2000 Time = 25 seconds I cant find an example of this anywhere, so I'm trying here to see if somebody can help Hello All! Brand new to Javascript here, so please forgive my basic question. I did a search but did not find exactly what I was looking for. My web site has a splash page with a large image broken into pieces and displayed in a table. I want to preload the images so the user doesn't see the table slowly "fill in" when using a slower internet connection. I have written a basic script, using the basic format of: <SCRIPT LANGUAGE="JavaScript"> Image1= new Image(50,60) Image1.src = "something.gif" Image2 = new Image(70,80) Image2.src = "somethingelse" Image3 = new Image(90,100) Image3.src = "lastsomething.gif" </SCRIPT> and saved it as a .js file and placed it in my sites root directory. Just to be safe, I've placed the images there too. (do I have to do that though?) Still, it does not seem to be working. Below is the head from my splash page. Have I missed somthing here? I thought that by putting the script reference in the head, the images would be loaded before the table came up, but such does not seem to be the case. Any help would be most appreciated. Thanks! <html> <head> <title>Finish Well Endurance</title> <meta name="generator" content="Namo WebEditor"> <link type="text/css" rel="stylesheet" href="http://www.fwe1.net/css/index.css"> <script type="text/javascript"language="javascript"src="loadimages.js"></script> </head> <body bgcolor="#464646" text="black" link="#464646" vlink="#464646" alink="#464646"> <table border="0" align="center" cellpadding="0" cellspacing="0" width="600"> 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? hello i need code for my page, i need to show time elapsing, i mean 15sec countig down to 0 could you help me? 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 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? 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" 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... 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. |
|||||||