Jump to content
Sign in to follow this  
LN10

Atualizar Hora Automaticamente

Recommended Posts

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: hora.jpg

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 by apocsantos

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 by apocsantos

Share this post


Link to post
Share on other sites
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 by nelsonr

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
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"?

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
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 by LN10

Share this post


Link to post
Share on other sites
nelsonr

Ixx, grande mistura :D

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 by nelsonr

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.