In diesem Artikel werden Beispiele veranschaulicht, wie man einen einfachen Kalender von JS erstellt. Teilen Sie es für Ihre Referenz. Die Details sind wie folgt:
Heute habe ich gelernt, wie man JS nutzt, um einen jährlichen Kalender zu erstellen, und überprüfte die Nutzung davon. Es unterscheidet sich etwas von der Produktion von Registerkarten. Ich habe Innerhtml für eine neue Verwendung verwendet. Ich hoffe, ich kann mich daran halten. Ich werde Ihnen weitere Ratschläge von allen JS Masters geben.
Verwendung von Innerhtml
Verwenden Sie nun die obere.innerhtml = "....."; Methode zum Schreiben von HTML -Code an den Ort dieser ID.
Zum Beispiel top.innerhtml = ""; Kann eine Taste in der entsprechenden Position von Top erscheinen!
Programmimplementierungsideen:
1. ähnlich der Registerkarte, außer dass sich unten ein Div befindet;
2. Verwendung von Innerhtml
3. Verwendung von Arrays
① Definition: arr [0,1,2,3]
② Verwendung: arr [0]
4. String -Verbindung
① Funktion: Verkettieren Sie zwei Zeichenfolgen "+"
② Problem: Verwenden Sie (), um die Priorität in der Verbindung zu lösen
Quellcode implementieren:
JavaScript:
Kopieren Sie den Code wie folgt: <script type = "text/javaScript">
window.onload = function ()
{
var arr = [
»Es ist fast das neue Jahr, lass uns zusammen Feuerwerkskörper auslassen! ',
„Ich gehe bald zur Schule, unglücklich! ',
'Happy Women's Day! ',
"Es ist ziemlich langweilig April",
'Labour ist herrlich! ',
'Happy Children's Day! ',
"Was für ein heißer Juli!",
"1. August Army Day!",
'Die Schule fängt wieder an! ''
];
var odiv = document.getElementById ('tab');
var oli = odiv.getElementsByTagName ('li');
var otxt = odiv.getElementsByTagName ('div') [0];
var i = 0;
für (var i = 0; i <oli.length; i ++)
{
oli [i] .Index = i;
oli [i] .onmouseover = function ())
{
für (var i = 0; i <oli.length; i ++)
{
oli [i] .classname = '';
}
this.className = 'active';
otxt.innnerhtml = '<h2>'+(this.index+1)+'monatliche Aktivität </h2> <p>'+arr [this.index]+'</p>';
};
}
};
</script>
CSS:
Kopieren Sie den Code wie folgt: <style type = "text/css">
* {Padding: 0; Rand: 0; }
li {Listenstil: Keine; }
Körper {Hintergrund: #f6f9fc; Schriftfamilie: Arial; }
.Calendar {Breite: 210px;
Rand: 50px Auto 0;
Polsterung: 10px 10px 20px 20px;
Hintergrund: #eae9e9; }
.Calendar ul {width: 210px;
Überlauf: versteckt;
Padding-Bottom: 10px; }
.Calendar li {float: links;
Breite: 58px;
Höhe: 54px;
Rand: 10px 10px 0 0;
Grenze: 1PX Solid #fff;
Hintergrund: #424242;
Farbe: #ffff;
Text-Align: Mitte;
Cursor: Zeiger; }
.Calendar li H2 {Schriftgröße: 20px; Padding-Top: 5px; }
.Calendar li p {Schriftgröße: 14px; }
.Calendar .Active {Border: 1px Solid #424242;
Hintergrund: #ffff;
Farbe: #e84a7e; }
.Calendar .Active H2 {}
.Calendar .Active P {Schriftgewicht: BOLD; }
.Calendar .Text {width: 178px;
Polsterung: 0 10px 10px;
Grenze: 1PX Solid #fff;
Padding-Top: 10px;
Hintergrund: #f1f1f1;
Farbe: #555; }
.Calendar .Text H2 {Schriftgröße: 14px; Randboden: 10px; }
.Calendar .Text P {Schriftgröße: 12px; Zeilenhöhe: 18px; }
</style>
HTML:
Kopieren Sie den Code wie folgt: <Body>
<div id = "tab">
<ul>
<li> <h2> 1 </h2> <p> Januar </p> </li>
<li> <h2> 2 </h2> <p> Februar </p> </li>
<li> <h2> 3 </h2> <p> März </p> </li>
<li> <h2> 4 </h2> <p> April </p> </li>
<li> <h2> 5 </h2> <p> Mai </p> </li>
<li> <h2> 6 </h2> <p> June </p> </li>
<li> <h2> 7 </h2> <p> Juli </p> </li>
<li> <h2> 8 </h2> <p> August </p> </li>
<li> <h2> 9 </h2> <p> September </p> </li>
<li> <h2> 10 </h2> <p> Oktober </p> </li>
<li> <h2> 11 </h2> <p> November </p> </li>
<li> <h2> 12 </h2> <p> Dezember </p> </li>
</ul>
<div>
</div>
</div>
</body>
Die Renderings sind wie folgt:
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.