Barra de progreso incremental y cada minuto reinicie a 0% y haga SQL UPDATE.

  • Autor Autor DiegoHeras
  • Fecha de inicio Fecha de inicio
D

DiegoHeras

Gamma
Programador
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola a todos,

Quisiera pedirles ayuda con este código de JS por si alguien sabe cómo hacerlo.

Quiero hacer una barra de progreso que:
  • Avance automáticamente hasta llegar a 100% (cada 60 segundos, de 0% a 100%).
  • Cuando llegue a 100% la barra reinicie a 0%.
  • Cuando llegue a 100% haga un SQL UPDATE (ej: UPDATE users SET score=score+1 WHERE id='1').

Ejemplo de HTML+CSS:
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>
 
Última edición:
Hasta ahora no veo que llames a otra cosa que al css.
Donde esta el js? Tu quieres que te demos el código?

How TO JS Progress Bar
 
arnego2 dijo:
Hasta ahora no veo que llames a otra cosa que al css.
Donde esta el js? Tu quieres que te demos el código?

How TO JS Progress Bar
Hacer clic para expandir...

Esto sería. Ahora creo que con Ajax el SQL y ya.
HTML: 
<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress" >
  <div id="myBar">0%</div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;//Empieza en 0%
  var id = setInterval(frame, 10);//Aumenta uno cada 100ms.
  function frame() {
    if (width >= 100) {
      width=0;
      //Codigo SQL.
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>
 
Te falta que haga la conexion a SQL

Cuando llegue a 100% haga un SQL UPDATE

Estas claro que SQL solamente funciona con aspx.net, C# o ambiente Windows?
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba