I'm using a javascript "daily counter" (the code for which is at the bottom) and I'm trying to make it into a link. However, I want that link to change every day depending on what the counter reads. (e.g. I want it to link to "/tagged/DAY-10/" with the DAY-10 being the thing that changes each day and the tagged being constant.)
Now, my basic understanding of HTML lets me know that if I try to code it in as "/tagged/'counter'" or something of that nature which is named in the javascript, it simply won't work.
So, my question is, is there any way I make it into a link that changes retroactively?
Thanks so much.
<title>JavaScript Day Counter - Praveen Lobo</title>
<script type="text/javascript">
/**********************************************************************************************
* Day Counter script by Praveen Lobo (http://PraveenLobo.com/techblog/java...er-count-days/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function DayCounter(initDate, id){
****this.beginDate = new Date(initDate);
****this.container = document.getElementById(id);
****this.calculate();
}
*
DayCounter.prototype.calculate=function(){
****var secDiff = Math.round(((new Date()) - this.beginDate)/1000);
****var nextUpdate = 86400 - (secDiff % 86400);
****var tmp = (tmp = secDiff/86400) < 1? 0 : Math.floor(tmp);
****var days = (tmp < 10 ? ("" + tmp) : tmp < 100 ? ("" + tmp) : tmp);
****this.container.innerHTML =
********"Day " + days ;
****var self = this;
****setTimeout(function(){self.calculate();}, (++nextUpdate*1000));
}
*
window.onload=function(){ new DayCounter('May 19, 2012 00:00:00', 'counter'); }
*
</script>
</head>
<body>
<div id="counter">The contends of this DIV tag will be replaced by the counter</div>
</body>
Please, instead of using **** to indent your code (and I do thank you for that!), instead put [ code] ... [/code] tags around any code (without spaces in the tags) and it will retain the spaces for you (and, in fact, use a monospaced font).
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
However, when I say "/tagged/day-10" I mean the counter will go up to 90 days. So, for example, today it needs to read "/tagged/day-10" but tomorrow it should be "/tagged/day-11"
And what happens on day 91? Does it go back to 1? Or do you need to make sure you have changed the code by then?
I will assume for now that it goes back to 1.
Code:
<html>
<body>
<a id="DAYLINK" href="/tagged/DAY-1/"> Today's link </a>
<script type="text/javascript">
// month numbers in JS are 0 to 11, so subtract 1 from "human" month numbers:
var BASEDATE = new Date( 2012, 4, 29, 12, 0, 0 ); // may 29, 2012 noon
var now = new Date(); // right now
var today = new Date( now.getFullYear(), now.getMonth(), now.getDate(), 12, 0, 0 ); // noon
var msdiff = BASEDATE.getTime() - today.getTime();
var daysdiff = msdiff / ( 24 * 60 * 60 + 1000 ); // divide by ms in one day
daysdiff = Math.round( daysdiff ); // this handles crossing a Daylight Savings Time date
daysdiff = daysdiff % 90; // only allow daysdiff to range from 0 to 89
document.getElementById("DAYLINK").href = "/tagged/DAY-" + ( 1 + daysdiff ) + "/";
</script>
</body>
</html>
The code can be shorter, but I did it in steps like that to show you how/why it works.
You can use any BASEDATE you wish. Just make sure to enter it as shown: year, month-1, day. With the time being 12, 0, 0 (which is noon on that BASEDATE).
I chose NOON on the basedate and on "today" to avoid problems with one-hour offsets when we cross a daylight savings time boundary. For the same reason, I round the number of days difference. Thus we might have 17 days 23 hours rounded to 18 days or we might have 18 days 1 hour rounded to 18 days, depending on which way we crossed the DST line.
Then the % (modulo) operator ensures we get a number from 0 to 89. We want 0 to mean "BASEDATE or 90 days from BASEDATE or 180 days from BASEDATE or...".
And, finally, we add 1 to our 0 to 89 number to get 1 to 90 for your URL.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
At day 90 I'm simply done with the counter and I won't need the page anymore.
As for the cose you gave me, where should I put that? I tried adding it underneath but it became a separate link instead of just making the counter into a link.
Alright, I set up the whole thing like this (I added large spaces to help differentiate between the sections):
Code:
<title>JavaScript Day Counter - Praveen Lobo</title>
<script type="text/javascript">
/**********************************************************************************************
* Day Counter script by Praveen Lobo (http://PraveenLobo.com/techblog/javascript-counter-count-days/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function DayCounter(initDate, id){
****this.beginDate = new Date(initDate);
****this.container = document.getElementById(id);
****this.calculate();
}
*
DayCounter.prototype.calculate=function(){
****var secDiff = Math.round(((new Date()) - this.beginDate)/1000);
****var nextUpdate = 86400 - (secDiff % 86400);
****var tmp = (tmp = secDiff/86400) < 1? 0 : Math.floor(tmp);
****var days = (tmp < 10 ? ("" + tmp) : tmp < 100 ? ("" + tmp) : tmp);
****this.container.innerHTML =
********"Day " + days ;
****var self = this;
****setTimeout(function(){self.calculate();}, (++nextUpdate*1000));
}
*
window.onload=function(){ new DayCounter('May 19, 2012 00:00:00', 'counter'); }
*
</script>
</head>
<body>
<div id="counter">Day</div>
</a>
<script type="text/javascript">
// month numbers in JS are 0 to 11, so subtract 1 from "human" month numbers:
var BASEDATE = new Date( 2012, 4, 20, 0, 0, 0 ); // may 20, 2012
var now = new Date(); // right now
var today = new Date( now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0 ); // noon
var msdiff = BASEDATE.getTime() - today.getTime();
var daysdiff = msdiff / ( 24 * 60 * 60 + 1000 ); // divide by ms in one day
daysdiff = Math.round( daysdiff ); // this handles crossing a Daylight Savings Time date
daysdiff = daysdiff % 90; // only allow daysdiff to range from 0 to 89
document.getElementById("DAYLINK").href = "/tagged/DAY-" + ( 1 + daysdiff ) + "/";
</script>
My start date was May 20th, 2012 at midnight (Day 1). However, the link I'm currently getting with the dates is "/tagged/DAY--76/" and I'm not sure how to fix that.
Also, thank you so much for all your help; I know it's probably a hassle.
I had one spot of total idiocy (I was subtracting the two date back-assward) and one typo (a + which should have been *).
This code now seems to work:
Code:
<html>
<body>
<a id="DAYLINK">Whatever you want here</a>
<script type="text/javascript">
// month numbers in JS are 0 to 11, so subtract 1 from "human" month numbers:
var BASEDATE = new Date( 2012, 4, 20, 0, 0, 0 ); // may 20, 2012
var now = new Date(); // right now
var today = new Date( now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0 ); // noon
var msdiff = today.getTime() - BASEDATE.getTime();
var daysdiff = msdiff / ( 24 * 60 * 60 * 1000 ); // divide by ms in one day
daysdiff = Math.round( daysdiff ); // this handles crossing a Daylight Savings Time date
daysdiff = daysdiff % 90; // only allow daysdiff to range from 0 to 89
document.getElementById("DAYLINK").href = "/tagged/DAY-" + ( 1 + daysdiff ) + "/";
</script>
</body>
</html>
The link become /tagged/DAY-10/ for today. Assuming you wanted DAY-1 for May 20th, that is correct.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Oh...if you need it to be /tagged/DAY-07/ (for example) instead of just DAY-7 then we need to make a minor fix:
Code:
<html>
<body>
<a id="DAYLINK">Whatever you want here</a>
<script type="text/javascript">
// month numbers in JS are 0 to 11, so subtract 1 from "human" month numbers:
var BASEDATE = new Date( 2012, 4, 20, 0, 0, 0 ); // may 20, 2012
var now = new Date(); // right now
var today = new Date( now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0 ); // noon
var msdiff = today.getTime() - BASEDATE.getTime();
var daysdiff = msdiff / ( 24 * 60 * 60 * 1000 ); // divide by ms in one day
daysdiff = Math.round( daysdiff ); // this handles crossing a Daylight Savings Time date
daysdiff = daysdiff % 90; // only allow daysdiff to range from 0 to 89
var days = daysdiff + 1;
if ( days < 10 ) days = "0" + days;
document.getElementById("DAYLINK").href = "/tagged/DAY-" + days + "/";
</script>
</body>
</html>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Before you post, read our: 
