我的问题是:如何在满足正确条件的基础上弹出图像。如果发生这种情况，就会弹出这张图片，如果发生这种情况，就会弹出另一张图片。
我无法让它正常工作。
您将要查看的代码在此处:
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，因此不会每次都相同。
我希望能够在乌龟上显示图像并且“乌龟赢了!”或蓝色鱼的图像和“鱼赢”取决于谁先到达 1140。
有什么想法吗？
提前致谢。
最佳答案
您只需要 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>关于javascript - 如何根据满足条件弹出图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40516135/