Français
中文(简体)
中文(繁体)
한국어
日本語
English
Português
Español
Русский
العربية
Indonesia
Deutsch
Français
ภาษาไทย
Page d'accueil
Téléchargement de code source
Liens de programmation
Ressources pour la création de sites
Livres et tutoriels
Tutoriel de conception de pages Web
Tutoriel de programmation réseau
Jeux mobiles
Logiciels mobiles
Article
Page d'accueil
>
Tutoriel de conception de sites Web
>
Tutoriel Javascript
Un très joli calendrier scénarisé
Auteur:Eve Cole
Date de mise à jour:2009-06-08 18:33:56
<Script LANGUAGE="JavaScript"> var mois = new Array("一", "二", "三","四", "五", "六", "七", "八", "九", "十", "十一", "十二"); var joursInMonth = nouveau tableau (31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31); var jours = new Array("日", "一", "二", "三", "四", "五", "六"); var classeTemp; var aujourd'hui=new getToday(); var année = aujourd'hui.année; var mois=aujourd'hui.mois; var newCal; function getDays(mois, année) { if (1 == mois) return ((0 == année % 4) && (0 != (année % 100))) ||(0 == année % 400) ? 29 : 28 ; sinon, retourne joursInMonth[mois] ; } function getToday() { this.now = new Date(); this.year = this.now.getFullYear(); this.month = this.now.getMonth(); ce.jour = ceci.now.getDate(); } function Calendar() { newCal = new Date(année, mois, 1); aujourd'hui = nouveau getToday(); var jour = -1 ; var startDay = newCal.getDay(); var endDay=getDays(newCal.getMonth(), newCal.getFullYear()); var quotidiennement = 0 ; if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth())) { day = aujourd'hui.day; } var caltable = document.all.caltable.tBodies.calendar; var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear()); for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++) for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++) { var cell = caltable.rows[intWeek]. cellules[intDay] ; var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1); if ((intDay == startDay) && (0 == daily)){ daily = 1;} var daytemp=daily<10?("0"+daily):(daily); var d="<"+newCal.getFullYear()+"-"+montem+"-"+daytemp+">"; if(day==daily) cell.className="DayNow"; sinon if(intDay==6) cell.className = "DaySat"; sinon if (intDay==0) cell.className ="DaySun"; sinon cell.className="Jour"; if ((daily > 0) && (daily <= intDaysInMonth)) { cell.innerText = daily; quotidiennement++; } else { cell.className="CalendarTD"; cellule.innerText = ""; } } document.all.year.value=année; document.all.month.value=mois+1; } function subMonth() { if ((mois-1)<0) { mois=11; année=année-1 ; } else { mois=mois-1; } Calendrier(); } function addMonth() { if((mois+1)>11) { mois=0; année=année+1 ; } else { mois=mois+1; } Calendrier(); } function setDate() { if (document.all.month.value<1||document.all.month.value>12) { alert("月的有效范围在1-12之间!"); retour; } année=Math.ceil(document.all.year.value); mois=Math.ceil(document.all.month.value-1); Calendrier(); } </Script> <Script> function boutonOver() { var obj = window.event.srcElement; obj.runtimeStyle.cssText = "couleur de fond :#FFFFFF" ; // obj.className="Survol"; } function boutonOut() { var obj = window.event.srcElement; window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300); } </Script> <Style> Entrée {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000 ;} .Calendar {famille de police : verdana ; décoration de texte : aucune ; largeur : 170 ; couleur d'arrière-plan : #C0D0E8 ; taille de police : 9 pt ; bordure : 0px pointillé #1C6FA5 ;} .CalendarTD {famille de police : verdana ; taille de police : 7 pt ; couleur : #000000 ; couleur d'arrière-plan : # f6f6f6 ; hauteur : 20 px ; poids de la police : normal ; hauteur : 24 px ; alignement du texte : centre ; couleur : # 333333 ; décoration du texte : aucune ; couleur d'arrière-plan : # A4B9D7 ; largeur de la bordure supérieure : 1 px ; largeur de la bordure droite : 1 px ; bordure-bottom-width : 1px ;border-left-width : 1px;border-bottom-style :1px;border-top-color : #999999 ;border-right-color : #999999 ;border-bottom-color : #999999 ;border-left-color: #999999;} .Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align : centre;} .DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12 %;} .DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12% ;} .DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;} .DayTitle {police -famille : verdana ; taille de police : 9 pt ; taille : 9 pt ; couleur : #FF0000 ; décoration du texte : aucune ; couleur d'arrière-plan : # C0D0E8 ; alignement du texte : centre ; hauteur : 20 px ; largeur : 12 % ;} .DaySunTitle {famille de polices : verdana ; taille de police : 9pt;couleur: #FF0000;décoration du texte: aucune;couleur d'arrière-plan: #C0D0E8;alignement du texte: centre;hauteur: 20px;largeur: 12%;} .DayButton {famille de polices: Webdings;taille de police: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;} </Style> <table border="0" cellpadding="0" Cellpacing="1" class="Calendrier" id="caltable"> <thead> <tr align="center" valign="middle"> <td colspan="7" class="Title"> <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode== 13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[ ^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate ()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9 ]/g,'')"> par <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a> </td> </tr> <tr align="center" valign="middle"> <Script LANGUAGE="JavaScript"> document.write ("<TD class=DaySunTitle id=diary >" + jours[0] + "</TD>"); for (var intLoop = 1; intLoop < jours.length-1;intLoop++) document.write("<TD class=DayTitle id=diary>" + jours[intLoop] + "</TD>"); document.write("<TD class=DaySatTitle id=diary>" + jours[intLoop] + "</TD>"); </Script> </TR> </thead> <TBODY border=1 cellpacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()"> <Script LANGUAGE="JavaScript" > for (var intWeeks = 0; intWeeks < 6; intWeeks++) { document.write("<TR style='cursor:hand'>"); for (var intDays = 0; intDays < jours.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>"); document.write("</TR>"); } </Script> </TBODY> </TABLE> <Script LANGUAGE="JavaScript"> Calendrier(); </Script>
Articles connexes
Une discussion approfondie sur JavaScript
2022-06-27
Débogage des erreurs JavaScript
2010-08-08
Comparaison du framework JavaScript
2010-04-28
Discussion sur les objets JavaScript
2009-12-12
Discussion sur les objets JavaScript
2009-12-10
Comprendre les tableaux Javascript
2009-08-25
CSS multisite javascript
2009-06-12
Comment transmettre des paramètres aux fichiers JavaScript en JavaScript
2009-06-11
fonction personnalisée javascript
2009-06-11
Utilisez JavaScript avec prudence avec
2009-06-11
pagination javascript
2009-06-09
Effet de diaporama JavaScript
2009-06-08