Avatar billede mireigi Novice
05. december 2008 - 12:24 Der er 22 kommentarer og
1 løsning

Browseren hænger ved afvikling af for-løkke

Hej eksperter,

jeg er pt igang med at udvikle min egen javascript kalender, men er nået til et dødt punkt. Jeg vil gerne vise datoer i kalenderen, hvor der er oprettet et arrangement til, med en anden font end de øvrige datoer.

Til dette har jeg selv lavet en kort for-løkke som burde klare jobbet, men den hænger bare browseren.

Er der nogen som kan fortælle mig hvad fejlen er?

[CODE BEGINS]
function checkForActiveDate(date)
{
    for (i = 0; i < activeDays.length; i++)
    {
        if (activeDays[i] == date)
            return true;
    }
    return false;
}
[CODE ENDS]

activeDays indeholder i øjeblikket følgende:
activeDays[0] = new Date(2008, 9, 12);
activeDays[1] = new Date(2009, 0, 1);

input parameteren "date" er angivet således:
var dato = new Date(yearArray[i], monthArray[i], dateArray[i]);
var isActiveDate = checkForActiveDate(dato);

yearArray er en samling af årstal på formen "yyyy".
monthArray er en samling af måneder på formen "m".
dateArray er en samling af dage på formen "d".

På forhånd tak.
Avatar billede tjens Nybegynder
05. december 2008 - 15:11 #1
Måske er det fordi Date er et objekt, så == ikke sammenligner indholdet men objectreferencen.

prøv:
activeDays[i].toString() == date.toString()
Avatar billede jokkejensen Novice
05. december 2008 - 15:28 #2
== dato.toString()
Avatar billede crazysnap Seniormester
05. december 2008 - 15:39 #3
Jeg ville nok sammenligne datoer med date.getTime() så man får datoen repræsenteret som millisekunder. På den måde kan man også sammenligne om datoaen er "større" '>' eller "mindre" '<' end en anden dato (det kan man ikke hvis man sammenligner dem repræsenteret som strenge, altså ved brug af toString()). Så jeg ville gøre følgende:

function checkForActiveDate(date)
{
    for (var i = 0; i < activeDays.length; i++)
    {
        if (activeDays[i].getTime() == date.getTime())
            return true;
    }
    return false;
}

Læg desuden mærke til jeg også sørger for 'i' bliver deklareret ordenligt i for-løkken ved at tilføje 'var' foran.

Men selv uden disse rettelser burde din browser ikke hænge pga. den metode, metoden burde bare altid returnere 'false'.

Mvh.
CS
Avatar billede mireigi Novice
06. december 2008 - 15:11 #4
Mange tak for svarene. Jeg vil prøve dem af på mandag når jeg møder på arbejde igen.

Jeg vil dog gerne høre om det kan være fordi løkken eksekveres 42 gange, og der derfor opstår 42 * n tjek, hvor n er antallet af datoer i arrayet? Så med 3 datoer er det 126 tjek.
Avatar billede crazysnap Seniormester
06. december 2008 - 15:29 #5
Selvom du skulle køre løkken (udføre sammenligningen) 10000 gange ville det stadig eksekveres på et split-sekund. Så det er ihvertfald ikke her problemet ligger.

Men idet du skriver løkken skal eksekveres 42 gange har du åbenlyst ikke vist os alt scriptet og jeg tror derfor problemet ligger i noget af det du ikke har vist. :)

Men prøv at foretage de små ændringer på mandag og se om det løser noget.

Mvh.
CS
Avatar billede olebole Juniormester
06. december 2008 - 21:30 #6
<ole>

Det virker som rene gætterier. Jeg kan i hvert fald ikke lige se, hvad der skulle være i vejen med betingelsen:
    if (activeDays[i] == date)

Begge er valide Date objekter og kan derfor fint sammenlignes med gængse operatorer - herunder aritmetriske. Fejlen må ligge et andet sted i din kode  =)

/mvh
</bole>
Avatar billede tjens Nybegynder
06. december 2008 - 23:49 #7
Hermed et testscript der viser, at toString og getTime virker, mens direkte Date sammenligning fejler i MSIE og Firefox

Det slutter af med at tage tid på mange gennemløb, og tester lige om Date objektet er væsentligt langsommere end at gemme dato direkte numerisk i en int:

<html>
<head>
<script>
var activeDays = new Array();
activeDays[0] = new Date(2008, 9, 12);
activeDays[1] = new Date(2008, 11, 07);
activeDays[2] = new Date(2009, 0, 1);

var dato = new Date(2008, 11, 07);

function checkForActiveDate(date)
{
    for (i = 0; i < activeDays.length; i++)
    {
        if (activeDays[i].getTime() == date.getTime())
            return true;
    }
    return false;
}

function testdate() {

document.write("<h2>CheckForActiveDate</h2><p>" + checkForActiveDate(dato) + " (getTime version)<br />");

document.write("<h2>Date() object</h2><p>" + dato + " (dato)<br />");
document.write(activeDays[1] + " (activeDays[1])</p>");
document.write("<p>compare:" + (dato==activeDays[1] ? "TRUE" : "FALSE") + "<p>");

document.write("<h2>date.getTime()</h2><p>" + dato.getTime() + " (dato)<br />");
document.write(activeDays[1].getTime() + " (activeDays[1])</p>");
document.write("<p>compare:" + (dato.getTime()==activeDays[1].getTime() ? "TRUE" : "FALSE") + "<p>");

document.write("<h2>date.toString()</h2><p>" + dato.toString() + " (dato)<br />");
document.write(activeDays[1].toString() + " (activeDays[1])</p>");
document.write("<p>compare:" + (dato.toString()==activeDays[1].toString() ? "TRUE" : "FALSE") + "<p>");

}

var activeInt = new Array();
activeInt[0] = parseInt("20080912");
activeInt[1] = parseInt("20081207");
activeInt[2] = parseInt("20090101");

var datI = parseInt("20081207");

function checkForActiveInt(date)
{
    for (i = 0; i < activeInt.length; i++)
    {
        if (activeInt[i] == date)
            return true;
    }
    return false;
}

function testint() {
    document.write("<h2>parseInt</h2><p>" + parseInt("20081207") + " (String:20081207)</p>");
}

function init() {
    testdate();
    testint();
   
    document.write("<h2>Loop 100000 test:</h2>");
    var before = new Date();
    for (var i=0; i<100000; i++) {
        checkForActiveInt(datI)
    }
    var after = new Date();
    document.write("<p>intLoop time: " + (after.getTime()-before.getTime()) + " ms</p>");

    var before = new Date();
    for (var i=0; i<100000; i++) {
        checkForActiveDate(dato)
    }
    var after = new Date();
    document.write("<p>DateLoop time: " + (after.getTime()-before.getTime()) + " ms</p>");
}
</script>
</head>

<body onload="java script:init();">

</body>
</html>
Avatar billede olebole Juniormester
06. december 2008 - 23:55 #8
Nu ved jeg ikke lige, hvad det er, der fejler i denne kode, men det fortæller du mig jo nok om lidt:

<script type="text/javascript">
var oD_1 = new Date(2008, 9, 12),
oD_2 = new Date(2009, 0, 1);

alert(oD_1<oD_2)
alert(oD_1>oD_2)
</script>
Avatar billede mireigi Novice
07. december 2008 - 00:20 #9
#tjens:

Jeg ved godt hvorfor dit tjek fejler. Du angiver ikke datoen med eksakt tidspunkt. I den kode jeg paster herind på mandag for fejlkontrol, vil du se at jeg opretter datoerne på følgende format:
var dato = new Date(2008, 11, 7, 0, 0, 0, 0);

Dermed er der ikke varians i millisekund-delen af Date objektet, hvilket jeg vil skyde på er tilfælde med din erklæring af Date().

Eftersom alle datoer jeg anvender er angivet som værende "yyy-MM-dd" og med alle tidsvariable sat til "0", vil jeg da mene at følgende er muligt:
<html>
    <head>
        <script language="javascript" type="text/javascript">
            function checkDate(year, month, day)
            {
                var controlDate = new Date(year, month, day, 0, 0, 0, 0);

                var dateArray = new Array();
                dateArray[0] = new Date(2008, 11, 19, 0, 0, 0, 0);
                dateArray[1] = new Date(2009, 1, 2, 0, 0, 0, 0);
                dateArray[2] = new Date(2008, 3, 30, 0, 0, 0, 0);
               
                var dateFound = false;
                for(var i = 0; i < datoArray.length; i++)
                    if (dateArray[i] == controlDate)
                        dateFound = true;
                alert(dateFound);
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="java script:checkDate()" value="Tryk mig" />
    </body>
</html>
Avatar billede mireigi Novice
07. december 2008 - 00:25 #10
"datoArray.length" skal selvfølgelig være "dateArray.length" og
<input type="button" onclick="java script:checkDate()" value="Tryk mig" />
skal være
<input type="button" onclick="java script:checkDate(2009, 1, 2)" value="Tryk mig" />
Avatar billede olebole Juniormester
07. december 2008 - 00:30 #11
mireigi >> Jeg tror, du har misforstået Date objektet. Der er ikke forskel på millisekund-delen ved:
    var dato = new Date(2008, 11, 7, 0, 0, 0, 0);
- og:
    var dato = new Date(2008, 11, 7);

- men helt generelt ved jeg ikke rigtig, hvad det er tjens prøver at vise med sit eksempel. Jeg kender f.eks. ikke den koder, der tror, det ikke tager tid at kalde en metode på to objekter  =)
Avatar billede tjens Nybegynder
07. december 2008 - 00:50 #12
olebole og mireigi: Har I prøvet at køre mit eksempel på egen PC?
Ellers servicelink: http://tjens.dk/javascript/examples/DateObjectCompare.html

Jeg prøver at bevise at == på Date objekter ikke virker i IE og Firefox

Samt at det ikke er væsentligt langsommere at fortsætte med Date objekter, når nu mireigi har spurgt til performance, og er bekymret for antal loops.

I øvrigt er Firefox mere end 5 gange hurtigere end MSIE i denne test.
Avatar billede olebole Juniormester
07. december 2008 - 01:05 #13
Ja, men som sagt kan jeg ikke forestille mig den koder, der ikke klart ved, at det koster tid at kalde en metode på to objekter. Det ved spørgeren med statsgaranti også. Jeg kan slet ikke få øje på meningen med checkForActiveInt ... og hvorfor i øvrigt alt det komplet overflødige parseInt-halløj?  =)

Nu er JS jo et pudsigt, lettere skoddende, svagt typed sprog - og det er årsagen til de særheder, vi er vidner til her. Hvis du caster din Date-instans som et tal, kan du sagtens bruge equal-operatoren:

<script type="text/javascript">
// Med cowboy casting
var oD_1 = new Date(2008, 9, 12)*1,
oD_2 = new Date(2008, 9, 12)*1;

alert(oD_1==oD_2)
</script>

<script type="text/javascript">
// Med mere korrekt casting
var oD_1 = Number(new Date(2008, 9, 12)),
oD_2 = Number(new Date(2008, 9, 12));

alert(oD_1==oD_2)
</script>

Prøv også denne vedr. casting af Date objektet:

<script type="text/javascript">
var oD_1 = String(new Date(2008, 9, 12));
var oD_2 = Number(new Date(2008, 9, 12));

alert(oD_1+"\n"+oD_2)
</script>
Avatar billede olebole Juniormester
07. december 2008 - 01:07 #14
- og en sjov ting er, at '<' og '>' caster Date objektet som et tal ... det gør '=' ikke! Prøv f.eks:

<script type="text/javascript">
var oD_1 = new Date(2008, 9, 12),
oD_2 = new Date(2008, 9, 12);

alert(oD_1==oD_2)
alert(oD_1<=oD_2)
alert(oD_1>=oD_2)
</script>
Avatar billede mireigi Novice
07. december 2008 - 02:47 #15
Det er da godt at vi får slået fast hvordan et Date() objekt virker. Som sagt så linker jeg alt relevant kode på mandag når jeg er på arbejde igen.

Efter at have tænkt mig lidt om, har jeg draget den konklussion at Date() i JS har en vis lighed med DateTime() i C#. I begge sprog kan man ikke sammenligne 2 objekter af samme type direkte, da hvert objekt indeholder en hash-værdi.

Simple typer såsom byte, int, decimal/double, bool og string indholder også en hash-værdi, men for nemheds skyld er der implementeret en CompareTo() metode/funktion i objektet der afviklet når >=, ==, => og != anvendes.

Date() og DateTime() er derfor komplekse typer der ikke indholder en sådan metode / funktion per standard, hvorfor der sammenlignes på hash-værdien og denne altid vil være forskellig selvom alle variable er de samme.

Så jeg vil nok være nødsaget til at bruge getTime() eller Number(date) ved sammenligningen. Dette løser dog ikke mit nuværende problem med at browseren hænger, hvilket er underligt eftersom der i øbjeblikket anvendes "==" til sammenligning af datoer, og denne, jf. ovenstående, altid vil returnere "false".

Nu vil jeg så smutte i seng og drømme sødt om JS kode der virker. :)
Avatar billede olebole Juniormester
07. december 2008 - 05:26 #16
Jeg er som sagt ret sikker på, det slet ikke er ved den løkke, scriptet hænger. Jeg kan dog ikke lade være med at tænke på, hvad dit array 'monthArray' indeholder. Husker du, at januar skal have værdien 0, når du 'fodrer' Date objektet:
    var oDate = new Date(2009, 0, 1);  // 1. januar 2009
Avatar billede olebole Juniormester
07. december 2008 - 18:34 #17
Jeg har tænkt lidt over problemet siden i går (ehhh ... i nat! Hehe), og jeg kan stadig ikke se, hvorfor noget skulle hænge i den viste løkke. Meget tyder på en omkransende løkke, og jeg formoder, det er dér, problemet ligger. Nestede løkker ender ofte med at blive meget tunge.

Hvis du bruger 'getTime', 'Number' eller '*1', kører løkken yderst effektivt. Uden at have testet vil jeg dog mene, at du bør holde dig fra 'toString' i denne forbindelse. Jeg er ret sikker på, det tager væsentligt flere resourcer at 'parse' objektet til en strengrepræsentation, end til et tal  =)
Avatar billede mireigi Novice
08. december 2008 - 08:25 #18
Som sagt så lovede jeg at poste hele koden i dag, og her er den så.
Koden hvor der skulle være problemer, er lagt i et indlæg under dette.

<% Function Calendar() %>
<script language="javascript" type="text/javascript">
Date.prototype.getWeek = function (dowOffset) {
    /*getWeek() was developed by Nick Baicoianu at MeanFreePath: http://www.meanfreepath.com */

    dowOffset = typeof(dowOffset) == 'number' ? dowOffset : 0; //default dowOffset to zero
    var newYear = new Date(this.getFullYear(),0,1);
    var day = newYear.getDay() - dowOffset; //the day of week the year begins on
    day = (day >= 0 ? day : day + 7);
    var daynum = Math.floor((this.getTime() - newYear.getTime() - (this.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1;
    var weeknum;
    //if the year starts before the middle of a week
    if(day < 4)
    {
        weeknum = Math.floor((daynum+day-1)/7) + 1;
        if(weeknum > 52)
        {
            nYear = new Date(this.getFullYear() + 1,0,1);
            nday = nYear.getDay() - dowOffset;
            nday = nday >= 0 ? nday : nday + 7;
            /*if the next year starts before the middle of
            the week, it is week #1 of that year*/
            weeknum = nday < 4 ? 1 : 53;
        }
    }
    else
    {
        weeknum = Math.floor((daynum+day-1)/7);
    }
    return weeknum;
};
   
    function DaysInMonth(year, month)
    {
        return 32 - new Date(year, month, 32).getDate();
    }
   
    /*getFirstDayInWeek was developed by OleBole at Eksperten : http://www.eksperten.dk */
    function getFirstDayInWeek(nWeek, nYear)
    {
        var nDayCoeff = 24*60*60*1000;
        nYear = typeof nYear=="number" ? nYear : new Date().getFullYear();
        var oTestDate = new Date(nYear, 0, 1);
     
        return new Date( (oTestDate.getTime()-((oTestDate.getDay()-1)*nDayCoeff))+((nWeek-1)*(7*nDayCoeff)) );
    }
   
    function checkForActiveDate(date)
    {
        for (i = 0; i < activeDays.length; i++)
        {
            if (activeDays[i].getTime() == date.getTime())
                return true;
        }
        return false;
    }

    var today = new Date();
    var curYear = today.getFullYear();
    var curMonth = today.getMonth();

    var months = new Array();
    months[0] = "Januar";
    months[1] = "Februar";
    months[2] = "Marts";
    months[3] = "April";
    months[4] = "Maj";
    months[5] = "Juni";
    months[6] = "Juli";
    months[7] = "August";
    months[8] = "September";
    months[9] = "Oktober";
    months[10] = "November";
    months[11] = "December";
   
    var activeDays = new Array();
    activeDays[0] = new Date(2008, 9, 12);
    activeDays[1] = new Date(2009, 0, 1);
   
    function ViewDays(year, month)
    {
        var datoNu = new Date(year, month, 1);
        var datoDenne = new Date(datoNu.getFullYear(), datoNu.getMonth(), 1);
        var datoForrige = new Date(datoNu.getFullYear(), datoNu.getMonth(), 0);
        var datoNaeste = new Date(datoNu.getFullYear(), datoNu.getMonth(), (DaysInMonth(datoDenne.getFullYear(), datoDenne.getMonth())+1));
        var output = "";
       
        document.getElementById("previous").innerHTML = "<a style='cursor:pointer;' onclick='ViewDays(" + datoForrige.getFullYear() + ", " + datoForrige.getMonth() + ")'>&lt;&lt;</a>";
        document.getElementById("current").innerHTML = "<a style='cursor:pointer;' onclick='ViewMonths(" + datoDenne.getFullYear() + ")'>" + months[datoDenne.getMonth()] + " " + datoDenne.getFullYear() + "</a>";
        document.getElementById("next").innerHTML = "<a style='cursor:pointer;' onclick='ViewDays(" + datoNaeste.getFullYear() + ", " + datoNaeste.getMonth() + ")'>&gt;&gt;</a>";
       
        output += "<table width='180' border='0' cellspacing='0' cellpadding='0'>";
            output += "<tr align='right' valign='middle' height='17'>";
                output += "<td width='22'>&nbsp;</td>"
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>M</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>T</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>O</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>T</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>F</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>L</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>S</td>";
        var count = 0;
        var dateArray = new Array();
        var monthArray = new Array();
        var yearArray = new Array();
        var forrigeStartDag = 1;
        var forrigeSlutDag = 1;
       
        if(datoForrige.getWeek(1) == datoDenne.getWeek(1))
        {
            forrigeStartDag = getFirstDayInWeek(datoDenne.getWeek(1), datoDenne.getFullYear()).getDate();
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }
        else
        {
            forrigeStartDag = getFirstDayInWeek(datoForrige.getWeek(1), datoForrige.getFullYear()).getDate();
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }
       
        var denneStartDag = 1;
        var denneSlutDag = DaysInMonth(datoDenne.getFullYear(), datoDenne.getMonth());
       
        for (i = forrigeStartDag; i <= forrigeSlutDag; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoForrige.getMonth();
            yearArray[count] = datoForrige.getFullYear();
            count++;
        }
       
        for (i = denneStartDag; i <= denneSlutDag; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoDenne.getMonth();
            yearArray[count] = datoDenne.getFullYear();
            count++;
        }
       
        for (i = 1; count < 42; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoNaeste.getMonth();
            yearArray[count] = datoNaeste.getFullYear();
            count++;
        }
       
        count = 7;
        previousMonth = false;
        nextMonth = false;
        if (dateArray[0] != 1)
            previousMonth = true;
       
        for (i = 0; i < dateArray.length; i++)
        {
           
            if (dateArray[i] == 1)
                previousMonth = false;
            if (dateArray[i] == 1 && i > 7)
                nextMonth = true;
           
            var dato = new Date(yearArray[i], monthArray[i], dateArray[i]);
            var isActiveDate = checkForActiveDate(dato);
           
            var isToday = false;
            if (today.getFullYear() == dato.getFullYear() && today.getMonth() == dato.getMonth() && today.getDate() == dato.getDate())
                isToday = true;
           
            if (count == 7)
            {
                var datoUge = new Date(yearArray[i], monthArray[i], dateArray[i]);
                var udUge = "" + datoUge.getWeek(1);
                if (udUge.length == 1)
                    udUge = "&nbsp;&nbsp;" + udUge;
                output +="</tr><tr align='right' valign='middle' height='17'>";
                output += "<td style='border-right:solid 1px black; cursor:default;'>" + udUge + "</td>";
                if (previousMonth || nextMonth)
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                else
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                count = 0;
            }
            else
            {
                if (previousMonth || nextMonth)
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                else
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
            }
            count++
        }
        output +="</tr></table>";
        document.getElementById("daysInMonth").innerHTML = output;
        document.getElementById("daysInMonth").style.display = "block";
        document.getElementById("monthsInYear").style.display = "none";
        document.getElementById("yearsInDecade").style.display = "none";
    }
   
    function ViewMonths(year)
    {
        curYear = eval(year);
           
            document.getElementById("previous").innerHTML = "<a onclick='ViewMonths(" + eval(eval(year)-1) + ")' style='cursor:pointer;'>&lt;&lt;</a>";
            document.getElementById("current").innerHTML = "<a onclick='ViewDecade(" + year + ")' style='cursor:pointer;'>" + year + "</a>";
            document.getElementById("next").innerHTML = "<a onclick='ViewMonths(" + eval(eval(year)+1) + ")' style='cursor:pointer;'>&gt;&gt;</a>";
           
        output = "<table width='180' cellpadding='0' cellspacing='0' border='0'>";
            output += "<tr height='30'>";
                output += "<td align='right' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 0 + ")'>Jan</a></td>";
                output += "<td>&nbsp;</td>"
                output += "<td align='center' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 1 + ")'>Feb</a></td>";
                output += "<td>&nbsp;</td>"
                output += "<td align='left' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 2 + ")'>Mar</a></td>";
            output += "</tr>";
            output += "<tr height='30'>";
                output += "<td align='right' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 3 + ")'>Apr</a></td>";
                output += "<td>&nbsp;</td>"
                output += "<td align='center' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 4 + ")'>Maj</a></td>";
                output += "<td>&nbsp;</td>"
                output += "<td align='left' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 5 + ")'>Jun</a></td>";
            output += "</tr>";
            output += "<tr height='30'>";
                output += "<td align='right' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 6 + ")'>Jul</a></td>";
                output += "<td>&nbsp;</td>"
                output += "<td align='center' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 7 + ")'>Aug</a></td>";
                output += "<td>&nbsp;</td>"
                output += "<td align='left' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 8 + ")'>Sep</a></td>";
            output += "</tr>";
            output += "<tr height='29'>";
                output += "<td align='right' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 9 + ")'>Okt</a></td>";
                output += "<td>&nbsp;</td>"
                output += "<td align='center' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 10 + ")'>Nov</a></td>";
                output += "<td>&nbsp;</td>"
                output += "<td align='left' valign='middle'><a style='cursor:pointer;' onclick='ViewDays(" + year + ", " + 11 + ")'>Dec</a></td>";
            output += "</tr>";
        output += "</table>";
        document.getElementById("monthsInYear").innerHTML = output;
        document.getElementById("monthsInYear").style.display = "block";
        document.getElementById("yearsInDecade").style.display = "none";
        document.getElementById("daysInMonth").style.display = "none";
    }
   
    function ViewDecade(year)
    {
        var temp = new String();
        temp = "" + year;
       
        var fromYear = temp.substring(0,3) + "1";
        var toYear = eval(fromYear)+9;
       
           
            document.getElementById("previous").innerHTML = "<a onclick='ViewDecade(" + eval(fromYear-10) + ")' style='text-decoration:none; cursor:pointer;'>&lt;&lt;</a>";
            document.getElementById("current").innerHTML = "<span id='decade'>" + fromYear + " - " + toYear + "</span>";
            document.getElementById("next").innerHTML = "<a onclick='ViewDecade(" + toYear + ")' style='text-decoration:none; cursor:pointer;'>&gt;&gt;</a>";
           
        var output = "<table width='180' cellpadding='0' cellspacing='0' border='0'>";
            output +="<tr align='center' height='24'>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + fromYear + ")' style='cursor:pointer;'>" + fromYear + "</a></td>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + eval(eval(fromYear)+1) + ")' style='cursor:pointer;'>" + eval(eval(fromYear)+1) + "</a></td>";
                output +="<td>&nbsp;</td>"
            output +="</tr>";
            output +="<tr align='center' height='24'>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + eval(eval(fromYear)+2) + ")' style='cursor:pointer;'>" + eval(eval(fromYear)+2) + "</a></td>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + eval(eval(fromYear)+3) + ")' style='cursor:pointer;'>" + eval(eval(fromYear)+3) + "</a></td>";
                output +="<td>&nbsp;</td>"
            output +="</tr>";
            output +="<tr align='center' height='24'>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + eval(eval(fromYear)+4) + ")' style='cursor:pointer;'>" + eval(eval(fromYear)+4) + "</a></td>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + eval(eval(fromYear)+5) + ")' style='cursor:pointer;'>" + eval(eval(fromYear)+5) + "</a></td>";
                output +="<td>&nbsp;</td>"
            output +="</tr>";
            output +="<tr align='center' height='24'>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + eval(eval(fromYear)+6) + ")' style='cursor:pointer;'>" + eval(eval(fromYear)+6) + "</a></td>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + eval(eval(fromYear)+7) + ")' style='cursor:pointer;'>" + eval(eval(fromYear)+7) + "</a></td>";
                output +="<td>&nbsp;</td>"
            output +="</tr>";
            output +="<tr align='center' height='23'>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + eval(eval(fromYear)+8) + ")' style='cursor:pointer;'>" + eval(eval(fromYear)+8) + "</a></td>";
                output +="<td>&nbsp;</td>"
                output +="<td width='40'><a onclick='ViewMonths(" + toYear + ")' style='cursor:pointer;'>" + toYear + "</a></td>";
                output +="<td>&nbsp;</td>"
            output +="</tr>";
        output +="</table>";
        document.getElementById("yearsInDecade").innerHTML = output;
        document.getElementById("yearsInDecade").style.display = "block";
        document.getElementById("monthsInYear").style.display = "none";
        document.getElementById("daysInMonth").style.display = "none";
    }
</script>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:Verdana;">
    <tr>
        <td>
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
        <div id="calendarMenu" style="display:block;">
            <table width="180" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td id="previous" width="22" align="right"></td>
                    <td id="current" align="center"></td>
                    <td id="next" width="22" align="right"></td>
                </tr>
            </table>
        </div>
        <div id="yearsInDecade" style="display:none;">
        </div>
        <div id="monthsInYear" style="display:none;">
        </div>
        <div id="daysInMonth" style="display:block;">
        </div>
        <div style="display:block; margin-bottom:2px; margin-top:3px; font-weight:bold;" id="today">
        </div>
        </td>
    </tr>
</table>
<script language="javascript" type="text/javascript">
    ViewDays(curYear, curMonth);
    document.getElementById("today").innerHTML = "<a style='cursor:pointer;' onclick='ViewDays(" + curYear + ", " + curMonth + ")'>I dag: " + today.getDate() + "-" + curMonth + "-" + curYear + "</a><a style='color:#FFFFFF; text-decoration:none; border:solid 1px #AA0000; padding-left:17px; margin-left:1px;'>&nbsp;</a>";
</script>
<% End Function %>
Avatar billede mireigi Novice
08. december 2008 - 08:25 #19
Koden til funktionen der vist nok laver problemer.

function ViewDays(year, month)
    {
        var datoNu = new Date(year, month, 1);
        var datoDenne = new Date(datoNu.getFullYear(), datoNu.getMonth(), 1);
        var datoForrige = new Date(datoNu.getFullYear(), datoNu.getMonth(), 0);
        var datoNaeste = new Date(datoNu.getFullYear(), datoNu.getMonth(), (DaysInMonth(datoDenne.getFullYear(), datoDenne.getMonth())+1));
        var output = "";
       
        document.getElementById("previous").innerHTML = "<a style='cursor:pointer;' onclick='ViewDays(" + datoForrige.getFullYear() + ", " + datoForrige.getMonth() + ")'>&lt;&lt;</a>";
        document.getElementById("current").innerHTML = "<a style='cursor:pointer;' onclick='ViewMonths(" + datoDenne.getFullYear() + ")'>" + months[datoDenne.getMonth()] + " " + datoDenne.getFullYear() + "</a>";
        document.getElementById("next").innerHTML = "<a style='cursor:pointer;' onclick='ViewDays(" + datoNaeste.getFullYear() + ", " + datoNaeste.getMonth() + ")'>&gt;&gt;</a>";
       
        output += "<table width='180' border='0' cellspacing='0' cellpadding='0'>";
            output += "<tr align='right' valign='middle' height='17'>";
                output += "<td width='22'>&nbsp;</td>"
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>M</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>T</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>O</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>T</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>F</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>L</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>S</td>";
        var count = 0;
        var dateArray = new Array();
        var monthArray = new Array();
        var yearArray = new Array();
        var forrigeStartDag = 1;
        var forrigeSlutDag = 1;
       
        if(datoForrige.getWeek(1) == datoDenne.getWeek(1))
        {
            forrigeStartDag = getFirstDayInWeek(datoDenne.getWeek(1), datoDenne.getFullYear()).getDate();
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }
        else
        {
            forrigeStartDag = getFirstDayInWeek(datoForrige.getWeek(1), datoForrige.getFullYear()).getDate();
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }
       
        var denneStartDag = 1;
        var denneSlutDag = DaysInMonth(datoDenne.getFullYear(), datoDenne.getMonth());
       
        for (i = forrigeStartDag; i <= forrigeSlutDag; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoForrige.getMonth();
            yearArray[count] = datoForrige.getFullYear();
            count++;
        }
       
        for (i = denneStartDag; i <= denneSlutDag; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoDenne.getMonth();
            yearArray[count] = datoDenne.getFullYear();
            count++;
        }
       
        for (i = 1; count < 42; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoNaeste.getMonth();
            yearArray[count] = datoNaeste.getFullYear();
            count++;
        }
       
        count = 7;
        previousMonth = false;
        nextMonth = false;
        if (dateArray[0] != 1)
            previousMonth = true;
       
        for (i = 0; i < dateArray.length; i++)
        {
           
            if (dateArray[i] == 1)
                previousMonth = false;
            if (dateArray[i] == 1 && i > 7)
                nextMonth = true;
           
            var dato = new Date(yearArray[i], monthArray[i], dateArray[i]);
            var isActiveDate = checkForActiveDate(dato);
           
            var isToday = false;
            if (today.getFullYear() == dato.getFullYear() && today.getMonth() == dato.getMonth() && today.getDate() == dato.getDate())
                isToday = true;
           
            if (count == 7)
            {
                var datoUge = new Date(yearArray[i], monthArray[i], dateArray[i]);
                var udUge = "" + datoUge.getWeek(1);
                if (udUge.length == 1)
                    udUge = "&nbsp;&nbsp;" + udUge;
                output +="</tr><tr align='right' valign='middle' height='17'>";
                output += "<td style='border-right:solid 1px black; cursor:default;'>" + udUge + "</td>";
                if (previousMonth || nextMonth)
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                else
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                count = 0;
            }
            else
            {
                if (previousMonth || nextMonth)
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                else
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
            }
            count++
        }
        output +="</tr></table>";
        document.getElementById("daysInMonth").innerHTML = output;
        document.getElementById("daysInMonth").style.display = "block";
        document.getElementById("monthsInYear").style.display = "none";
        document.getElementById("yearsInDecade").style.display = "none";
    }
Avatar billede tjens Nybegynder
08. december 2008 - 08:54 #20
Prøv at tilføje de 2 tips fra Crazysnap i starten af tråden:

Altså "var i" i alle for loops og "så .getTime()" på alle == med date objekter.
Avatar billede mireigi Novice
08. december 2008 - 09:27 #21
Ok, det hjalp faktisk at tilføje "var i". Det virkede ikke før med kun ".getTime()".
Nu virker det uden at den hænger :)

Utroligt at så lidt kan betyde så meget.

Crazysnap, hvis du gider smide et svar, så skal du få point for at give løsningen.

I andre skal have tak for at hjælpe :)
Avatar billede crazysnap Seniormester
08. december 2008 - 09:40 #22
Hej mireigi,

Det var noget af smøre i fik diskuteret her i weekenden, men ja, hvis du har flere for-løkker efter hinanden som bruger samme variabel 'i' og 'i' ikke er deklareret ordenligt, sker der mærkelige ting.

Jeg er glad for du fik løst problemet.

Mvh.
CS
Avatar billede mireigi Novice
08. december 2008 - 09:56 #23
Jo tak, det samme er jeg. Så er det bare videre med næste skridt :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester