Jump to content
Vinicius Bazan

Relógio dinâmico em pagina HTML usando JavaScript

Recommended Posts

 Bom dia, boa tarde e boa noite!

 

 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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alexandre Lex
      Boa tarde pessoal,
       
      Eu sou iniciante em programação PHP, e estou com dificuldades em entender um comportamento. Já dei uma pesquisada pelo fórum mas não encontrei um assunto semelhante. Estou desenvolvendo um projeto onde estou organizando as páginas em pastas separadas.
       
      Ilustração:
       
      -Root
       -css
           - config.css
       -img
           - imagem01.jpg
      - js
           - config.js
       -conteudo01
            - pagina01.php
       -conteudo02
      footer.php
      header.php
      index.php
       
      O que ocorre é que dentro da pasta conteudo01, dentro do arquivo pagina01.php eu uso a função include_once para chamar as páginas principais do root normalmente. Até ai tudo bem, o problema é que o servidor não está carregando os conteudos das demais pastas. Já fiz de tudo e um pouco até o presente momento dentro dos limites do meu conhecimento, mas sem sucesso. Gostaria da ajuda dos senhores para a resolução do meu problema. Sou grato desde já.
       
      Atenciosamente,
       
      Alexandre Figueiredo
    • By Danelelel
      Código php
       
      <?php
      error_reporting(0);
      session_start();
      include "gdrive/curl_gd.php";
      require('profile.php');
      require('../conexao/conexao.php');
      $tokenC   = $_SESSION['token'];
      $explod = explode('idMC', $tokenC);
      $idCont = explode('id', $explod[0]);
      $idConta = $idCont[1];
      $idMembro = $explod[1];
      $idM  = $idMembro;
      $id   = mysqli_real_escape_string($conn, $_GET['id']);
      $retry   = mysqli_real_escape_string($conn, $_GET['retry']);
      $epid      = mysqli_real_escape_string($conn, $_GET['epid']);
      $quality = mysqli_real_escape_string($conn, $_GET['quality']);
      $vide = mysql_query("SELECT * FROM `vid_flix` WHERE id='$id'");
      $vid  = mysql_fetch_assoc($vide);
      if($vid['tipo'] == 2){
          if($quality == NULL or $quality == "medium"){
              $link = $vid['link'];
          }elseif($quality == "high"){
              $tokenC   = $_SESSION['token'];
              $explod = explode('idMC', $tokenC);
              $idCont = explode('id', $explod[0]);
              $idConta = $idCont[1];
              $idMembro = $explod[1];
              $cons = mysql_query("SELECT * FROM `login_flix` WHERE id='$idConta'");
              $consult = mysql_fetch_assoc($cons);
                  $vip = $consult['vip'];
                  if($quality == "high" && $vip == "1"){
                      $link = $vid['link'];
                  }else{
                      $link = "No Permit";
                  }
          }
          $titulo = $vid['titulo'];
          $bg     = $vid['bg'];
          $bg       = str_replace("w227_and_h127_bestv2", "original", $bg);
          $bg       = str_replace("w533_and_h300_bestv2", "original", $bg);
          $id = $vid['id'];
          $type=$vid['tipo'];
          $gdrive = $vid['gdrive'];
      }
      if($vid['tipo'] == 1){
          
          $video = mysql_query("SELECT * FROM `ep_flix` WHERE epId='$epid'") or die(mysql_error());
          $ep    = mysql_fetch_array($video) or die(mysql_error());
          
          $titulo      = $vid['titulo'].' : '.$ep['titulo'];
          $bg       = str_replace("w227_and_h127_bestv2", "original", $ep['img']);
          $bg       = str_replace("w533_and_h300_bestv2", "original", $ep['img']);
          $bg       = $bg;
          $dub       = $vid['leg_dub'];
          $service  = $vid['service'];
          
              $link     = $ep['link'];
         
          $gdrive = $ep['gdrive'];

          $id = $vid['id'];
          $type=$vid['tipo'];
          $epid = $epid;

          //PROXIMO EP//
           $epAt  = $ep['ep'];
           $tempAt = $ep['temp'];
           $nextEp = $epAt + 1;
          
          $p = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempAt' && ep='$nextEp'");
          $c1 = mysql_num_rows($p);
        
          if($c1 > 0){
              $epATT = mysql_fetch_assoc($p);
              $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
          }elseif($c == 0){
              $tempNext = $tempAt + 1;
              $pp = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempNext' && ep='1'");
              $cc = mysql_num_rows($pp);
              if($cc > 0){
                  $epATT = mysql_fetch_assoc($pp);
                      $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
                  
              }
          }
          //PROXIMO EP//
          $linkTest = $ep['link'];
          
      }
         
      $user = mysql_query("SELECT * FROM `perfil_flix` WHERE idMC ='$idMembro'");
      $u = mysql_fetch_array($user);
      $nome = $u['nome'];
      $color = $u['color'];
      $icon = $u['icon'];
      if($gdrive == '1'){
              $url = $link;
              $gid = get_drive_id($url);
              
              $iframeid = my_simple_crypt($gid);
              $linkdown = Drive($url);
              $fileG = $iframeid;
              $link = $linkdown;
      }
      ?>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="css/video-play.css">
      <div class="chat hid">
          <div class="view">
          

          </div>
          <div class="text-chat">
              <input type="text" id="chat-value" class="chat-value" name="chat-value" placeholder="...">
              <button class="mic" id='mic'><i class="fas fa-microphone"></i></button>
          </div>
      </div>
      <div class="media"></div>
      <?php
      if($gdrive != 2){
      if($link != "No Permit"){
      ?>
      <script type="text/javascript">
          var vidLink     = "<?=$link?>";
          var titlevid     = "<?=$titulo?>";    
          var poster         = "<?=$bg?>";
          var nextEpp     = "<?=$proxEp?>";
      </script>
      <script src="flipclock/flipclock.js"></script>
      <script src="js/play.js"></script>
      <script type="text/javascript">
          
          var retryLoad =     setInterval(function(){
              var statusvid = vid.readyState;
               if(statusvid == '4'){
                  var dura = vid.duration;
                  var time = '<?=$retry?>'/100*dura;
                  vid.currentTime = time;
                  clearInterval(retryLoad);
              }
          },50);
          
                  setInterval(function(){
              $.ajax({
                type: "POST",
                url: "../player/function/savep.php",
                data: {
                    'idf' : "<?=$_GET['id']?>",
                    'temp': progress,
                    'idm' : '<?=$idM?>'
                  },
                dataType: 'json',
                success: function (data) {
                          
                      }
              });
                  },10000);
      </script>
      <?php }else{
          ?>
          <script type="text/javascript">
              $('.media').html("<center style='color:white;'>Para ter acesso ao Recurso HD é necessario ser membro vip.</center>");
          </script>
          <?
      } ?>
      <script type="text/javascript">
          function nextEp(){
              $('.nextEp').click(function(){
                  location.href="<?=$proxEp?>";
              });
              }
          setInterval(function(){
              $('.chat .view').load("chat-view.php?id=<?=$id?>");
          },500);
          $('.chat-value').on('keyup',function(e){
              var code = (e.keyCode ? e.keyCode : e.which);
                  if (code==13) {
                      var msg = $(this).val();
                      var user= "<?=$nome?>";
                      var cor = "<?=$color?>";
                      var icon= "<?=$icon?>";
                      var id_vid= "<?=$id?>";    
                      $.ajax({
                            type: "POST",
                            url: "cadXat.php",
                            data: {
                                'id_vid':id_vid,
                                'msg' : msg,
                                'user': user,
                                'cor' : cor,
                                'icon':icon
                              },
                            
                      });
                      $(this).val("");
                  }
          });
          $('.smstext').click(function(){
              var hidC = $('.chat').hasClass("hid");
              if(hidC == true){
                  $('.chat').removeClass("hid");
              }else if(hidC == false){
                  $('.chat').addClass("hid");
              }
          });
          function toggleMute(element) {
          element.muted = false;
          element.play()
      }
      window.addEventListener('load', function () {
          setTimeout(function () {
              toggleMute(document.querySelector('video'));
          }, 1000);
      });
      </script>
      <style type="text/css">
          .chat{
              height: calc(98vh - 12%);
          }
          @media screen and (max-width: 800px){
              .chat{
              height: calc(98vh - 22%);
          }
          }
          @media screen and (max-width:  500px){
              .chat{
                  width: 60%;
              }
          }
          @media screen and (max-width:  350px){
              .chat{
                  width: 70%;
              }
          }
      </style>
      <?php }else{
          ?>
          <script type="text/javascript">
              $('.media').html('<iframe src="<?=$link?>"></iframe>');
          </script>
          <style type="text/css">
              .media iframe{
                  width: 100%;
                  float: left;
                  height: 100vh;
                  border:transparent;
              }
          </style>
          <?
      } ?>
       
      Codigo arquivo js
       
          $('.media').append('<div class="play-video"></div>');
          $('.play-video').append('<div class="loading"></div>');
          $('.play-video').append('<div class="header"></div>');
          $('.header').append('<div class="info"><div>');
          $('.info').append('<div class="line-time"><div>');
          $('.line-time').append('<input type="range" class="line-control" min="0" max="100" value="0" onmousedown="line()" onclick="line()" onchange="line()">');
          $('.line-time').append('<div class="line-curren"></div>');
          $('.line-time').append('<div class="line"></div>');
          $('.line-time').append('<div class="line-time-slide"></div>');
          $('.info').append('<div class="time">0:00:00</div>');
          $('.info').append('<div class="controls-vid"></div>');
          $('.controls-vid').append('<button class="play_pause"><i class="material-icons">play_arrow</i></button>');
          $('.controls-vid').append('<button class="vol-slide"><i class="material-icons">volume_up</i></button>');
          $('.controls-vid').append('<button class="expand"><i class="material-icons">fullscreen</i></button>');
          
          $('.controls-vid').append('<span class="title-vid">'+titlevid+'</span>');
          $('.info').append('<div class="volup hid"><vid>');
          $('.volup').append('<input type="range" onkeyup="vol()" onmousedown="vol()" onclick="vol()" onchange="vol()" min="0" max="100" value="70" class="volups">');
          $('.volup').append('<div class="seta-baixo"></div>');
          $('.play-video').append('<div class="encript"></div>');
          $('.play-video').append('<div class="video-play"></div>');
          $('.header').append('<button class="playing-vid"><i class="material-icons">play_arrow</i></button>');    
          $('.video-play').append('<video id="vid-nf" poster="'+poster+'"></video>');
          $('#vid-nf').append('<source src="'+vidLink+'" type="video/mp4">');
          
          var vid = document.getElementById("vid-nf"); 
          function line(){
              var val =     $('.line-control').val();
              var durational = vid.duration;
              var por = val / 100 * durational;
              vid.currentTime=por;
          }
          $('.play_pause').click(function(){
              var play = $('.play_pause i').html();
              
              if(play == "play_arrow"){
                  $('.play_pause i').html('pause');
                  $('.playing-vid i').html('pause');
                  vid.play();
              }if(play == "pause"){
                  $('.play_pause i').html('play_arrow');
                  $('.playing-vid i').html('play_arrow');
                  vid.pause();
              }
          });
          $('.playing-vid').click(function(){
              var play = $('.play_pause i').html();
              
              if(play == "play_arrow"){
                  $('.play_pause i').html('pause');
                  $('.playing-vid i').html('pause');
                  vid.play();
              }if(play == "pause"){
                  $('.play_pause i').html('play_arrow');
                  $('.playing-vid i').html('play_arrow');
                  vid.pause();
              }
          });
          setInterval(function(){
              var statusvid = vid.readyState;
              if(statusvid == '0'){
                  $('.loading').css('display','block');
              }else if(statusvid == '1'){
                  $('.loading').css('display','none');
              }else if(statusvid == '2'){
                  $('.loading').css('display','block');
              }else if(statusvid == '3'){
                  $('.loading').css('display','none');
              }else if(statusvid == '4'){
                  $('.loading').css('display','none');
              }
          },50);
          $('.expand').click(function(){
              var expand = $('.expand i').html();
              if(expand == 'fullscreen'){
                  $('.expand i').html('fullscreen_exit');
                  var el = document.documentElement
                      , rfs = // for newer Webkit and Firefox
                             el.requestFullScreen
                          || el.webkitRequestFullScreen
                          || el.mozRequestFullScreen
                          || el.msRequestFullScreen
                      ;
                      if(typeof rfs!="undefined" && rfs){
                        rfs.call(el);
                      } else if(typeof window.ActiveXObject!="undefined"){
                        // for Internet Explorer
                        var wscript = new ActiveXObject("WScript.Shell");
                        if (wscript!=null) {
                           wscript.SendKeys("{F11}");
                        }
                      }
              }else{
                  $('.expand i').html('fullscreen');
                  if (document.cancelFullScreen) {  
                    document.cancelFullScreen();  
                  } else if (document.mozCancelFullScreen) {  
                    document.mozCancelFullScreen();  
                  } else if (document.webkitCancelFullScreen) {  
                    document.webkitCancelFullScreen();  
                  }
              }
          });
          $( document ).ready(function() {
               var regiao = document;
              var timeout = setTimeout(showTela, 4000);
              $(regiao).mousemove(onEvent);
              $(regiao).mousedown(onEvent);
              $(regiao).keydown(onEvent);

              function onEvent() {
                clearTimeout(timeout);
               
                  $('body').css('cursor','auto');
                $('.header').css('opacity','1');
                timeout = setTimeout(showTela, 4000);
              }
              function showTela() {
                $('body').css('cursor','none');
                $('.header').css('opacity','0');
              }
            
             });
              $('.vol-slide').click(function(){
                  var hid = $('.volup').hasClass('hid');
                  if(hid == true){
                      $('.volup').removeClass('hid');
                      $('.line-time').addClass('hid');
                      $('.time').addClass('hid');
                  }else if(hid == false){
                      $('.volup').addClass('hid');
                      $('.line-time').removeClass('hid');
                      $('.time').removeClass('hid');
                  }
              });
              function vol(){
                  var volu = $('.volups').val();
                  var vol = volu / 100;
                  if(volu < 50){
                      $('.vol-slide i').html('volume_down');
                  }
                  else if(volu > 50){
                      $('.vol-slide i').html('volume_up');
                  }
                  if(volu == 0){
                      $('.vol-slide i').html('volume_off');
                  }
                  vid.volume = vol;
              };
              var progress = '';
              var per = '';
              var clo = '60';
              var clou = '';
              setInterval(function(){
                  var current = vid.currentTime;
                  var duration= vid.duration;
                   per =  duration - current ;
                  var percorid = current * 100;
                   progress = percorid / duration;
                  $('.line').css('margin-left', 'calc('+progress+'% - 8.5px)');
                  $('.line-curren').css('width',progress+'%');
                  
                  var dur = String(duration);
                  var perc = String(per);
                  if(dur != 'NaN'){
                      var date = new Date(null);
                      date.setSeconds(perc); // specify value for SECONDS here
                      var result = date.toISOString().substr(12, 7);
                  $('.time').html(result);
                  if(per < '30' && nextEpp != ''){
                      if(clou == ''){
                          clou = '1';
                          $('.header').append('<button class="nextEp"><i class="material-icons">play_arrow</i><p>Próximo Episódio em</p><span class="restTime"></span></button>');
                          $('.info').addClass('hid');
                          $('.playing-vid').addClass('hid');
                          nextEp();
                      }
                  }
                  }
              },50);
                  var mytimer = setInterval(function(){
                      if(per < '30' && nextEpp != ''){
                          $('.restTime').html(clo);
                          if(clo > 0){
                              clo --;
                          }else if(clo == 0){
                              location.href=nextEpp;
                              clearInterval(mytimer);
                          }
                      }
                      },1000);
              
              $('.settings').click(function(){
                  var check = $('.settings').hasClass('active-s');
                  if(check == true){
                      $('.settings').removeClass('active-s');
                      $('.line-time').fadeIn('slow').css('display','block');
                      $('.time').fadeIn('slow').css('display','block');
                      $('.quality').fadeOut('slow').css('display','none');
                  }else if(check == false){
                      $('.settings').addClass('active-s');
                      $('.line-time').fadeOut('slow').css('display','none');
                      $('.time').fadeOut('slow').css('display','none');
                      $('.quality').fadeIn('slow').css('display','block');
                  }
              });
              
    • By ThosuZ
      Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc").
       
      Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo?
       
      HTML:
       
      <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS:
      /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; }  
      Como ficou:

       
      Como eu gostaria que ficasse mais ou menos:
      http://miritigrafica.com.br/#faleconosco
    • By WagnerFilho
      Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda!
      Eu separei os arquivos js por responsabilidades.
      Cada arquivo será encarregado para uma determinada função.
      Estou carregando estes arquivos da seguinte forma:

       
      <html> <head> </head> <body> <div id="app-info"> <span id="app-name">name</span> </div> <script src="controllers/controllerExample.js"></script> <script src="resources/ajaxApp.js"></script> <script src="models/modelExample.js"></script> <script src="app.js"></script> </body> </html> observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern
      Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ?
      Como posso fazer isto ?
      Então tenho alguns arquivos js.
       
      app.js controllers / controllerExample.js models / modelExample.js resources / ajaxApp.js
        app.js
      let ObjectApplication = {}; ;(function( window, document, undefined ) { 'use strict'; function app() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.app = app(); })( window, document ); MyGlobalObject.controllerExample.publicMethod(); console.log(objectApplication.name);  
      controllerExample.js
      ;(function( window, document, undefined ) { 'use strict'; function controllerExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return MyGlobalObject.modelExample.publicMethod(); //return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.controllerExample = controllerExample(); })( window, document );  
      modelExample.js
      ;(function( window, document, undefined ) { 'use strict'; function modelExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { buildAppInfo(); //return 'Init in Model'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.modelExample = modelExample(); })( window, document );  
      ajax
      let buildAppInfo = () => { let url = 'app.json'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status = 200) app = JSON.parse(xhr.responseText); console.log(app); } } xhr.send(); };
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.