Los ejemplos de este artículo ilustran cómo hacer un calendario simple de JS. Compártelo para su referencia. Los detalles son los siguientes:
Hoy aprendí a usar JS para crear un calendario anual y revisé el uso de esto. Es un poco diferente de la producción de pestañas. He usado InnerHTML para un nuevo uso. Espero poder seguirlo. Te daré más consejos de todos los Masters JS.
Uso de Innerhtml
Ahora use top.innerhtml = "....."; Método para escribir el código HTML en la ubicación de esta ID.
Por ejemplo, top.innerhtml = ""; ¡Puede aparecer un botón en la posición correspondiente de la parte superior!
Ideas de implementación del programa:
1. Similar a la pestaña, excepto que hay un div en la parte inferior;
2. Uso de InnerHTML
3. Uso de matrices
① Definición: ARR [0,1,2,3]
② Usar: arr [0]
4. Conexión de cadena
① Función: Concatenate dos cadenas "+"
② Problema: use () para resolver la prioridad en la conexión
Implementar el código fuente:
JavaScript:
Copie el código de la siguiente manera: <script type = "text/javaScript">
Window.Onload = function ()
{
var arr = [
'Es casi el año nuevo, ¡empiamos a los petardos! '
¡Voy a ir a la escuela pronto, infeliz! '
¡Feliz día de la mujer! '
'Es bastante aburrido April',
'¡El trabajo es glorioso! '
¡Feliz día del niño! '
'¡Qué caluroso julio!',
'¡Día del 1 de agosto del ejército!',
'¡La escuela está comenzando de nuevo! '
];
var odiv = document.getElementById ('tab');
var oli = odiv.getElementsBytagName ('li');
var otxt = odiv.getElementsBytagName ('div') [0];
var i = 0;
para (var i = 0; i <oli.length; i ++)
{
oli [i] .index = i;
oli [i] .onmouseover = function ()
{
para (var i = 0; i <oli.length; i ++)
{
oli [i] .classname = '';
}
this.classname = 'activo';
otxt.innerhtml = '<h2>'+(this.index+1)+'Actividad mensual </h2> <p>'+arr [this.index]+'</p>';
};
}
};
</script>
CSS:
Copie el código de la siguiente manera: <style type = "text/css">
* {relleno: 0; margen: 0; }
li {list-style: none; }
cuerpo {fondo: #f6f9fc; Font-Family: Arial; }
.calendar {ancho: 210px;
Margen: 50px Auto 0;
relleno: 10px 10px 20px 20px;
Antecedentes: #EAE9E9; }
.calendar ul {ancho: 210px;
desbordamiento: oculto;
Botón de relleno: 10px; }
.calendar li {float: izquierda;
Ancho: 58px;
Altura: 54px;
margen: 10px 10px 0 0;
borde: 1px sólido #fff;
Antecedentes: #424242;
Color: #ffff;
Text-Align: Center;
cursor: puntero; }
.calendar li h2 {font-size: 20px; Top-top: 5px; }
.calendar li p {font-size: 14px; }
.calendar .Active {Border: 1px Solid #424242;
Antecedentes: #ffff;
Color: #E84A7E; }
.calendar. Active H2 {}
.calendar. Active P {Font-Weight: Bold; }
.calendar .text {ancho: 178px;
relleno: 0 10px 10px;
borde: 1px sólido #fff;
Top-top: 10px;
Antecedentes: #F1F1F1;
Color: #555; }
.calendar .text h2 {font-size: 14px; margen-fondo: 10px; }
.calendar .text p {font-size: 12px; Línea de altura: 18px; }
</style>
HTML:
Copie el código de la siguiente manera: <Body>
<div id = "tab">
<ul>
<li> <h2> 1 </h2> <p> enero </p> </li>
<li> <h2> 2 </h2> <p> febrero </p> </li>
<li> <h2> 3 </h2> <p> marzo </p> </li>
<li> <h2> 4 </h2> <p> abril </p> </li>
<li> <h2> 5 </h2> <p> May </p> </li>
<li> <h2> 6 </h2> <p> junio </p> </li>
<li> <h2> 7 </h2> <p> julio </p> </li>
<li> <h2> 8 </h2> <p> agosto </p> </li>
<li> <h2> 9 </h2> <p> septiembre </p> </li>
<li> <h2> 10 </h2> <p> octubre </p> </li>
<li> <h2> 11 </h2> <p> noviembre </p> </li>
<li> <h2> 12 </h2> <p> diciembre </p> </li>
</ul>
<div>
</div>
</div>
</body>
Las representaciones son las siguientes:
Espero que este artículo sea útil para la programación de JavaScript de todos.