停止Javascript函数

时间:2017-03-03 20:59:04

标签: javascript html function

我想在点击图片后停止JavaScript。一旦点击蜘蛛gif,它就变成了splatter.png,但是飞溅继续四处移动。我不太精通JavaScript,无法弄明白。如果您能提供帮助,请告诉我。谢谢!



var dir_h = 'right';
var dir_v = 'down';

function reset1() {
  clearTimeout(my_time);
  document.getElementById('i1').style.left = "500px";
  document.getElementById('i1').style.top = "100px";
  document.getElementById("msg").innerHTML = "";

}

function disp() {
  var step = 2; // to  Change speed change this step value
  //alert(dir);

  var y = document.getElementById('i1').offsetTop;
  var x = document.getElementById('i1').offsetLeft;
  if (x >= 900) {
    dir_h = 'left';
  }
  if (x <= 400) {
    dir_h = 'right';
  }
  if (dir_h == 'right') {
    x = x + step;
  } else {
    x = x - step;
  }

  if (y >= 500) {
    dir_v = 'up';
  }
  if (y <= 100) {
    dir_v = 'down';
  }

  if (dir_v == 'down') {
    y = y + step;
  } else {
    y = y - step;
  }

  document.getElementById('i1').style.top = y + "px"; // vertical movment
  document.getElementById('i1').style.left = x + "px"; // horizontal  movment

  //////////////////////
}

function timer() {
  disp();
  var y = document.getElementById('i1').offsetTop;
  var x = document.getElementById('i1').offsetLeft;
  document.getElementById("msg").innerHTML = "X: " + x + " Y : " + y
  my_time = setTimeout('timer()', 12);
}
&#13;
<html>

<head>
  <title>Spider Splat Test</title>

  <script src="spider.js"></script>


</head>

<body>
  <img name="myButton" src="spider-animated-1.gif" id='i1' onClick="document.myButton.src='splatter.png';" onClick="document.myButton.src='spider-animated-1.gif';" style="position:absolute; left: 500; top: 100;">

  <br><br><br><br>

  <input type=button onClick=timer() value='Start'>
  <input type=button onClick=reset1() value='Reset'>
  <div id='msg'></div>

</body>

</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

在蜘蛛的 long startTime = System.currentTimeMillis(); // do the requests long currentTime = System.currentTimeMillis(); long timePassed = currentTime-startTime; long millisInHour = 60*60*1000; long timeToWait = millisInHour - timePassed; Thread.sleep(timeToWait); 代码中调用重置功能。<​​/ p>

onclick

此外,在同一元素中包含两个<img name="myButton" src="spider-animated-1.gif" id='i1' onclick="reset1(); document.myButton.src='splatter.png';" style="position:absolute; left: 500; top: 100;"> 属性也没有意义。

答案 1 :(得分:0)

AFAIU所需要的只是点击图片:

&#13;
&#13;
var dir_h = 'right';
var dir_v = 'down';

function reset1() {
  clearTimeout(my_time);
  document.getElementById('i1').style.left = "500px";
  document.getElementById('i1').style.top = "100px";
  document.getElementById("msg").innerHTML = "";

}

function disp() {
  var step = 1; // to  Change speed change this step value
  //alert(dir);

  var y = document.getElementById('i1').offsetTop;
  var x = document.getElementById('i1').offsetLeft;
  if (x >= 900) {
    dir_h = 'left';
  }
  if (x <= 400) {
    dir_h = 'right';
  }
  if (dir_h == 'right') {
    x = x + step;
  } else {
    x = x - step;
  }

  if (y >= 500) {
    dir_v = 'up';
  }
  if (y <= 100) {
    dir_v = 'down';
  }

  if (dir_v == 'down') {
    y = y + step;
  } else {
    y = y - step;
  }

  document.getElementById('i1').style.top = y + "px"; // vertical movment
  document.getElementById('i1').style.left = x + "px"; // horizontal  movment

  //////////////////////
}

function timer() {
  disp();
  var y = document.getElementById('i1').offsetTop;
  var x = document.getElementById('i1').offsetLeft;
  document.getElementById("msg").innerHTML = "X: " + x + " Y : " + y
  my_time = setTimeout('timer()', 12);
}
&#13;
<html>

<head>
  <title>Spider Splat Test</title>

  <script src="spider.js"></script>


</head>

<body>
  <img onClick=reset1() name="myButton" src="spider-animated-1.gif" id='i1' style="position:absolute; left: 500; top: 100;">

  <br><br><br><br>

  <input type=button onClick=timer() value='Start'>
  <input type=button onClick=reset1() value='Reset'>
  <div id='msg'></div>

</body>

</html>
&#13;
&#13;
&#13;

我降低了速度,因此我们的测试更加舒适