PDA

View Full Version : CountUp script



balki
06-25-2011, 06:32 PM
Hi :)
I have a little difficult with converting days to years and months. In the folowing script I would like to calculate exact years and months, but I can't :(
Sort of

dyear=Math.floor(dd/(60*60*1000*24*365)*1)
dmonth=Math.floor(dd/(60*60*1000*24*12)/(dyear*12))
Can you help me :confused:


<p align="left"><script>

function setcountup(theyear,themonth,theday){
yr=theyear;mo=themonth;da=theday
}

//////////CONFIGURE THE countup SCRIPT HERE//////////////////

//STEP 1: Configure the date to count up from, in the format year, month, day:
//This date should be less than today
setcountup(1960,7,13)

//STEP 2: Configure text to be attached to count up
var displaymessage=" from bla-bla."

//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countup area
var countupwidth='95%'
var countupheight='20px' //applicable only in NS4
var countupbgcolor='#ffffff'
var opentags='<span style="font-size:12.0pt><font face="Verdana"><font color="#4B7EFF"><b>'
var closetags='</b></font></font></span>'

//////////DO NOT EDIT PASS THIS LINE//////////////////

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countup(){
if (document.layers)
document.countupnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countupie") : countupie
countup()
}

if (document.all||document.getElementById)
document.write('<span id="countupie" style="width:'+countupwidth+'; background-color:'+countupbgcolor+'"></span>')

window.onload=start_countup


function countup(){
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
paststring=montharray[mo-1]+" "+da+", "+yr
dd=Date.parse(todaystring)-Date.parse(paststring)
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 (document.layers){
document.countupnsmain.document.countupnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds "+displaymessage+closetags)
document.countupnsmain.document.countupnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" mins, и "+dsec+" secs"+displaymessage+closetags

setTimeout("countup()",1000)
}
</script></p>

jscheuer1
06-25-2011, 07:25 PM
Don't. If you have a Date Object, you may get the month number like so:


dmonth = dObj.getMonth();

That will get you a month number 0 (for Jan) through 11 (for Dec). For example:


<script type="text/javascript">
var oldDate = new Date(1954,8,25),
now = new Date(),
difY = now.getFullYear() - oldDate.getFullYear(),
difM = now.getMonth() - oldDate.getMonth();
if(difM < 0){
--difY;
difM += 12;
}
alert('Years: ' + difY + ', Months: ' + difM);
</script>

It's more complicated for days, but something similar can be worked out. From the remaining dates (which must now be brought to the current year if they aren't already*) one can use the month and day differences to calculate the exact number of days and to adjust the month number if necessary.

I know it's tempting to just subtract one date from the other and then use only math from there. But then you would need to do a lot of stuff to account for different length months and leap years. Not to mention leap seconds.

Alternatively, if you so choose you can use just Hours, Minutes, and Seconds. Those have no special considerations and can be accounted for by simply subtracting and converting via division.

*However you do it, you need to remove the largest units already calculated before calculating the nest smaller number of units.

balki
06-25-2011, 09:58 PM
Mm, thanks for the respond. Sorry for my english, but if I understand correctly I don't have Date Object. I understand the problem with diferent count of months per year and days per month, but I can repair it manipulating original date.
Can you explain me how to convert to years, please :)

balki
06-25-2011, 10:12 PM
PP: Maybe this is the resolution - keith-wood.name/countdown.html#since ? But I can't make the compact variant :(

jscheuer1
06-26-2011, 05:06 AM
Works fine here:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown - Count Up Demo</title>
<style type="text/css">
@import "jquery.countdown.css";

#tDay { width: 330px; height: 45px; font: normal 90% verdana, arial, helvetica, sans-serif; }
#tDay .countdown_amount {font-size: 140%; width: 100%; text-align: center; display: block; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var oldDay = new Date(1954, 8, 15);
$('#tDay').countdown({since: oldDay, format: 'YOWDHMS', compact: true, description: 'Since ' + oldDay.toLocaleDateString()});
});
</script>
</head>
<body>
<h1>jQuery Countdown - Count Up Demo</h1>
<div id="tDay"></div>
</body>
</html>

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

balki
06-26-2011, 09:24 AM
This is the page of my site - souhssz.webnode.com/tjestova/brojach/

I want to use bulgarian view for compact variant.
In your code I wrote full path of jquery.countdown.js address, but I miss something - it wasn't work...

Thanks!

jscheuer1
06-26-2011, 09:43 AM
You still need the main countdown script. I see it's on Keith's server. So you can just add (highlighted):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown-bg.js"></script>

<script type="text/javascript">
$(function () {
var oldDay = new Date(1954, 8, 15);
$('#tDay').countdown({since: oldDay, format: 'YOWDHMS', compact: true, description: 'Since ' + oldDay.toLocaleDateString()});
});
</script>

But you should host your own copies of the script. Download the archive:

jquery.countdown.package-1.5.9.zip

from http://keith-wood.name/countdown.html#since and use its files on your server.

balki
06-26-2011, 11:43 AM
Thanks!
I use my host and change jquery.countdown-bg.js for bulgarian language. How to make text in one row, and is there a way to show the clock separate with "hours", "minutes" and "seconds" (not ":")?

jscheuer1
06-26-2011, 01:58 PM
For the first question, get rid of this from the on page style section:


#tDay .countdown_amount {text-align: left; display: block; }

About the second question, use the layout property:

http://keith-wood.name/countdownRef.html#layout

Here's an example:


<script type="text/javascript">
$(function () {
var oldDay = new Date(1954, 8, 15);
$('#tDay').countdown({since: oldDay, format: 'YOWDHMS', layout:'{yn} years, {on} months, '+
'{wnn} weeks, {dnn} days, {hnn} hours, {mnn} minutes, {snn} seconds - {desc}', compact: true, description: 'Since ' + oldDay.toLocaleDateString()});
});
</script>

Of course you would want to use the Bulgarian words for years, months, etc. Like change years in the above to години, months to месеца and so on.

Or, this seems to work out well and has the added advantage of getting the singular and plural forms of the labels right:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown - Count Up Demo</title>
<style type="text/css">
#tDay {font: normal 90% verdana, arial, helvetica, sans-serif;}
#tDay #lctime {text-transform: lowercase;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript" src="jquery.countdown-bg.js"></script>
<script type="text/javascript">
$(function () {
var oldDay = new Date(1954, 8, 15);
$('#tDay').countdown({since: oldDay, format: 'YOWDHMS', layout:'<span id="lctime">{yn} {yl}, {on} {ol}, '+
'{wnn} {wl}, {dnn} {dl}, {hnn} {hl}, {mnn} {ml}, {snn} {sl} -</span> {desc}', description: 'Since ' + oldDay.toLocaleDateString()});
});
</script>
</head>
<body>
<h1>jQuery Countdown - Count Up Demo</h1>
<div id="tDay"></div>
</body>
</html>

Note: No longer needs or uses compact: true, in fact, that would break it.

balki
06-26-2011, 04:11 PM
Thank's a lot John! It's perfect :)