Os exemplos deste artigo ilustram como fazer um calendário simples por JS. Compartilhe para sua referência. Os detalhes são os seguintes:
Hoje aprendi a usar o JS para criar um calendário anual e revisei o uso disso. É um pouco diferente da produção de guias. Eu usei o InnerHTML para um novo uso. Espero poder cumpri -lo. Vou lhe dar mais conselhos de todos os mestres do JS.
Uso do Innerhtml
Agora use o top.innerhtml = "....."; Método para gravar o código HTML na localização deste ID.
Por exemplo, top.innerhtml = ""; pode aparecer um botão na posição correspondente da parte superior!
Idéias de implementação do programa:
1. Semelhante à guia, exceto que há uma div na parte inferior;
2. Uso de Innerhtml
3. Uso de matrizes
① Definição: arr [0,1,2,3]
② Uso: arr [0]
4. Conexão da string
① Função: concatenar duas cordas "+"
② Problema: use () para resolver a prioridade na conexão
Implementar código -fonte:
JavaScript:
Copie o código da seguinte forma: <script type = "text/javascript">
window.onload = function ()
{
var arr = [
“É quase o ano novo, vamos desencadear os fogos de artifício juntos! ',
'Vou para a escola em breve, infeliz! ',
'Feliz Dia das Mulheres! ',
'É muito chato abril',
O trabalho é glorioso! ',
'Feliz Dia das Crianças! ',
'Que julho quente!',
'1º de agosto do dia do exército!',
'A escola está começando de novo! '
];
var odiv = document.getElementById ('tab');
var oli = odiv.getElementsByTagName ('li');
var otxt = odiv.getElementsByTagName ('div') [0];
var i = 0;
for (var i = 0; i <oli.length; i ++)
{
oli [i] .index = i;
oli [i] .onMouseOver = function ()
{
for (var i = 0; i <oli.length; i ++)
{
oli [i] .className = '';
}
this.className = 'Active';
otxt.innerhtml = '<H2>'+(this.index+1)+'atividade mensal </h2> <p>'+arr [this.index]+'</p>';
};
}
};
</script>
CSS:
Copie o código da seguinte forma: <style type = "text/css">
* {preenchimento: 0; margem: 0; }
li {estilo de lista: nenhum; }
corpo {background: #f6f9fc; Fonte-família: Arial; }
.Calendar {Width: 210px;
margem: 50px automático 0;
preenchimento: 10px 10px 20px 20px;
Antecedentes: #eae9e9; }
.Calendar Ul {Width: 210px;
estouro: oculto;
Botting-Bottom: 10px; }
.Calendar Li {Float: Esquerda;
Largura: 58px;
Altura: 54px;
margem: 10px 10px 0 0;
borda: 1px sólido #fff;
Antecedentes: #424242;
Cor: #ffff;
Alinhamento de texto: centro;
Cursor: Ponteiro; }
.Calendar Li H2 {Size da fonte: 20px; Top de preenchimento: 5px; }
.Calendar Li P {Size da fonte: 14px; }
.Calendar .Active {Border: 1px Solid #424242;
Antecedentes: #ffff;
Cor: #e84A7E; }
.Calendar .Active H2 {}
.Calendar .Active P {Fonte-peso: BOLD; }
.Calendar .Text {Width: 178px;
preenchimento: 0 10px 10px;
borda: 1px sólido #fff;
Top-top: 10px;
Antecedentes: #f1f1f1;
Cor: #555; }
.Calendar .Text H2 {Font-Size: 14px; Margin-Bottom: 10px; }
.Calendar .Text p {font-size: 12px; altura de linha: 18px; }
</style>
Html:
Copie o código da seguinte forma: <body>
<div id = "tab">
<ul>
<li> <h2> 1 </h2> <p> janeiro </p> </li>
<li> <h2> 2 </h2> <p> fevereiro </p> </li>
<li> <h2> 3 </h2> <p> março </p> </li>
<li> <h2> 4 </h2> <p> abril </p> </li>
<li> <h2> 5 </h2> <p> pode </p> </li>
<li> <h2> 6 </h2> <p> junho </p> </li>
<li> <h2> 7 </h2> <p> julho </p> </li>
<li> <h2> 8 </h2> <p> agosto </p> </li>
<li> <h2> 9 </h2> <p> Setembro </p> </li>
<li> <h2> 10 </h2> <p> outubro </p> </li>
<li> <h2> 11 </h2> <p> Novembro </p> </li>
<li> <h2> 12 </h2> <p> dezembro </p> </li>
</ul>
<div>
</div>
</div>
</body>
As renderizações são as seguintes:
Espero que este artigo seja útil para a programação JavaScript de todos.