自动播放功能未在JS中执行

时间:2016-02-11 15:39:42

标签: javascript html

我有点棒球比赛,显然没有基地或命中。它所有的stikes,球和出局。按钮工作,局(顶部和底部以及计数)的功能正常工作。我想让它理想地每隔几秒就随机地抛出一个音高。基本上是随机点击"点击"球或击球按钮。我试图使用setTimeout函数没有成功。有什么帮助吗?

HTML:

  <!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="bullpen.css"> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Bullpen</title>
    </head>
</html>
    <body>

        <button id=buttons onclick="playBall()">Auto-Play</button>
        <h2>Inning: <span id=inningHalf></span> <span id=inningNum></span></h2>

    <div id=buttons>
        <button onclick="throwBall(), newInning()">Ball</button>
        <button onclick="throwStrike(), newInning()">Strike</button>
    </div>

        <h2>Count: <span id=ball>0</span> - <span id=strike>0</span></h2>
        <h2>Outs: <span id=out>0</span></h2>

        <h2>----------------</h2>

        <h2>Walks: <span id=walks>0</span></h2>
        <h2>Strikeouts: <span id=strikeout>0</span></h2>

        <script src="bullpen.js"></script>
    </body>
</html>

JS:

  var ball = 0;
var strike = 0;
var out = 0;
var walks = 0;
var strikeout = 0;
//---------------------------------
var outPerInning = 0;
var inning = 1;
//---------------------------------
document.getElementById('inningNum').innerHTML = inning;
document.getElementById('inningHalf').innerHTML = '▲';

function throwBall(){
    ball++;
    document.getElementById('ball').innerHTML = ball;

    if (ball == 4){
    ball = 0;
    strike = 0;
    walks++;

    document.getElementById('walks').innerHTML = walks;
    document.getElementById('strike').innerHTML = 0;
    document.getElementById('ball').innerHTML = 0;
    }
};

function throwStrike(){
    strike++;
    document.getElementById('strike').innerHTML = strike;

    if(strike == 3){
    ball = 0;
    strike = 0;
    strikeout++; 

    out++;
    outPerInning++;

    document.getElementById('strikeout').innerHTML = strikeout;
    document.getElementById('out').innerHTML = out;
    document.getElementById('strike').innerHTML = 0;
    document.getElementById('ball').innerHTML = 0;
    } 
};


function newInning(){
    if(out == 3){
    ball=0;
    strike=0;
    out=0;

    document.getElementById('strike').innerHTML = 0;
    document.getElementById('ball').innerHTML = 0;
    document.getElementById('out').innerHTML = 0;
    }

    if(outPerInning == 3){
    document.getElementById('inningHalf').innerHTML = '▼';
    }

    if(outPerInning == 6){
        inning++;
    document.getElementById('inningHalf').innerHTML = '▲';
        outPerInning = 0;
    document.getElementById('inningNum').innerHTML = inning;
    } 
};

function playBall(){
    var play = Math.random;
    if(play >= 0.4){
        throwStrike();
        newInning();
    }
    else{
        throwBall();
        newInning();
    }

    setTimeout(playBall, 5000);
};

CSS如果需要:

    h2{
    margin-left: 50px;
    font-size: 50px;
}

button{
    font-size: 45px;
}

#buttons{
    width: 227px;
    margin-left:50px;
    margin-top: 20px;
}

1 个答案:

答案 0 :(得分:0)

也许这就是问题:

function playBall(){
    var play = math.random;
    if(play >= 0.4){
        throwStrike;
        newInning();
    }
    else{
        throwBall;
        newInning();
    }

    setTimeout(playBall, 5000);
};

应该是

function playBall(){
    var play = Math.random();
    if(play >= 0.4){
        throwStrike(); //call the function
        newInning();
    }
    else{
        throwBall(); //call the function
        newInning();
    }

    setTimeout(playBall, 5000);
};

您没有调用这些功能!

这是一个工作小提琴:https://jsfiddle.net/av6vsp7g/