我开发了一个你可以在下面看到的动画....动画是无限时间..我有一些条件..
1.）如果单击按钮，球会上下移动，然后必须停在默认位置... 2.）如果你第二次点击按钮，它将显示两个球相撞......如何解决这个问题通过javascript
function animationone(cobj) {
var circle = document.getElementById("circle" + cobj);
var h = window.innerHeight - 50;
var btmPos = 0;
var isForward = true;
setInterval(function () {
if (btmPos < h && isForward) {
btmPos += 10;
isForward = true;
} else {
if (btmPos > 20) {
isForward = false;
btmPos -= 10;
} else {
btmPos += 10;
isForward = true;
}
}
circle.style.bottom = btmPos + "px";
}, 100);
};body{
background-color: gray;
position: relative;
min-height: 558px;
}
.overall{
position: absolute;
bottom: 0;
width: 100%;
}
.box, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{
width: 9%;
text-align: center;
float: left;
margin-right: 5px;
}
#circle1, #circle2, #circle3, #circle4, #circle5, #circle6, #circle7, #circle8, #circle9, #circle10{
width: 45px;
height: 45px;
background-color: violet;
z-index: 10;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
display: table;
position: absolute;
bottom: 16px;
}<div class="overall">
<div class="box">
<p id="circle1"></p>
<hr>
<button onclick="animationone(1)">Button 1</button>
</div>
<div class="box2">
<p id="circle2"></p>
<hr>
<button onclick="animationone(2)">Button 2</button>
</div>
<div class="box3">
<p id="circle3"></p>
<hr>
<button onclick="animationone(3)">Button 3</button>
</div>
<div class="box4">
<p id="circle4"></p>
<hr>
<button onclick="animationone(4)">Button 4</button>
</div>
<div class="box5">
<p id="circle5"></p>
<hr>
<button onclick="animationone(5)">Button 5</button>
</div>
<div class="box6">
<p id="circle6"></p>
<hr>
<button onclick="animationone(6)">Button 6</button>
</div>
<div class="box7">
<p id="circle7"></p>
<hr>
<button onclick="animationone(7)">Button 7</button>
</div>
<div class="box8">
<p id="circle8"></p>
<hr>
<button onclick="animationone(8)">Button 8</button>
</div>
<div class="box9">
<p id="circle9"></p>
<hr>
<button onclick="animationone(9)">Button 9</button>
</div>
<div class="box10">
<p id="circle10"></p>
<hr>
<button onclick="animationone(10)">Button 10</button>
</div>
</div>
答案 0 :(得分：1)
要停止间隔，请执行以下操作： 把它放到变量中：
window.runner=window.setInterval(...,1000);
现在你可以使用以下方法停止它：
window.clearInterval(window.runner);
如您所见，我已将其添加到窗口范围内，以便您可以清除每个功能内部的间隔。
答案 1 :(得分：1)
我不确定我是否理解了你的问题，但基于我假设你希望你的动画在没有创造更多的情况下运行的互动。
我清除了间隔以达到这个目的。否则，将在现有区间之上创建新区间。每个按钮都有自己的动画，因此间隔是彼此分开的。
我为每个按钮分配了一个interval属性来存储值。最好存储这是元素数据对象。 HTML onclick事件现在也传入元素的引用，因此在参数列表中传递this。
function animationone(cobj, button) {
if (button.interval) clearInterval(button.interval); // clear the interval if an interval already exists
var circle = document.getElementById("circle" + cobj);
var h = window.innerHeight - 50;
var btmPos = 0;
var isForward = true;
var interval = setInterval(function() {
if (btmPos < h && isForward) {
btmPos += 10;
isForward = true;
} else {
if (btmPos > 20) {
isForward = false;
btmPos -= 10;
} else {
btmPos += 10;
isForward = true;
}
}
circle.style.bottom = btmPos + "px";
}, 100);
button.interval = interval; // set the new interval reference
};body {
background-color: gray;
position: relative;
min-height: 558px;
}
.overall {
position: absolute;
bottom: 0;
width: 100%;
}
.box,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8,
.box9,
.box10 {
width: 9%;
text-align: center;
float: left;
margin-right: 5px;
}
#circle1,
#circle2,
#circle3,
#circle4,
#circle5,
#circle6,
#circle7,
#circle8,
#circle9,
#circle10 {
width: 45px;
height: 45px;
background-color: violet;
z-index: 10;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
display: table;
position: absolute;
bottom: 16px;
}<div class="overall">
<div class="box">
<p id="circle1"></p>
<hr>
<button onclick="animationone(1, this)">Button 1</button>
<!-- note the extra agrument "this" -->
</div>
<div class="box2">
<p id="circle2"></p>
<hr>
<button onclick="animationone(2, this)">Button 2</button>
</div>
<div class="box3">
<p id="circle3"></p>
<hr>
<button onclick="animationone(3, this)">Button 3</button>
</div>
<div class="box4">
<p id="circle4"></p>
<hr>
<button onclick="animationone(4, this)">Button 4</button>
</div>
<div class="box5">
<p id="circle5"></p>
<hr>
<button onclick="animationone(5, this)">Button 5</button>
</div>
<div class="box6">
<p id="circle6"></p>
<hr>
<button onclick="animationone(6, this)">Button 6</button>
</div>
<div class="box7">
<p id="circle7"></p>
<hr>
<button onclick="animationone(7, this)">Button 7</button>
</div>
<div class="box8">
<p id="circle8"></p>
<hr>
<button onclick="animationone(8, this)">Button 8</button>
</div>
<div class="box9">
<p id="circle9"></p>
<hr>
<button onclick="animationone(9, this)">Button 9</button>
</div>
<div class="box10">
<p id="circle10"></p>
<hr>
<button onclick="animationone(10, this)">Button 10</button>
</div>
</div>