停止使用Javascript功能

-1

我希望JavaScript在图片被点击后停止。一旦蜘蛛gif被点击，它会变成一个splatter.png，但飞溅继续移动。我不太流利的JavaScript来搞清楚。如果你能帮助，请让我知道。谢谢！停止使用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); 
 
}

<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>

来源

2017-03-03 Orion Hughes

您可以随时“返回退出的方法“keywork –

你能告诉我一个小例子吗？ Javascript并不是我的强项。 –

在'onclick'函数中调用'reset1（）'。 – Barmar

呼叫在蜘蛛的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;">

此外，在同一元素中有两个onclick属性没有意义。

来源

2017-03-03 21:18:52 Barmar

AFAIU所有你需要的是院校布局结构调整的onClick图片：

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); 
 
}

<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>

我减速。所以我们的测试更舒适

来源

2017-03-03 21:22:55

停止使用Javascript功能

回答

相关问题