由于外部js文件中的window.onload = function（）{}，因此onclick停止不起作用。我正在尝试停止动画。在内部js文件中工作的代码是var stop = setInterval（animate，60）; 函数stop（）{clearInterval（stop）; 如果我在window.onload之外编写代码，则它无法引用其中的动画函数。html文件也作为外部js文件在下面给出。
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cable Car</title>
<meta name="Description" content="Using Canvas">
<meta name="robots" content="noindex">
<!-- This is a HTML Comment -->
<!-- Below is the HTML Shim that uses a conditional comment -->
<!--[if lt IE 9]> <script src="dist/html5shiv.js"></script><![endif]-->
<script src="scripts/stackoverflow.js" type="text/javascript"></script>
<style>
.leftBar {
width: 15%;
height: 80%;
float: left;
}
.middleBar {
width: 60%;
height: 80%;
float: left;
margin: 20px;
}
</style>
</head>
<body>
<header role="banner">
<h1>Canvas and animation</h1>
<hr>
</header>
<aside role="complementary" class="leftBar">
<button id="stop" onclick="stop()" >Stop</button>
<p>Stop the animation</p>
</aside>
<main>
<article class="middleBar">
<canvas id="canvas" width="650" height="350"></canvas>
</article>
</main>
<footer role="contentinfo">
<hr>
<p><small>
Copyright ©2016. All rights reserved</small>
</p>
</footer>
</body>
</html>
以下是外部js文件
window.onload = function(){
var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
//the image object being created and loaded
var pict = new Image();
pict.src = "images/cablecar23.png";
pict.onload = function(){
ctx.drawImage(pict,0,-10,pict.width*0.25,pict.height*0.25);
}
//the moving image
x = 0;
y = -17;
/*this change variable determines how far the car moves in a redraw and direction */
change = 2;
//width and height are dimensions of the box
w = 650;
h = 100;
function animate() {
ctx.clearRect(0, 0, w, h);
ctx.drawImage(pict, x, y,pict.width*0.25, pict.height*0.25);
//checking cable car position
if(x >=630) {
//if thecar is on extreme right then it exits the screen
change = 0;
}
//update horizontal position
x = x + change;
}
//cause function to repeat with milliseconds
//calling the animate function to start the cable car
var stop = setInterval(animate,60);
//below function is not referenced
function stop(){
clearInterval(stop);
}
}
更改变量的名称，stop使其与函数名称不同
对外宣扬 onload
var intervalStop;
function stop(){
clearInterval(intervalStop);
}
内部负载变化
var stop = setInterval(animate,60);
至
intervalStop = setInterval(animate,60);
如果您不打算使用内联脚本并使用不引人注目的事件侦听器，那么您就不会有任何此问题
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句