Relógio da violência - usando JS

Vinicius Bazan · Julho 5, 2019

Estou precisando de ajuda em um site que eu e mais algumas pessoas estamos desenvolvendo, é um site com finalidade escolar, visto que eu e os demais integrantes desse grupo estamos desenvolvendo ele para obter nota, o tema é produzir um site que aborde a violência contra as mulheres.

O ponto aqui é que chegamos a conclusão que seria legal temos um relógio que mede a violência em tempo real, assim ele pegaria a hora do computador e faria um calculo que iria ficar atualizando um número na tela.

Por exemplo, digamos que você queira ver quantas mulheres sofreram abuso verbal até agora, e ao mudar o filtro para abuso verbal vai aparecer as seguintes mensagens na tela:

A cada 0,00 segundos uma mulher sofre de abuso verbal

0.000.000 Mulheres sofreram até agora.

Esse número teria que ficar mudando a todo momento, então digamos que uma mulher sofra um abuso verbal a cada 2 segundos, então de 2 em 2 segundos aquele número aumenta em 1 (usando a hora do PC).

Além disso seria possível trocar o filtro para outras formas de abuso como agressão física, psicológica e outras

Para vocês entenderem melhor, basicamente o que queremos fazer é isso: relógio da violencia

Acontece que a gente não manja muito de javascript pra isso, por isso resolvi pedir ajuda em um fórum, eu possuo conhecimento em HTML, PHP e CSS apenas (me falaram que talvez de para fazer com PHP também, estou pesquisando sobre isso), então minha duvida é como elaborar esse código no java e estilizar ele no css depois?

gabrielms · Julho 8, 2019

@Vinicius Bazan

Para manipular o tempo utilizando o tempo do computador em uma página, você pode usar o objeto Date do javascript.

Vou deixar a documentação da W3 sobre o objeto Date https://www.w3schools.com/jsref/jsref_obj_date.asp, e também um exemplo de código que pode ser usado no seu projeto.

Código online:

https://codepen.io/morto/pen/JQmaeQ

<!DOCTYPE html>
<html>
  <head>
      <style>
          html, body{
              width: 100%;
              height: 100%;
              margin: 0px;
              padding: 0px;
          }

          .container{
              width: 300px;
              text-align: center;
              margin: 0 auto;
          }
      </style>  
  </head>
<body>
  <div class="container">
    <p>Já se passou <span id="demo">0</span> sengudos hoje.</p>
  </div>
  <script>
  const data = {
    dataAtual : null,
    segundos : 0,
    intervalo : null,
    demonstrar : function(){
      let demo;
      demo = document.getElementById("demo");
      demo.innerHTML = this.segundos;
    }
  }

  window.onload = function(){
      let d = new Date();
      data.atual = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
    data.segundos = parseInt(((Date.parse(new Date()) - Date.parse(data.atual)) / 1000) / 2);
    data.demonstrar();
    data.intervalo = setInterval(() => {
        data.segundos++;
        data.demonstrar();
      }, 1000);
  }

  </script>
</body>
</html>

Vinicius Bazan · Julho 15, 2019

Em 08/07/2019 at 05:30, gabrielms disse:

@Vinicius Bazan

Para manipular o tempo utilizando o tempo do computador em uma página, você pode usar o objeto Date do javascript.

Vou deixar a documentação da W3 sobre o objeto Date https://www.w3schools.com/jsref/jsref_obj_date.asp, e também um exemplo de código que pode ser usado no seu projeto.

Código online:

https://codepen.io/morto/pen/JQmaeQ


<!DOCTYPE html>
<html>
  <head>
      <style>
          html, body{
              width: 100%;
              height: 100%;
              margin: 0px;
              padding: 0px;
          }

          .container{
              width: 300px;
              text-align: center;
              margin: 0 auto;
          }
      </style>  
  </head>
<body>
  <div class="container">
    <p>Já se passou <span id="demo">0</span> sengudos hoje.</p>
  </div>
  <script>
  const data = {
    dataAtual : null,
    segundos : 0,
    intervalo : null,
    demonstrar : function(){
      let demo;
      demo = document.getElementById("demo");
      demo.innerHTML = this.segundos;
    }
  }

  window.onload = function(){
      let d = new Date();
      data.atual = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
    data.segundos = parseInt(((Date.parse(new Date()) - Date.parse(data.atual)) / 1000) / 2);
    data.demonstrar();
    data.intervalo = setInterval(() => {
        data.segundos++;
        data.demonstrar();
      }, 1000);
  }

  </script>
</body>
</html>

Muito obrigado Gabriel, vou dar uma olhada no W3School que você me passou e estudar o código.

Entrar

Arquivado

Relógio da violência - usando JS

Recommended Posts

Vinicius Bazan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vinicius Bazan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP - Agradecimento e uma Dúvida

PHP - Agradecimento e uma Dúvida

PHP - Abrir e Fechar janela

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante