SlideShare uma empresa Scribd logo
1 de 8
PáginasWeb com: HTML, CSS e JavaScript
Profª. Marlene da Silva Maximiano de Oliveira
& Profª. Alessandra Aparecida da Silva
JavaScript –Trabalhando com Data e Hora
// Formata a data e a hora (note o mês + 1)
var str_data = dia + '/' + (mes+1) + '/' + ano4;
var str_hora = hora + ':' + min + ':' + seg;
// Mostra o resultado
document.write('Hoje é ' + str_data + ' às ' + str_hora);
var data = new Date();
var dias = new Array(
'domingo','segunda-feira','terça-feira','quarta-feira','quinta-
feira','sexta-feira','sábado'
);
document.write("<br>" + dias[data.getDay()]);
// Note a pegadinha do mês, que inicia com zero e não um. Se você
não somar 1, janeiro aparecerá como 0
//e dezembro como 11. Já o dia do mês vai de 1 a 31, não é preciso
somá-lo.
//O dia da semana também inicia em zero, representando o domingo,
e vai até seis (sábado).
//Use um array para mostrar o dia da semana por extenso: //
</script>
<script>
// Obtém a data/hora atual
var data = new Date();
// Guarda cada pedaço em uma variável
var dia = data.getDate(); // 1-31
var dia_sem = data.getDay(); // 0-6 (zero=domingo)
var mes = data.getMonth(); // 0-11 (zero=janeiro)
var ano2 = data.getYear(); // 2 dígitos
var ano4 = data.getFullYear(); // 4 dígitos
var hora = data.getHours(); // 0-23
var min = data.getMinutes(); // 0-59
var seg = data.getSeconds(); // 0-59
var mseg = data.getMilliseconds(); // 0-999
var tz = data.getTimezoneOffset(); // em minutos
Datas – Exemplo 1
Exemplo no navegador
horaImprimivel = hora2 + " : " + minuto2 + " : " + segundo2
document.form_relogio.relogio.value = horaImprimivel
setTimeout("moveRelogio()",1000)
}
</script>
</head>
<body onload="moveRelogio()">
Vemos aqui o relógio funcionando...
<form name="form_relogio">
<input type="text" name="relogio" size="10">
</form>
</body>
</html>
if (segundo < 10){
segundo2 = "0" + segundo}
else{
segundo2 = segundo}
if (hora < 10){
hora2 = "0" + hora}
else{
hora2 = hora}
if (minuto < 10){
minuto2 = "0" + minuto}
else{
minuto2 = minuto}
<html>
<head>
<title>Relogio com Javascript</title>
<script language="JavaScript">
function moveRelogio(){
momentoAtual = new Date()
hora = momentoAtual.getHours()
minuto = momentoAtual.getMinutes()
segundo = momentoAtual.getSeconds()
Datas – Exemplo 2
Exemplo no navegador
<Script Language="JavaScript">
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday = mydate.getDate();
myyear = mydate.getFullYear();
weekday = myweekday;
if(myday == 0)
day = " Domingo, "
else if(myday == 1)
day = " Segunda - Feira, "
else if(myday == 2)
day = "Terça - Feira, "
else if(myday == 3)
day = " Quarta - Feira, "
else if(myday == 4)
day = " Quinta - Feira, "
else if(myday == 5)
day = " Sexta - Feira, "
else if(myday == 6)
day = " Sábado, "
if(mymonth == 0)
month = "Janeiro "
else if(mymonth ==1)
month = "Fevereiro "
else if(mymonth ==2)
month = "Março "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Maio "
else if(mymonth ==5)
month = "Junho "
else if(mymonth ==6)
month = "Julho "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setembro “
else if(mymonth ==9)
month = "Outubro "
else if(mymonth ==10)
month = "Novembro "
else if(mymonth ==11)
month = "Dezembro "
document.write("<font face=arial,
size=12>"+ day);
document.write(myweekday+" de
"+month+ " de " + myyear+ "."+
"</font>");
// -->
</script>
Datas – Exemplo 3
Exemplo no navegador

Mais conteúdo relacionado

Mais de Centro Paula Souza

Mais de Centro Paula Souza (20)

15 CSS - Trabalhando com fontes
15 CSS - Trabalhando com fontes15 CSS - Trabalhando com fontes
15 CSS - Trabalhando com fontes
 
14 CSS Introdução
14 CSS Introdução14 CSS Introdução
14 CSS Introdução
 
07 Modelagem de banco de dados: Modelo Físico
07 Modelagem de banco de dados: Modelo Físico07 Modelagem de banco de dados: Modelo Físico
07 Modelagem de banco de dados: Modelo Físico
 
06 Modelagem de banco de dados: Modelo Lógico
06  Modelagem de banco de dados: Modelo Lógico06  Modelagem de banco de dados: Modelo Lógico
06 Modelagem de banco de dados: Modelo Lógico
 
05 Modelagem de banco de dados: Modelo Conceitual
05  Modelagem de banco de dados: Modelo Conceitual05  Modelagem de banco de dados: Modelo Conceitual
05 Modelagem de banco de dados: Modelo Conceitual
 
08 Trabalhando com mais de uma tabela (Relacionamento)
08 Trabalhando com mais de uma tabela (Relacionamento)08 Trabalhando com mais de uma tabela (Relacionamento)
08 Trabalhando com mais de uma tabela (Relacionamento)
 
07 Consultando os dados de uma tabela
07 Consultando os dados de uma tabela07 Consultando os dados de uma tabela
07 Consultando os dados de uma tabela
 
06 Trabalhando com registros
06 Trabalhando com registros06 Trabalhando com registros
06 Trabalhando com registros
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
 
09 Java Script - As formas de usar
09  Java Script  - As formas de usar09  Java Script  - As formas de usar
09 Java Script - As formas de usar
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos
 
08 Java Script Introdução - Teoria
08 Java Script   Introdução  - Teoria08 Java Script   Introdução  - Teoria
08 Java Script Introdução - Teoria
 
04 modelagem de dados introdução
04  modelagem de dados   introdução04  modelagem de dados   introdução
04 modelagem de dados introdução
 
03 Criando um banco de dado no Microsoft Access
03 Criando um banco de dado no Microsoft Access03 Criando um banco de dado no Microsoft Access
03 Criando um banco de dado no Microsoft Access
 
02 banco de dados relacional
02 banco de dados relacional02 banco de dados relacional
02 banco de dados relacional
 
01 noções de banco de dados
01 noções de banco de dados01 noções de banco de dados
01 noções de banco de dados
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
06 html links e frames
06 html   links e frames06 html   links e frames
06 html links e frames
 
05 html tabelas
05 html   tabelas05 html   tabelas
05 html tabelas
 

Último

Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
AntonioVieira539017
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
TailsonSantos1
 
19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf
marlene54545
 
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTeoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
TailsonSantos1
 

Último (20)

Texto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.pptTexto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.ppt
 
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
 
migração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenosmigração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenos
 
EDUCAÇÃO ESPECIAL NA PERSPECTIVA INCLUSIVA
EDUCAÇÃO ESPECIAL NA PERSPECTIVA INCLUSIVAEDUCAÇÃO ESPECIAL NA PERSPECTIVA INCLUSIVA
EDUCAÇÃO ESPECIAL NA PERSPECTIVA INCLUSIVA
 
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
 
Seminário Biologia e desenvolvimento da matrinxa.pptx
Seminário Biologia e desenvolvimento da matrinxa.pptxSeminário Biologia e desenvolvimento da matrinxa.pptx
Seminário Biologia e desenvolvimento da matrinxa.pptx
 
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptxSlides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 
Jogo de Rimas - Para impressão em pdf a ser usado para crianças
Jogo de Rimas - Para impressão em pdf a ser usado para criançasJogo de Rimas - Para impressão em pdf a ser usado para crianças
Jogo de Rimas - Para impressão em pdf a ser usado para crianças
 
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptxSlides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
 
LISTA DE EXERCICIOS envolveto grandezas e medidas e notação cientifica 1 ANO ...
LISTA DE EXERCICIOS envolveto grandezas e medidas e notação cientifica 1 ANO ...LISTA DE EXERCICIOS envolveto grandezas e medidas e notação cientifica 1 ANO ...
LISTA DE EXERCICIOS envolveto grandezas e medidas e notação cientifica 1 ANO ...
 
Cartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxCartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptx
 
Projeto de Extensão - DESENVOLVIMENTO BACK-END.pdf
Projeto de Extensão - DESENVOLVIMENTO BACK-END.pdfProjeto de Extensão - DESENVOLVIMENTO BACK-END.pdf
Projeto de Extensão - DESENVOLVIMENTO BACK-END.pdf
 
19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf
 
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPlano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
 
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTeoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
 
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdfRecomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
 
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdfPROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
 
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
 

12 Java Script - Trabalhando com datas

  • 1. PáginasWeb com: HTML, CSS e JavaScript Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
  • 3. // Formata a data e a hora (note o mês + 1) var str_data = dia + '/' + (mes+1) + '/' + ano4; var str_hora = hora + ':' + min + ':' + seg; // Mostra o resultado document.write('Hoje é ' + str_data + ' às ' + str_hora); var data = new Date(); var dias = new Array( 'domingo','segunda-feira','terça-feira','quarta-feira','quinta- feira','sexta-feira','sábado' ); document.write("<br>" + dias[data.getDay()]); // Note a pegadinha do mês, que inicia com zero e não um. Se você não somar 1, janeiro aparecerá como 0 //e dezembro como 11. Já o dia do mês vai de 1 a 31, não é preciso somá-lo. //O dia da semana também inicia em zero, representando o domingo, e vai até seis (sábado). //Use um array para mostrar o dia da semana por extenso: // </script> <script> // Obtém a data/hora atual var data = new Date(); // Guarda cada pedaço em uma variável var dia = data.getDate(); // 1-31 var dia_sem = data.getDay(); // 0-6 (zero=domingo) var mes = data.getMonth(); // 0-11 (zero=janeiro) var ano2 = data.getYear(); // 2 dígitos var ano4 = data.getFullYear(); // 4 dígitos var hora = data.getHours(); // 0-23 var min = data.getMinutes(); // 0-59 var seg = data.getSeconds(); // 0-59 var mseg = data.getMilliseconds(); // 0-999 var tz = data.getTimezoneOffset(); // em minutos Datas – Exemplo 1
  • 5. horaImprimivel = hora2 + " : " + minuto2 + " : " + segundo2 document.form_relogio.relogio.value = horaImprimivel setTimeout("moveRelogio()",1000) } </script> </head> <body onload="moveRelogio()"> Vemos aqui o relógio funcionando... <form name="form_relogio"> <input type="text" name="relogio" size="10"> </form> </body> </html> if (segundo < 10){ segundo2 = "0" + segundo} else{ segundo2 = segundo} if (hora < 10){ hora2 = "0" + hora} else{ hora2 = hora} if (minuto < 10){ minuto2 = "0" + minuto} else{ minuto2 = minuto} <html> <head> <title>Relogio com Javascript</title> <script language="JavaScript"> function moveRelogio(){ momentoAtual = new Date() hora = momentoAtual.getHours() minuto = momentoAtual.getMinutes() segundo = momentoAtual.getSeconds() Datas – Exemplo 2
  • 7. <Script Language="JavaScript"> <!-- mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday = mydate.getDate(); myyear = mydate.getFullYear(); weekday = myweekday; if(myday == 0) day = " Domingo, " else if(myday == 1) day = " Segunda - Feira, " else if(myday == 2) day = "Terça - Feira, " else if(myday == 3) day = " Quarta - Feira, " else if(myday == 4) day = " Quinta - Feira, " else if(myday == 5) day = " Sexta - Feira, " else if(myday == 6) day = " Sábado, " if(mymonth == 0) month = "Janeiro " else if(mymonth ==1) month = "Fevereiro " else if(mymonth ==2) month = "Março " else if(mymonth ==3) month = "Abril " else if(mymonth ==4) month = "Maio " else if(mymonth ==5) month = "Junho " else if(mymonth ==6) month = "Julho " else if(mymonth ==7) month = "Agosto " else if(mymonth ==8) month = "Setembro “ else if(mymonth ==9) month = "Outubro " else if(mymonth ==10) month = "Novembro " else if(mymonth ==11) month = "Dezembro " document.write("<font face=arial, size=12>"+ day); document.write(myweekday+" de "+month+ " de " + myyear+ "."+ "</font>"); // --> </script> Datas – Exemplo 3