我的问题是：如何在满足正确条件的情况下弹出图像。如果发生这种情况，会弹出此图像，如果发生这种情况，则会弹出不同的图像。
我无法让它发挥作用。
您将看到的代码在这里：
function myMove()
{
var elemBluefish = document.getElementById("bluefish");
var elemTurtle = document.getElementById("turtle");
var posBluefish = 0;
var posTurtle = 0;
var id = setInterval(frame, 5);
function frame()
{
if(posBluefish >= 1150 && posTurtle >= 1150)
{
clearInterval(id);
return;
}
if(posBluefish < 1140)
{
posBluefish += Math.round(Math.random()*10);
if(posBluefish > 1140)
{
posBluefish = 1140;
}
elemBluefish.style.left = posBluefish + 'px';
}
if(posTurtle < 1140)
{
posTurtle += Math.round(Math.random()*10);
if(posTurtle > 1140)
{
posTurtle = 1140;
}
elemTurtle.style.left = posTurtle + 'px';
}
}
}
<!DOCTYPE html>
<body>
<button onclick="letsRace()">Start!</button>
<img id="stoplight" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg"/>
<style>
body {
overflow: hidden;
}
#myStoplight {
position: absolute;
width: 10pc;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
left: .5pc;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#stoplight{
position:absolute;
width:10pc;
}
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<div id="container">
<div id="animate"></div>
发生的事情基本上是两张图像以随机间隔竞争到1140位置，所以每次都不会赢。
我希望能够在乌龟身上展示一个图像，并且＆＃34;乌龟赢了！＆＃34;或者是蓝色鱼的形象和＃34;鱼赢了＃34;取决于谁先到1140年。
有什么想法吗？
提前致谢。
答案 0 :(得分：0)
在if语句中只需要另一个if语句来终止setInterval。这将提醒在完成比赛后赢得的用户。
function letsRace()
{
var elemBluefish = document.getElementById("bluefish");
var elemTurtle = document.getElementById("turtle");
document.getElementById("winfish").style.visibility = "hidden";
document.getElementById("winturtle").style.visibility = "hidden";
var posBluefish = 0;
var posTurtle = 0;
var winner = null;
var id = setInterval(frame, 5);
function frame()
{
if(posBluefish < 1140)
{
posBluefish += Math.round(Math.random()*10);
if(posBluefish > 1140)
{
posBluefish = 1140;
}
elemBluefish.style.left = posBluefish + 'px';
}
if(posTurtle < 1140)
{
posTurtle += Math.round(Math.random()*10);
if(posTurtle > 1140)
{
posTurtle = 1140;
}
elemTurtle.style.left = posTurtle + 'px';
}
if(posBluefish >= 1140 || posTurtle >= 1140)
{
if(winner == null){
if(posBluefish >= 1140 && posTurtle < 1140){
winner = "fish";
}else if (posBluefish < 1140 && posTurtle >= 1140){
winner = "turtle";
}else{
winner = "no one";
}
}
if(posBluefish >= 1140 && posTurtle >= 1140){
clearInterval(id);
renderWinner();
}
}
}
function renderWinner(){
document.getElementById("win" + winner).style.visibility = "visible";
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button onclick="letsRace()">Start!</button>
<img id="stoplight" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg"/>
<style>
body {
overflow: hidden;
}
#myStoplight {
position: absolute;
width: 10pc;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
left: .5pc;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#stoplight{
position:absolute;
width:10pc;
}
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<img id="winfish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png" style = "visibility: hidden">
<img id="winturtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png" style = "visibility: hidden">
<div id="container">
<div id="animate"></div>