SlideShare uma empresa Scribd logo
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

PPT
Melhorando a Experiência do Usuário com JavaScript e jQuery
PPTX
JavaScript - Date
PDF
JavaScript e JQuery para Webdesigners
PDF
04_Introducao_JavaScript.pdf
PDF
Linguagem de programação JavaScript.pdf
PDF
Curso java script
PDF
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
PPTX
12 SQL - Junções / Join
Melhorando a Experiência do Usuário com JavaScript e jQuery
JavaScript - Date
JavaScript e JQuery para Webdesigners
04_Introducao_JavaScript.pdf
Linguagem de programação JavaScript.pdf
Curso java script
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
12 SQL - Junções / Join

Mais de Centro Paula Souza (20)

PPTX
11 SQL - Funções de string e matemática
PPTX
10 SQL - Funções de agregação
PPTX
09 SQL - Trabalhando com campo do tipo data
PPTX
18 CSS - Trabalhando com Links
PPTX
17 CSS - layouts de textos
PPTX
16 CSS Cores e Fundos
PPTX
15 CSS - Trabalhando com fontes
PPTX
14 CSS Introdução
PPTX
07 Modelagem de banco de dados: Modelo Físico
PPTX
06 Modelagem de banco de dados: Modelo Lógico
PPTX
05 Modelagem de banco de dados: Modelo Conceitual
PPTX
08 Trabalhando com mais de uma tabela (Relacionamento)
PPTX
07 Consultando os dados de uma tabela
PPTX
06 Trabalhando com registros
PPTX
10 Java Script - Exemplos práticos
PPTX
09 Java Script - As formas de usar
PPTX
13 Java Script - Validação de formulário
PPTX
11 Java Script - Exemplos com eventos
PPTX
08 Java Script Introdução - Teoria
PPTX
04 modelagem de dados introdução
11 SQL - Funções de string e matemática
10 SQL - Funções de agregação
09 SQL - Trabalhando com campo do tipo data
18 CSS - Trabalhando com Links
17 CSS - layouts de textos
16 CSS Cores e Fundos
15 CSS - Trabalhando com fontes
14 CSS Introdução
07 Modelagem de banco de dados: Modelo Físico
06 Modelagem de banco de dados: Modelo Lógico
05 Modelagem de banco de dados: Modelo Conceitual
08 Trabalhando com mais de uma tabela (Relacionamento)
07 Consultando os dados de uma tabela
06 Trabalhando com registros
10 Java Script - Exemplos práticos
09 Java Script - As formas de usar
13 Java Script - Validação de formulário
11 Java Script - Exemplos com eventos
08 Java Script Introdução - Teoria
04 modelagem de dados introdução
Anúncio

Último (20)

PDF
FLUXOGRAMA CLASSE lll - Acesso estritamente proximal.pdf
PPTX
Slides Lição 7, CPAD, Uma Igreja Que Não Teme A Perseguição, 3Tr25.pptx
PDF
Cantores.pdf-Deslandes, Tinoco e Zambujo
PPTX
O Romantismo e a identidade brasileira..
PDF
embriologia_animal_aula_share_2026_semestre
PPTX
Aula 13 - Tópico Frasal - Argumentação.pptx
PPTX
Lição 8 EBD.pptxtudopossonaquelequemimfortalece
PPTX
Ciências da Natureza e suas áreas de desenvolvimento
PPTX
ACIDOS NUCLEICOS - REPLICAÇÃO DO DNA - E.M.
PPT
HISTOLOGIA VEGETAL - tecidos vegetais.ppt
PPTX
MENDEL - Aula sobre Mendel - Genética EM
PDF
manual-orientacao-asb_5a8d6d8d87160aa636f63a5d0.pdf
PDF
A Revolução Francesa de 1789 slides história
PDF
saeb_documentos_de_referencia_versao_1.0.pdf
PPTX
brasilcolnia2-101027184359-phpapp02.pptx
PDF
A provisão de jojuador (ramadã) islamismo
PPTX
GUERRAFRIA.pptdddddddddddddddddddddddddx
PPTX
ELEMENTOS E FUNÇÕES DE LINGUAGEM (EMOTIVA, REFERENCIAL, CONATIVA, POÉTICA, FÁ...
PDF
aulademeiodetransporteemlibras-120304202807-phpapp01_removed.pdf
PDF
Ementa 2 semestre PEI Orientação de estudo
FLUXOGRAMA CLASSE lll - Acesso estritamente proximal.pdf
Slides Lição 7, CPAD, Uma Igreja Que Não Teme A Perseguição, 3Tr25.pptx
Cantores.pdf-Deslandes, Tinoco e Zambujo
O Romantismo e a identidade brasileira..
embriologia_animal_aula_share_2026_semestre
Aula 13 - Tópico Frasal - Argumentação.pptx
Lição 8 EBD.pptxtudopossonaquelequemimfortalece
Ciências da Natureza e suas áreas de desenvolvimento
ACIDOS NUCLEICOS - REPLICAÇÃO DO DNA - E.M.
HISTOLOGIA VEGETAL - tecidos vegetais.ppt
MENDEL - Aula sobre Mendel - Genética EM
manual-orientacao-asb_5a8d6d8d87160aa636f63a5d0.pdf
A Revolução Francesa de 1789 slides história
saeb_documentos_de_referencia_versao_1.0.pdf
brasilcolnia2-101027184359-phpapp02.pptx
A provisão de jojuador (ramadã) islamismo
GUERRAFRIA.pptdddddddddddddddddddddddddx
ELEMENTOS E FUNÇÕES DE LINGUAGEM (EMOTIVA, REFERENCIAL, CONATIVA, POÉTICA, FÁ...
aulademeiodetransporteemlibras-120304202807-phpapp01_removed.pdf
Ementa 2 semestre PEI Orientação de estudo
Anúncio

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