Copiez-le d'abord et voyez l'effet en cours d'exécution. L'essence utilisée est la méthode setInterval() :
Copiez le code comme suit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<tête>
<titre>JavaScript</titre>
<style>
HTML
{
couleur d'arrière-plan : argent ;
}
.point1
{
position : absolue ;
gauche : 10 px ;
haut : 40 px ;
}
.point2
{
position : absolue ;
gauche : 100 px ;
haut : 40 px ;
}
.hr1
{
position : absolue ;
haut : 60 px ;
}
</style>
<script type="text/JavaScript">
document.onmousedown = mousedown;
document.onmouseup = mouseup;
var intervalleProcess;
var direct = vrai ;
fonction mousedown(){
intervalProcess = setInterval("MovePoint()", 1);
}
fonction mouseup(){
clearInterval(intervalleProcess);
}
fonction MovePoint(){
avec (document.getElementById("point1").style){
si (isNaN(parseInt(gauche)))
gauche = "10px" ;
autre {
document.getElementById("point2").style.left = "200px";
si (parseInt(gauche) < 0)
direct = vrai ;
if (parseInt(left) > parseInt(document.getElementById("point2").style.left))
direct = faux ;
si (direct)
gauche = parseInt(gauche) + 1 + "px" ;
autre
gauche = parseInt(gauche) - 1 + "px" ;
}
}
}
</script>
</tête>
<corps>
<div id="point1"><font color=blue>a</font></div>
<div id="point2"><font color=red>b</font></div>
<heure />
</corps>
</html>