click on a button and appear the time within a div

Asked

Viewed 600 times

2

I am creating a simple electronic point system, and I am trying to place the time within a certain div, the moment the user clicks the link enter, the time he clicked on this link appear within a div. The code of my boot looks like this: I’m using Html5 and CSS, preferably in this language, but can get in Javascrpit, grateful. 

<div id="entrada1">Hora da Entrada </div> 
<!-- Preciso que a hora apareça aqui-->
   <div id="botao-entrar"> 
      <div class="botao" > <a href="a definir se vai precisar" class="botao" > Entrar </a> </div>

html5

2 answers

2


The action can only be done with Javascript the code is like this 

    <div id="recebeHora">
    Hora da Entrada
    </div><br>
    <button onclick="pegaData()" >Entrar</button>

    <script>
    function pegaData() {
    var data = new Date();

    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

    // Formata a data e a hora (note o mês + 1)
    var str_hora = hora + ':' + min + ':' + seg;
    document.getElementById("recebeHora").innerHTML = "Hora da Entrada"+str_hora;
    }

  • It worked cool, Two things got overwriting the name "time of entry" the first there at the beginning, I need it because it is edited in css, How to keep it, and how to change the color of the numbers that appear, can not be because div pq Jah be ready for the "time of entry" as said before.

  • '<div> <divclass="HR" style="display: inline;"> Input Time&nbsp; </div> <div class="RHR" style="display: inline;" id="receivedHora"></div> </div><br> CSS = . HR{ color: red; } . RHR{ color: blue; }' replace the html with that and style the divs according to the class

1

See the code below working:

$("#botao-entrar").click(function(){
   $('#datetime').html(getDataHora());
  return false;
});


function getDataHora() {
  // variáveis
  var data = new Date();
  var hora = data.getHours();
  var minutos = data.getMinutes();
  var segundos = data.getSeconds(); 
  var mes = data.getMonth()+1;
  var dia = data.getDate();
  
  // zero à esquerda se necessário
  dia = dia < 10 ? '0' + dia :  dia;
  mes = mes < 10 ? '0' + mes: mes;
  hora =  hora < 10 ? '0' + hora: hora;
  minutos = minutos < 10 ? '0' + minutos : minutos;
  segundos = segundos  < 10 ? '0' + segundos : segundos;
  
  
  // monta resultado
  var resultado = dia + "/" + mes + "/" + data.getFullYear() + " " + hora + ':' + minutos + ':' + segundos;
  
  
  return resultado;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="entrada1">Hora da Entrada </div> 


<!-- Preciso que a hora apareça aqui-->
<div id="datetime"></div>


<div id="botao-entrar"> 
      <div class="botao"> 
        <a href="a definir se vai precisar" class="botao" >Entrar</a>
      </div>
</div>

Browser other questions tagged html5

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