PHP - CountDown chamar função sem usar na - body onLoad="settimer();"

violin101 · Outubro 30, 2019

Caros amigos, saudações...

Estou com uma dúvida referente CHAMAR Função do javaScript sem usar na <body>:

<body onLoad="settimer();">

Escrevi uma rotina de exemplo para Contar: Dia|Hora|Minutos|Segundos - está funcionando corretamente.

Mas para chamar a Função tive que chamar através da onLoad(), na <body>.

Como faço para chamar a função sem que seja na <body> e toda vez que a página for iniciada a Função começa automaticamente.

Abaixo posto o Código Fonte.


<?php
    //Conexão com o MySql
    $connection = mysqli_connect("localhost", "root", "", "classmodels");
    $sql = "SELECT * FROM orders WHERE orderNumber='1000'";
    $result = mysqli_query($connection, $sql);
    $row = mysqli_fetch_object($result);	
	
	$dta = date(('Y/m/d'), strtotime($row->requiredDate));
	$hrs = date(('H:i:s'), strtotime($row->horaDate));

?>

 
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="UTF-8">
		<title>Conta Horas</title>
		<link rel="stylesheet" href="style.css">
	</head>
	
	<body onLoad="settimer();">	<!-- Como chamar a Função settimer, sem usar na BODY -->
      <br/><br/>	    
		<input type="hidden" id="dta" value="<?php echo $dta; ?>" placeholder="Data" disabled>
		<input type="hidden" id="hrs" value="<?php echo $hrs; ?>" placeholder="Hora" disabled>
      <br/><br/>
	   
		<div class="container">
			<h1>Contando Horas</h1><br/>

			<label>Data: 
	           <label><?php echo $dta; ?> - <?php echo $hrs; ?></label>
            </label>						
            <br/><br/>

            <h2>Falta</h2>	
			<div class="count">
				<div class="countd">
					<span id="days">00</span>
					dias(s)
				</div>

				<div class="countd">
					<span id="hours">00</span>
					hora(s)
				</div>

				<div class="countd">
					<span id="minutes">00</span>
					minuto(s)
				</div>

				<div class="countd">
					<span id="seconds">00</span>
					segundo(s)
				</div>									
			</div>

		</div>	   
	   
	  <br/><br/>
	    <p id="timer_value"></p>
	  <br/>
	 
	  <!--Função para o CountDown -->
	  <script type="text/javascript">
		var timer;
		function settimer(){

			 clearInterval(timer);
			 
			 var timer_dta = document.getElementById("dta").value;
			 var timer_hrs = document.getElementById("hrs").value;
			 if(timer_hrs == ""){
			 	timer_hrs = 0;
			 }
             
             // Variável para Concatenar Data e Hora
             var timer_date = timer_dta+" "+timer_hrs;			 
			 
			 var end = new Date(timer_date); // Organizar valores no formato de data e hora
			 var now = new Date();           // Obtem data e hora atual
			 var second = 1000;              // Milissegundo: Total em 1 segundo
			 var minute = second * 60;       // Segundo.....: Total em 1 minuto
			 var hour = minute * 60;         // Minuto......: Total em 1 hora
			 var day = hour * 24;            // Hora........: Total em 1 dia

			 function showtimer() {
				  var now = new Date();     // Data atual
				  var calcular = end - now; // Calcula a diferença entre a hora atual e a data inserida
				  if(calcular < 0) {
					  clearInterval(timer);
					  document.getElementById("days").innerHTML = '0';  		
					  document.getElementById("hours").innerHTML = '0';  		
					  document.getElementById("minutes").innerHTML = '0';  		
					  document.getElementById("seconds").innerHTML = '0';  		
					return;
				  }

				  var days = Math.floor(calcular / day);                  // Permaneça Dias
				  var hours = Math.floor((calcular % day) / hour);        // Permaneça Horas
				  var minutes = Math.floor((calcular % hour) / minute);   // Permaneça Minutos
				  var seconds = Math.floor((calcular % minute) / second); // Permaneça Segundos

				  document.getElementById("days").innerHTML = days;				  
				  document.getElementById("hours").innerHTML = hours;				  
				  document.getElementById("minutes").innerHTML = minutes;				  
				  document.getElementById("seconds").innerHTML = seconds;
			 }

		   // Atualiza a exibição a cada 1 segundo
		   timer = setInterval(showtimer, 1000); 

		}

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

Grato,

Cesar

Omar~ · Outubro 31, 2019

Na verdade acho usar onload no body ridículo :smirk:

document.addEventListener('load', NomeDaFuncao, false);

Adicione isso a um script antes do fechamento da tag <body>.

Normalmente depois de todos os elementos (Mas isso não é necessário).

violin101 · Outubro 31, 2019

Caros amigos, saudações...

Consegui solucionar o meu problema do CountDown.

Para quem precisar de uma função de CountDown como precisei, divido meu código com os amigos.

index.php

<?php
    //Faz conexão com o MySql
    $connection = mysqli_connect("localhost", "root", "", "nome_banco");
    $sql = "SELECT * FROM tabela WHERE id_campo='10'";
    $result = mysqli_query($connection, $sql);
    $row = mysqli_fetch_object($result);	
	
	$dta = date(('Y/m/d'), strtotime($row->data));
	$hrs = date(('H:i:s'), strtotime($row->hora));

?>

 <!DOCTYPE html>
  <html lang="pt-BR">
    <head>
    	<meta charset="UTF-8">
    	<title>Conta Horas</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    	<script type="text/javascript" src="jquery-v3.3.1.js"></script>
    	<script type="text/javascript" src="countdown.js"></script>
    </head>

	
	<body>	
      <br/><br/>	    
		<input type="hidden" id="dta" value="<?php echo $dta; ?>" placeholder="Data" disabled>
		<input type="hidden" id="hrs" value="<?php echo $hrs; ?>" placeholder="Hora" disabled>
      <br/><br/>
	   
		<div class="container">
			<h1>Contando Horas</h1><br/>

			<label>Data: 
	           <label><?php echo $dta; ?> - <?php echo $hrs; ?></label>
            </label>						
            <br/><br/>

            <h2>Falta</h2>	
			<div class="count">
				<div class="countd">
					<span id="days">00</span>
					dias(s)
				</div>

				<div class="countd">
					<span id="hours">00</span>
					hora(s)
				</div>

				<div class="countd">
					<span id="minutes">00</span>
					minuto(s)
				</div>

				<div class="countd">
					<span id="seconds">00</span>
					segundo(s)
				</div>									
			</div>

		</div>	   
      
      
      <!--Passando informação para o countdown.js  -->
    	<script type="text/javascript">
    		$(document).ready(function(){
            // Variáveis para Capturar Dados do MySql
  	        var timer_dta = document.getElementById("dta").value;
			var timer_hrs = document.getElementById("hrs").value;

   	        // Variável para Concatenar Data e Hora
  	        var timer_date = timer_dta + " " + timer_hrs;

            // Variável passa dados para o .JS
  	        $.countdown(timer_date);

    		});
    	</script>
    	
    </body>
  </html>

countdown.js

$(document).ready(function(){

   "use strict";
   (function($){
   	$.fn.float = function(number){
   		if(number < 10){
   			return '0' + number;
   		} else {
   			return number;
   		}
   	};
   }(jQuery));


   (function($){
      var j = 0;
      $.countdown = function(time){
     	    var name = "countdown"+ j;

          var cname ="."+name;
          var newdate = new Date(time).getTime();  
          var countdown = setInterval(function(){
        	var now = new Date().getTime();
        	var dif = newdate - now;

            var days = Math.floor(dif / (1000*60*60*24));
            var hours = Math.floor((dif % (1000*60*60*24)/(1000*60*60)));
            var minutes = Math.floor((dif % (1000*60*60)/(1000*60)));            
            var seconds = Math.floor((dif % (1000*60)/(1000)));
 
            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML = seconds;    


            if(dif <= 0){
            	clearInterval(countdown);
                document.getElementById("days").innerHTML = "0";
                document.getElementById("hours").innerHTML = "0";
                document.getElementById("minutes").innerHTML = "0";
                document.getElementById("seconds").innerHTML = "0";
            }

        }, 500);

      };

   }(jQuery));

}); //Fim do document principal

Espero ter ajudado a quem precisar de um código parecido como o acima.

Atenciosamente,

Cesar

Entrar

PHP - CountDown chamar função sem usar na - body onLoad="settimer();"

Recommended Posts

violin101 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

violin101 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante