Atualizar Hora Automaticamente

[LN10]

Boa Noite.

Estou a criar uma página e gostaria, que conforme a hora fosse mudando, ela fosse atualizando na página.

Exemplo:

Imaginemos que um utilizador entra na página e não mexe nela durante 5mins.

A hora ao entrar seriam 23:35, mas qnd volta-se a olhar seriam-se 23:40, mas na página continua a dizer 23:35.

Queria saber como resolver este problema.

Imagem:

protected void Page_Load(object sender, EventArgs e)
 {
	 int hour = DateTime.Now.Hour;
	 if (hour >= 07 && hour < 12)
		 lblTempo.Text = "Bom Dia";
	 else if (hour >= 12 && hour < 19)
		 lblTempo.Text = "Boa Tarde";
	 else if (hour >= 19)
		 lblTempo.Text = "Boa Noite";
	 else if (hour < 7)
		 lblTempo.Text = "Boa Noite";
	 CultureInfo culture = new CultureInfo("pt-PT");
	 DateTimeFormatInfo dtfi = culture.DateTimeFormat;
	 int dia = DateTime.Now.Day;
	 int ano = DateTime.Now.Year;
	 string mes = culture.TextInfo.ToTitleCase(dtfi.GetMonthName(DateTime.Now.Month));
	 string diasemana = culture.TextInfo.ToTitleCase(dtfi.GetDayName(DateTime.Now.DayOfWeek));
	 lblDia.Text = "Hoje é " + diasemana + ", " + dia + " de " + mes + " de " + ano;
	 lblHora.Text = "e são " + DateTime.Now.ToShortTimeString();
 }

Edited April 26, 2013 at 01:21 PM by apocsantos

[nelsonr]

Boas LN10,

existem várias maneiras de o fazer.

Uma delas é colocares esse conteúdo dentro de um updatepanel, juntamente com um timer.

No timer colocas o intervalo de 1 segundo, e no evento do timer, atualizas o label.Algo deste tipo:

<form id="form1" runat="server">
  <asp:ScriptManager ID="scriptManager1" runat="server"></asp:ScriptManager>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1000"></asp:timer>
<asp:Label ID="label1" runat="server"></asp:Label>
</ContentTemplate>
 </asp:UpdatePanel>
</form>

protected void Timer1_Tick(object sender, EventArgs e)
{
  label1.Text = String.Format("Dia: {0:dd/MM/yyyy} Hora: {1:HH:mm:ss}", DateTime.Now, DateTime.Now);
}

O timer força um refresh a cada segundo, mas como está dentro de um updatepanel, isso é feito por AJAX, não se vendo flick do refresh da página.

----

Uma outra maneira seria fazer o timer e a atualização do label pelo javascript. Isso evitava ter de ir ao servidor a cada segundo.

Algo deste tipo:

// No pageload, registas o evento para chamar a função de javascript ao inicar a página
// Aqui é enviado o ID do label, que pode ser diferente no lado do browser
ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", String.Format("AtualizarDataHora('{0}');", label2.ClientID), true);

<script language="javascript" type="text/javascript">
  function AtualizarDataHora(labelID)
  {
  // Atualizar o label com o data/hora
var now = new Date();
document.getElementById(labelID).innerHTML = "Dia: " + now.format("dd/MM/yyyy") + " Hora: " + now.format("HH:mm:ss");

  // Indicar que deve chamar novamente a função daqui a 1 segundo
setTimeout("AtualizarDataHora('" + labelID + "')", 1000);
 }
</script>

Espero que ajude

[LN10]

Obrigado

Parece ser isto o que queria

Vou usar a 2º ideia para ser mais leve para o servidor

Basta copiar e aplicar? Correcto?

Ficando assim:

//C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Globalization;
namespace Site_Coro
{
public partial class _Default : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
	 ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", String.Format("AtualizarDataHora('{0}');", lblHora.ClientID), true);
	 int hour = DateTime.Now.Hour;
	 if (hour >= 07 && hour < 12)
		 lblTempo.Text = "Bom Dia";
	 else if (hour >= 12 && hour < 19)
		 lblTempo.Text = "Boa Tarde";
	 else if (hour >= 19)
		 lblTempo.Text = "Boa Noite";
	 else if (hour < 7)
		 lblTempo.Text = "Boa Noite";
	 CultureInfo culture = new CultureInfo("pt-PT");
	 DateTimeFormatInfo dtfi = culture.DateTimeFormat;
	 int dia = DateTime.Now.Day;
	 int ano = DateTime.Now.Year;
	 string mes = culture.TextInfo.ToTitleCase(dtfi.GetMonthName(DateTime.Now.Month));
	 string diasemana = culture.TextInfo.ToTitleCase(dtfi.GetDayName(DateTime.Now.DayOfWeek));
	 lblDia.Text = "Hoje é " + diasemana + ", " + dia + " de " + mes + " de " + ano;
	 lblHora.Text = "e são " + DateTime.Now.ToShortTimeString();
 }
}
}

HTML
<script language="javascript" type="text/javascript">
 function AtualizarDataHora(lblHora) {
	 // Atualizar o label com o data/hora
	 var now = new Date();
	 document.getElementById(lblDia).innerHTML = "Dia: " + now.format("dd/MM/yyyy") + " Hora: " + now.format("HH:mm:ss");
	 // Indicar que deve chamar novamente a função daqui a 1 segundo
	 setTimeout("AtualizarDataHora('" + lblHora + "')", 1000);
 }
</script>
 <asp:Label ID="lblDia" runat="server"></asp:Label>
 <asp:Label ID="lblHora" runat="server"></asp:Label>

Nota: Devo ter aplicado mal, pois não está a funcionar

Edited April 26, 2013 at 01:22 PM by apocsantos

[nelsonr]

Na função AtualizarDataHora, colocaste o parametro com o nome "lblHora", mas estás a atualizar usando uma variavel com o nome "lblDia" (que não está definida)

Edited April 26, 2013 at 01:39 PM by nelsonr

[LN10]

já corrigi

<script language="javascript" type="text/javascript">
	 function AtualizarDataHora(min) {
			 // Atualizar o label com o data/hora
			 var now = new Date();
			 document.getElementById(min).innerHTML = "Dia: " + now.format("dd/MM/yyyy") + " Hora: " + now.format("HH:mm:ss");
			 // Indicar que deve chamar novamente a função daqui a 1 segundo
			 setTimeout("AtualizarDataHora('" + lblHora + "')", 1000);
	 }
</script>
	 <asp:Label ID="lblDia" runat="server"></asp:Label>
	 <asp:Label ID="lblHora" runat="server"></asp:Label>

Agora quando chego aqui, o que devo por antes do .ClientID?

ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", String.Format("AtualizarDataHora('{0}');", ????.ClientID), true);

É que mesmo assim, ainda não funciona.

Peço desculpa pela maçada, mas que ainda sou um programador recente com poucas bases

[nelsonr]

Agora alteraste o valor para "min", mas esqueceste-te de alterar na parte do setTimeout.

Bem, aqui fica o código completo, usando as tuas variáveis (alterei a formatação da data/hora):

ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", String.Format("AtualizarDataHora('{0}', '{1}');", lblDia.ClientID, lblHora.ClientID), true);

<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
	function AtualizarDataHora(lblDiaID, lblHoraID)
	{
		var now = new Date();
		document.getElementById(lblDiaID).innerHTML = "Dia: " + now.getDate() + "/" + (now.getMonth() + 1) + "/" + now.getFullYear();
		document.getElementById(lblHoraID).innerHTML = "Hora: " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();

		setTimeout("AtualizarDataHora('" + lblDiaID + "', '" + lblHoraID + "')", 1000);
	}
</script>
</head>
<body>
<form id="form1" runat="server">
	<asp:Label ID="lblDia" runat="server"></asp:Label>
	<asp:Label ID="lblHora" runat="server"></asp:Label>
</form>
</body>
</html>

[LN10]

Obrigado.

É mesmo isto.

Só queria saber, se na data, não para por como tinha, que era do genero: "Hoje é Sexta -Feira, 26 de Abril de 2013 e são 15:56"?

[nelsonr]

Nesse caso, basta um label.

Acrescentei uma função do lado do Javascript para formatar números com 0, de modo melhorar a formatação da hora/min/segundo

ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", String.Format("AtualizarDataHora('{0}');", lblDataHora.ClientID), true);

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
	//
	var diasSemana = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
	var meses = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];

	function pad(number, length)
	{
		return (number + "").length >= length ? number + "" : pad("0" + number, length);
	}
	function AtualizarDataHora(lblDataHoraID)
	{
		var now = new Date();
		document.getElementById(lblDataHoraID).innerHTML = "Hoje é " + diasSemana[now.getDay()] + ", " + now.getDate() + " de " + meses[now.getMonth()] + " de " + now.getFullYear() + " e são " + pad(now.getHours(),2) + ":" + pad(now.getMinutes(), 2) + ":" + pad(now.getSeconds(), 2);

		setTimeout("AtualizarDataHora('" + lblDataHoraID + "')", 1000);
	}
</script>
</head>
<body>
<form id="form1" runat="server">
	<asp:Label ID="lblDataHora" runat="server"></asp:Label>
</form>
</body>
</html>

[LN10]

Obrigado por tudo

Era mesmo o que queria e desculpa a maçada

[LN10]

Boas.

Fiz umas alterações, em que decidi separar a Hora e a Data e estraguei tudo.

Não apresenta nenhum erro, mas quando chego ao site, não apresenta as informações.

O que poderá ser?

Nota: Estes dados agora estão numa Master Page.

HTML
<script language="javascript" type="text/javascript">
			 var diasSemana = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
			 var meses = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
			 function AtualizarData(lblDataID) {
				 var now = new Date();
				 document.getElementById(lblDataID).innerHTML = diasSemana[now.getDay()] + ", " + now.getDate() + " de " + meses[now.getMonth()] + " de " + now.getFullYear());
			 }
		 </script>
		 <asp:Label ID="lblData" runat="server"></asp:Label>

		 <script language="javascript" type="text/javascript">
							 function pad(number, length) {
				 return (number + "").length >= length ? number + "" : pad("0" + number, length);
			 }
			 function AtualizarHora(lblHoraID) {
				 document.getElementById(lblHoraID).innerHTML = pad(now.getHours(), 2) + ":" + pad(now.getMinutes(), 2) + ":" + pad(now.getSeconds(), 2);
				 setTimeout("AtualizarHora('" + lblHoraID + "')", 1000);
			 }
		 </script>
		 <asp:Label ID="lblHora" runat="server"></asp:Label>
C#
	 Page.ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", lblData.ClientID);
	 Page.ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", String.Format("AtualizarHora('{0}');", lblHora.ClientID), true);

Edited April 29, 2013 at 04:19 PM by LN10

[nelsonr]

Ixx, grande mistura 😄

Duplicaste a linha, mas ficou diferente

//Page.ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", lblData.ClientID);
Page.ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", String.Format("AtualizarData('{0}');", lblData.ClientID), true);
Page.ClientScript.RegisterStartupScript(this.GetType(), "EventoInicial", String.Format("AtualizarHora('{0}');", lblHora.ClientID), true);

Na parte do javascript, na função AtualizarData, falta a linha do setTimeout

function AtualizarData(lblDataID)
{
var now = new Date();
document.getElementById(lblDataID).innerHTML = diasSemana[now.getDay()] + ", " + now.getDate() + " de " + meses[now.getMonth()] + " de " + now.getFullYear());
setTimeout("AtualizarData('" + lblDataID+ "')", 1000);
}

Na função AtualizarHora, falta a definição da variaval now:

var now = new Date();

Isso foi o que vi assim por alto, não consigo experimentar agora.

-- EDIT --

Já agora, convém confirmares que tens o browser a mostrar os erros de javascript, de modo a conseguires fazer melhor o debug nestas situações

Edited April 29, 2013 at 05:04 PM by nelsonr

[LN10]

Continua, sem dar, mas agradeço a ajuda

Acho que vou ter que mudar o site todo.

Está-me a dar muito trabalho.

Se me poderes dar uma opinião, agradeço: Ajuda desenho website - Webdesign - Portugal-a-Programar

[nelsonr]

O problema é que estás a querer fazer coisas que requerem programação do lado do cliente (javascript), o que complica bastante para quem não está habituado a misturar as duas coisas.

Se puderes, deixa isso de lado e faz o site normalmente sem esses efeitos do cliente, e com conteúdo mais estático.

Depois quando tiveres o site no ar e a fazer o necessário, logo experimentas fazer conteúdo mais dinâmico.

[LN10]

O problema é que estás a querer fazer coisas que requerem programação do lado do cliente (javascript), o que complica bastante para quem não está habituado a misturar as duas coisas.

Se puderes, deixa isso de lado e faz o site normalmente sem esses efeitos do cliente, e com conteúdo mais estático.

Depois quando tiveres o site no ar e a fazer o necessário, logo experimentas fazer conteúdo mais dinâmico.

Eu agradeço os conselhos, mas não sei fazer de outra forma

Eu tive que aprender sozinho C# para a PAP.

Eu não tenho de programação sólidas.

Só possuo 12º ano, num curso profissional de informática de gestão.