En esta práctica de JavaScript he puesto en práctica el uso del control de
tiempo en este lenguaje de programación.
Para poder comprender el código de esta práctica es muy importante conocer el uso de las funciones setInterval( ) y clearInterval( ). Como ayuda puedes echarle un vistazo a los siguientes enlaces:
Imágenes usadas
 |
 |
 |
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="caja">
<div id="bola">
<img src="imagenes/bola.png" id="imagenBola" alt="Bola" />
</div>
<div id="bolo">
<img src="imagenes/boloVertical.png" id="imagenBoloVertical" alt="Bolo vertical" />
</div>
</div>
<p><input type="button" id="boton" value="Lanzar bola" /></p>
</body>
</html>Código CSS
*{
text-align: center;
}
#caja {
position: relative;
width: 800px;
height: 200px;
margin: 40px auto;
border: 2px solid black;
}
#bola {
position: absolute;
top: 135px;
}
#bolo {
position: absolute;
top: 48px;
}
#boloHorizontal{
position: absolute;
top: 145px;
left: 600px;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
//POSICIÓN INICIAL DE LA BOLA Y EL BOLO
document.getElementById("bola").style.left = "10px";
document.getElementById("bolo").style.right = "150px";
//----------------------------------------------------
document.getElementById("boton").addEventListener("click", movimientoBola, false);
}
let desplazar = 0;
let movimiento;
function moverBola() {
let bola = document.getElementById("bola");
let bolo = document.getElementById("bolo");
let boloVertical = document.getElementById("imagenBoloVertical");
document.getElementById("boton").disabled = true;
desplazar += 1;
let posicion = desplazar + "px";
if (posicion == "545px") {
clearInterval(movimiento);
boloVertical.src = "imagenes/boloHorizontal.png";
bolo.id = "boloHorizontal";
} else {
bola.style.left = posicion;
}
}
function movimientoBola() {
movimiento = setInterval(moverBola, 5);
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.