how to place the local date on the web page

Asked

Viewed 39 times

0

I’m trying to make a page that shows the date and the time but I’m only getting the time someone can tell me how to put the date. I wanted to put the date on H1 like I did then but I’m not getting it

var a = setInterval(myTimer);

function myTimer() {
  var d = new Date();
  var time = d.toLocaleTimeString();
  document.getElementById("tempo").innerHTML = time;
}
h1 {
  color: orangered;
  font-size: 5rem;
  text-align: center;
  margin-top: 15%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  text-align: center;
  margin: 0;
}

.box {
  box-sizing: border-box;
  border-radius: 5px;
  margin: 0 auto;
  padding: 32px;
  margin-top: 48px;
  background-color: rgba(255, 255, 255, 0.6);
  width: 60%;
}

hr {
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0));
  border: 0;
}
<div class='box'>
  <h1 class='tempo' id='tempo'></h1>
  <hr>
  <h1 class='tempo' id='data'></h1>

</div>

javascript html

  • Just a tip, when putting the date, try to bring this date of some backend language, because the javascript date is set by the user’s browser, IE, It is not reliable... A simple way to solve this is by passing var variavel_date_backend = 'AQUI VC PEGA DO BACKEND' in the new Date(variavel_date_backend);

  • 1

    It’s always important to post only one [mcve] focused on the problem you’re having. Postings like Helpdesk or with very specific code are not suitable for the website template. To better understand and enjoy the site, is interesting a read on Stack Overflow Survival Guide in English. This can help a lot in formulating the next ones so the post is useful to a broad audience.

2 answers

0

Set the date display the way you want it!

toLocaleTimeString() - string time only in localized format of your system

The method Get serves to read parts of the date and time information stored in the date object.

getDay() - Weekday

getDate() - day in the month

getFullYear() - year - 1970 .......

var a = setInterval(myTimer);

function myTimer() {
  //horário
  var d = new Date();
  var time = d.toLocaleTimeString();
  document.getElementById("data").innerHTML = time;

//dia da semana e data

//nesse array você escreve os dias como quiser
var dia_semana=new Array("Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sabado");

var nome_mes=new Array("01","02","03","04","05","06","07","08","09","10","11","12");

//configuração da apresentação
var HOJE = dia_semana[d.getDay()] + ", " + d.getDate() + "/" + nome_mes[d.getMonth()] + "/" + d.getFullYear();

document.getElementById("tempo").innerHTML = HOJE;

}
h1 {
  color: orangered;
  font-size: 5rem;
  text-align: center;
  margin-top: 15%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  text-align: center;
  margin: 0;
}

.box {
  box-sizing: border-box;
  border-radius: 5px;
  margin: 0 auto;
  padding: 32px;
  margin-top: 48px;
  background-color: rgba(255, 255, 255, 0.6);
  width: 60%;
}

hr {
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0));
  border: 0;
}
<div class='box'>
  <h1 class='tempo' id='tempo'></h1>
  <hr>
  <h1 class='tempo' id='data'></h1>

</div>

-1


Reference: https://www.w3schools.com/jsref/jsref_tolocaledatestring.asp

var a = setInterval(myTimer);

function myTimer() {
  var d = new Date();
  var time = d.toLocaleTimeString();
  var data = d.toLocaleDateString()
  document.getElementById("tempo").innerHTML = time;
  document.getElementById("data").innerHTML = data;
}
h1 {
  color: orangered;
  font-size: 5rem;
  text-align: center;
  margin-top: 15%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  text-align: center;
  margin: 0;
}

.box {
  box-sizing: border-box;
  border-radius: 5px;
  margin: 0 auto;
  padding: 32px;
  margin-top: 48px;
  background-color: rgba(255, 255, 255, 0.6);
  width: 60%;
}

hr {
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0));
  border: 0;
}
<div class='box'>
  <h1 class='tempo' id='tempo'></h1>
  <hr>
  <h1 class='tempo' id='data'></h1>

</div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.