Cópielo primero y vea el efecto de ejecución. La esencia utilizada es el método setInterval ():
Copie el código de código de la siguiente manera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<cabeza>
<título>JavaScript</título>
<estilo>
HTML
{
color de fondo: plata;
}
.punto1
{
posición:absoluta;
izquierda: 10px;
arriba: 40px;
}
.punto2
{
posición:absoluta;
izquierda: 100px;
arriba: 40px;
}
.hr1
{
posición:absoluta;
arriba: 60px;
}
</estilo>
<tipo de script="texto/JavaScript">
document.onmousedown = mousedown;
document.onmouseup = mouseup;
var intervaloProceso;
var directo = verdadero;
función mousedown(){
intervaloProceso = setInterval("MovePoint()", 1);
}
función mouseup(){
clearInterval(intervaloProceso);
}
función MovePoint(){
con (document.getElementById("punto1").estilo){
si (isNaN(parseInt(izquierda)))
izquierda = "10px";
demás {
document.getElementById("point2").style.left = "200px";
si (parseInt(izquierda) < 0)
directo = verdadero;
if (parseInt(izquierda) > parseInt(document.getElementById("point2").style.left))
directo = falso;
si (directo)
izquierda = parseInt(izquierda) + 1 + "px";
demás
izquierda = parseInt(izquierda) - 1 + "px";
}
}
}
</script>
</cabeza>
<cuerpo>
<div id="punto1"><font color=azul>a</font></div>
<div id="punto2"><font color=rojo>b</font></div>
<hora/>
</cuerpo>
</html>