Changer la couleur d'1 element au click html

Fermé
muntu - 28 mars 2012 à 13:57
 Utilisateur anonyme - 28 mars 2012 à 14:12
Bonjour,


Voici mon code ci-dessous : Il affiche un calendrier. Ce que j'aimerai faire c'est de changer la couleur de l'élément au click et créer un petit tableau en bas pour récupérer les élément sellectinnés. Merci d'avance !


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script LANGUAGE="JavaScript">

var HTMLCode = "";
var DaysList = new Array("Jour_Vide", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim");
var MonthsList = new Array("Mois_Vide", "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
var MonthLength = new Array("Mois_longueur_vide",31,29,31,30,31,30,31,31,30,31,30,31);

var QueryDate = 0; /* Jour demande (date)*/
var QueryMonth = 0; /* Mois demande*/
var QueryYear = 0; /* Annee demandee*/
var QueryDay = 0; /* Jour de la semaine du jour demande, inconnu*/
var FirstDay = 0; /* Jour de la semaine du 1er jour du mois*/
var WeekRef = 0; /* Numerotation des semaines*/
var WeekOne = 0; /* Numerotation des semaines*/

var Today = new Date();
var TodaysYear = Today.getYear();
var TodaysMonth = Today.getMonth() + 1;
var TodaysDate = Today.getDate();
var TodaysDay = Today.getDay() + 1;
if (TodaysYear < 2000) { TodaysYear += 1900; }

function CheckData()
{
QueryDate = document.Cal.Date.selectedIndex + 1;
QueryMonth = document.Cal.Month.selectedIndex + 1;
QueryYear = (document.Cal.Century.selectedIndex + 15) * 100 + document.Cal.Year.selectedIndex;
MonthLength[2] = CheckLeap(QueryYear);

if ((QueryYear * 10000 + QueryMonth * 100 + QueryDate) < 15821220)
{
alert("Vous avez choisi une date antérieure au 20 décembre 1582, hors du calendrier Grégorien. \nVeuillez sélectionner une date plus récente.");
document.Cal.reset();
CheckData();
}
else if (MonthLength[QueryMonth] < QueryDate) /* on verifie si la date est coherente*/
{
alert("Il n'y a pas " + QueryDate + " jours en " + MonthsList[QueryMonth] + " " + QueryYear + " mais " + MonthLength[QueryMonth] + ". \nVeuillez choisir une autre date.");
document.Cal.reset();
CheckData();
}
else { DisplaySchedule(); }

}
function CheckLeap(yy)
{
if ((yy % 100 != 0 && yy % 4 == 0) || (yy % 400 == 0)) { return 29; }
else { return 28; }
}

function DefWeekNum(dd)
{
numd = 0;
numw = 0;
for (n=1; n<QueryMonth; n++)
{
numd += MonthLength[n];
}
numd = numd + dd - (9 - DefDateDay(QueryYear,1,1));
numw = Math.floor(numd / 7) + 1;

if (DefDateDay(QueryYear,1,1) == 1) { numw++; }
return numw;
}

function DefDateDay(yy,mm,dd)
{
return Math.floor((Date2Days(yy,mm,dd)-2) % 7) + 1;
}

function Date2Days(yy,mm,dd)
{
if (mm > 2)
{
var bis = Math.floor(yy/4) - Math.floor(yy/100) + Math.floor(yy/400);
var zy = Math.floor(yy * 365 + bis);
var zm = (mm-1) * 31 - Math.floor(mm * 0.4 + 2.3);
return (zy + zm + dd);
}
else
{
var bis = Math.floor((yy-1)/4) - Math.floor((yy-1)/100) + Math.floor((yy-1)/400);
var zy = Math.floor(yy * 365 + bis);
return (zy + (mm-1) * 31 + dd);
}
}

function DisplaySchedule()
{
HTMLCode = "<table cellspacing=0 cellpadding=3 border=3 bordercolor=#000033>";
QueryDay = DefDateDay(QueryYear,QueryMonth,QueryDate);
WeekRef = DefWeekNum(QueryDate);
WeekOne = DefWeekNum(1);
HTMLCode += "<tr align=center><td colspan=8 class=TITRE><b>" + MonthsList[QueryMonth] + " " + QueryYear + "</b></td></tr><tr align=center>";

for (s=1; s<8; s++)
{
if (QueryDay == s) { HTMLCode += "<td><b><font color=#ff0000>" + DaysList[s] + "</font></b></td>"; }
else { HTMLCode += "<td><b>" + DaysList[s] + "</b></td>"; }
}

HTMLCode += "<td><b><font color=#888888>Sem</font></b></td></tr>";
a = 0;

for (i=(1-DefDateDay(QueryYear,QueryMonth,1)); i<MonthLength[QueryMonth]; i++)
{
HTMLCode += "<tr align=center>";
for (j=1; j<8; j++)
{
if ((i+j) <= 0) { HTMLCode += "<td> </td>"; }
else if ((i+j) == QueryDate) { HTMLCode += "<td><b><font color=#ff0000>" + (i+j) + "</font></b></td>"; }
else if ((i+j) > MonthLength[QueryMonth]) { HTMLCode += "<td> </td>"; }
else { HTMLCode += "<td>" + (i+j) + "</td>"; }
}

if ((WeekOne+a) == WeekRef) { HTMLCode += "<td><b><font color=#00aa00>" + WeekRef + "</font></b></td>"; }
else { HTMLCode += "<td><font color=#888888>" + (WeekOne+a) + "</font></td>"; }
HTMLCode += "</tr>";
a++;
i = i + 6;
}

Calendrier.innerHTML = HTMLCode + "</table>";
}
</script></p>
</center></div>
</form>
<title>Untitled</title>
</head>
<body>
<!--DEBUT CALENDRIER-->

<form name="Cal">
<div align="center"><div align="center"><center><h3><font color="#008000">CALENDRIER
PERPETUEL</font></h3>
</center></div><script language="JavaScript1.2" type="text/javascript">
DateText = "<select name=\"Date\">"
for (d=1; d<32; d++)
{
DateText += "<option";
if (d == TodaysDate) { DateText += " SELECTED"; }
DateText += ">";
if (d < 10) { DateText += "0"; }
DateText += d + "</option>";
}
DateText += "</select>";
MonthText = "<select name=\"Month\">"
for (m=1; m<13; m++)
{
MonthText += "<option";
if (m == TodaysMonth) { MonthText += " SELECTED"; }
MonthText += ">";
MonthText += MonthsList[m] + "</option>";
}
MonthText += "</select>";
CenturyText = "<select name=\"Century\">"
for (c=15; c<25; c++)
{
CenturyText += "<option";
if (c == Math.floor(TodaysYear / 100)) { CenturyText += " SELECTED"; }
CenturyText += ">" + c + "</option>";
}
CenturyText += "</select>";
YearText = "<select name=\"Year\">";
for (y=0; y<100; y++)
{
YearText += "<option";
if (y == (TodaysYear - Math.floor(TodaysYear / 100) * 100)) { YearText += " SELECTED"; }
YearText += ">";
if (y < 10) { YearText += "0"; }
YearText += y + "</option>";
}
YearText += "</select>";
document.write (DateText + MonthText + CenturyText + YearText);
</script>
</div><dl>
<dd align="left"><div align="center"><center><p><input type="button" value=" OK "
style="font-family: Arial,Verdana,Helvetica;font-size: 11px; color:#330033 ;font-weight:bold;background-color: #FFCC00;
"
onClick="CheckData()"> <input type="button" value=" Revenir à la date courante "
style="font-family: Arial,Verdana,Helvetica;font-size: 11px; color:#330033 ;font-weight:bold;background-color: #FFCC00;"
onClick="document.Cal.reset();CheckData()"> </p>
</center></div></dd>
<dd><br>
<div id="Calendrier" align="center"></div></dd>
</dl>
</form>
<script language="JavaScript1.2" type="text/javascript">CheckData()</script>
<!--FIN CALENDRIER-->

</body>
</html>
A voir également:

3 réponses

Utilisateur anonyme
28 mars 2012 à 13:59
Pour les codes couleurs en HTML c'est :

https://www.code-couleur.com/
0
Merci Géo !

Mais c'est pas ce que je cherche. je veux changer la couleur quand je clique sur un élément. et recépérer le contenu de l'élément cliqué.

merci pour vos reponses !!!
0
Utilisateur anonyme
28 mars 2012 à 14:12
De rien. Désolé mais là maintenant je ne sais plus ><
0