When the time reaches 0, the button gets disabled

Asked

Viewed 61 times

0

Well here’s the thing I got two files.

First File (index.php):

<!DOCTYPE html>
<html>
<head>
 <title>Teste</title>
 <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
 <script>
  function numero(a){
	  var nun = [];
	  nun[0] = -150;
	  nun[1] = -750;
	  nun[2] = -900;
	  nun[3] = -1050;
	  nun[4] = -1200;
	  nun[5] = -1425;
	  nun[6] = -450;
	  nun[7] = -600;
	  nun[8] = -675;
	  nun[9] = -525;
	  nun[10] = -375;
	  nun[11] = -225;
	  nun[12] = -1125;
	  nun[13] = -975;
	  nun[14] = -825;
	  return nun[a];
  }
  function fun(){
	$.ajax({
	url: 'aposta.php',
	success: function(a){
		if(a){
		a = JSON.parse(a);
		$("#tempo").html(a.time);
		$("#box").animate({
		  'background-position-x': numero(a.numero)
	  },500);
	  } else {
			$("#tempo").html("0");
	  }
	  }
	 }); 
 }
  setInterval(function(){
	 fun();
  }, 1000);
 </script>
 <style>
 body{
	 padding: 0;
	 border: 0;
	 margin: 0;
 }
 #box{
	max-width: 1125px;
    height: 75px;
	width: 815px;
	background-image: url("http://csgoroulette.blue/templates/1/assets/images/numbers.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
	position: relative;
    margin: 0px auto;
 }
 #ponteiro {
    background-color: #FFFF00;
    margin-left:50%;
    width: 5px;
    height: 75px;
}
#tempo{
	font-size: 28px;
}
 </style>
</head>
<body onload="fun();">
<div id="tempo"></div>
<div id="box"><div id="ponteiro"></div></div><br><br>
<button type="button" >Click Me!</button>
</body>
</html>

Second file (bet.php):

<?php
date_default_timezone_set('Brazil/East');
@set_magic_quotes_runtime(false);
ini_set('magic_quotes_runtime', 0);
$servername = "localhost";
$username = "root";
$password = "vertrigo";
$dbname = "csgodouble";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql_aposta = "SELECT id, numero_sorteado, hash, data_f,status FROM apostas where status = '0' ORDER BY status DESC LIMIT 1";
$result_aposta = $conn->query($sql_aposta);
if($result_aposta->num_rows > 0){

 while($row = $result_aposta->fetch_assoc()) {
    $agora = date("Y-m-d H:i:s");
    $soma = strtotime($agora) - strtotime($row['data_f']);
    if($row['data_f'] == 0){
        $sql_aposta = "UPDATE apostas SET data_f='".date("Y-m-d H:i:s", strtotime('+59 second'))."' WHERE id=".$row['id'];
        $conn->query($sql_aposta);
        exit;
    }else if($soma > 0){
        $sql_aposta = "UPDATE apostas SET status='1' WHERE id=".$row['id'];
        $conn->query($sql_aposta);
        exit;
    }   
    $json_str = array(
    'numero' => $row['numero_sorteado'],
    'hash' => $row['hash'],
    'data_f' => $row['data_f'],
    'time' => abs($soma)
    );

    echo json_encode($json_str);    
 }
}


?>

What I wanted to do was, when the value of $soma reached 0, the button in index.php was disabled, for 6 seconds, and after those 6 seconds again became Able and the circle repeated etc...

How can I do that?

Thank you.

php javascript html

1 answer

1


In his index php. leaves the function fun() as follows: 

function fun() {
    $.ajax({
        url: 'aposta.php',
        success: function(a){
            if(a) {
                a = JSON.parse(a);
                $("#tempo").html(a.time);

                if (a.time === 0) {
                    $('button').attr('disabled', 'disabled');
                    setTimeout(function() {
                        $('button').removeAttr('disabled');
                    }, 6000);
                }

                $("#box").animate({
                    'background-position-x': numero(a.numero)
                }, 500);
            }
            else {
                $("#tempo").html("0");
            }
        }
    });
};

Relevant part:

if (a.time === 0) {
    $('button').attr('disabled', 'disabled');
    setTimeout(function() {
        $('button').removeAttr('disabled');
    }, 6000);
}

The if() {} will identify that a. time is equal to 0, which I have identified from your code in php bet. is the value of $soma that you are interested.

If a. time for 0 then the button in index php. will be disabled. A timeout is then created, which will rehabilitate the button after 6 seconds.

  • Good is exactly what I wanted, but tell me one thing, if I want to apply this function to 3 butões with different ids how can I do? It has to be by the tag button or it can be by the id, not necessarily a button but an input type Submit. Thank you.

  • 1

    @Gonçalo that’s right, if you apply to more buttons you just use other selectors, for example the ID: $('#IDbotaoUm'); and then $('#IDbotaoDois');. Any selector serves. $('.classeBotoes'); also.

  • Thank you, the question has been exclaimed.

Browser other questions tagged php javascript html

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