Ces exemples d'articles illustrent comment créer un calendrier simple de JS. Partagez-le pour votre référence. Les détails sont les suivants:
Aujourd'hui, j'ai appris à utiliser JS pour créer un calendrier annuel et j'ai examiné l'utilisation de cela. C'est un peu différent de la production d'onglets. J'ai utilisé InnerHTML pour une nouvelle utilisation. J'espère que je pourrai m'en tenir. Je vais vous donner plus de conseils de tous les maîtres JS.
Utilisation de l'Innerhtml
Utilisez maintenant le top.innerhtml = "....."; Méthode pour écrire du code HTML à l'emplacement de cet ID.
Par exemple, top.innerhtml = ""; peut apparaître un bouton dans la position correspondante du haut!
Idées de mise en œuvre du programme:
1. Semblable à l'onglet, sauf qu'il y a une div en bas;
2. Utilisation de l'Innerhtml
3. Utilisation des tableaux
① Définition: arr [0,1,2,3]
② Utilisation: arr [0]
4. Connexion de chaîne
① Fonction: concaténate deux chaînes "+"
② Problème: use () pour résoudre la priorité dans la connexion
Implémenter le code source:
Javascript:
Copiez le code comme suit: <script type = "text / javascript">
window.onload = function ()
{
var arr = [
«C'est la nouvelle année presque, partons les pétards ensemble! ',
«Je vais bientôt à l'école, malheureux! ',
«Bonne Journée des femmes! ',
'C'est assez terne en avril',
«Le travail est glorieux! ',
«Bonne journée des enfants! ',
«Quel juillet chaud!»,
«1er août Jour de l'armée!»,
«L'école recommence! '
]]
var odiv = document.getElementById ('tab');
var oli = odiv.getElementsByTagName ('li');
var otxt = odiv.getElementsByTagName ('div') [0];
var i = 0;
pour (var i = 0; i <oli.length; i ++)
{
oli [i] .index = i;
oli [i] .onMouseOver = function ()
{
pour (var i = 0; i <oli.length; i ++)
{
oli [i] .classname = '';
}
this.classname = 'actif';
otxt.innerhtml = '<h2>' + (this.index + 1) + 'activité mensuelle </h2> <p>' + arr [this.index] + '</p>';
};
}
};
</cript>
CSS:
Copiez le code comme suit: <style type = "text / css">
* {rembourrage: 0; marge: 0; }
li {list-style: aucun; }
corps {arrière-plan: # f6f9fc; Font-Family: Arial; }
.Calendar {largeur: 210px;
marge: 50px auto 0;
rembourrage: 10px 10px 20px 20px;
Contexte: # EAE9E9; }
.Calendar ul {largeur: 210px;
débordement: caché;
Padding-Bottom: 10px; }
.Calendar li {float: gauche;
Largeur: 58px;
hauteur: 54px;
marge: 10px 10px 0 0;
Border: 1px solide #fff;
Contexte: # 424242;
Couleur: #ffff;
Texte-aligne: Centre;
curseur: pointeur; }
.Calendar Li H2 {Font-Size: 20px; Tableau de rembourrage: 5px; }
.Calendar li p {Font-Size: 14px; }
.Calendar .Active {Border: 1px solide # 424242;
Contexte: #FFFF;
Couleur: # E84A7E; }
.Calendar .Active H2 {}
.Calendar .Active P {Font-Weight: Bold; }
.Calendar .Text {largeur: 178px;
rembourrage: 0 10px 10px;
Border: 1px solide #fff;
Tableau de rembourrage: 10px;
Contexte: # f1f1f1;
Couleur: # 555; }
.Calendar .Text H2 {Font-Size: 14px; marge-fond: 10px; }
.Calendar .Text P {Font-Size: 12px; hauteur de ligne: 18px; }
</ style>
HTML:
Copiez le code comme suit: <body>
<div id = "tab">
<ul>
<li> <h2> 1 </h2> <p> janvier </p> </li>
<li> <h2> 2 </h2> <p> Février </p> </li>
<li> <h2> 3 </h2> <p> mars </p> </li>
<li> <h2> 4 </h2> <p> avril </p> </li>
<li> <h2> 5 </h2> <p> peut </p> </li>
<li> <h2> 6 </h2> <p> juin </p> </li>
<li> <h2> 7 </h2> <p> juillet </p> </li>
<li> <h2> 8 </h2> <p> août </p> </li>
<li> <h2> 9 </h2> <p> septembre </p> </li>
<li> <h2> 10 </h2> <p> octobre </p> </li>
<li> <h2> 11 </h2> <p> novembre </p> </li>
<li> <h2> 12 </h2> <p> décembre </p> </li>
</ul>
<div>
</div>
</div>
</docy>
Les rendus sont les suivants:
J'espère que cet article sera utile à la programmation JavaScript de tous.