Question

所以我的网站基本上显示了你被“抛出”（棒球）的罢工百分比。如果百分比高于60，我已将JavaScript设置为显示gif。但是，图像似乎忽略了我为图像设置的CSS。任何解决方案？

这是我的HTML：

<!DOCTYPE html>
    <title>Javascript Time</title>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="testingJS.css">
        <script src="testingJS.js" type="text/javascript"></script>
    </head>
    <body>

        <h2>Javascript</h2>

        <p id="change">Strike Percent Counter</p>

        <p><input type="button" value="Ball" class="btn" onclick="throwBall()"></p>
        <p><input type="button" value ="Strike" class="btn" onclick="throwStrike()"></p>

        <p>Percent of Strikes:</p>
        <strong><p id="percent"></p></strong> 

        <img id="winner" src="">

    </body>
</html>

我的CSS：

p, H2{
    margin-bottom: -25px;
    font-size: 35px;
    color: white;
    text-align: center;
}

#percent{
    position: relative;
    margin: 20px auto auto auto;
    width: 25%;
    font-size: 55px;
    text-emphasis: 5px;
    border: 7px solid gold;
}

.btn{
    font-size: 29px;
    float: center;
}

#winner{
    margin: auto auto auto auto;
}

body{
    background-image: url("http://static.zoonar.com/img/www_repository3/db/3a/39/10_4baf1185c09f28bcbe957e13a0c34fca.jpg");
}

我的JavaScript：

var ball = 0;
var strike = 0;

function throwBall(){
    ball++;
    var percent = strike / (ball + strike);
    var round = percent.toFixed(2) * 100;
    document.getElementById("percent").innerHTML = round + "%";

    if (round <= 60){
        document.getElementById("winner").src = "";
    }
}

function throwStrike(){
    strike++;
    var percent = strike / (ball + strike);
    var round = percent.toFixed(2) * 100;
    document.getElementById("percent").innerHTML = round + "%";
     if (round > 60){
        document.getElementById("winner").src =     "https://media.giphy.com/media/NxA9Wmq8ISblK/giphy.gif";
    }
}

我这样做完全是出于练习我的技能而且已经坚持了一段时间。提前谢谢！

Answer 1

如果要在中间显示元素，请将width属性设置为适合宽度，display属性设置为block和margin:0 auto;

小提琴：https://jsfiddle.net/7vuzwx8z/

图像边距不变。可能是因为我的javascript？

1 个答案: