Question

我已经开始了我自己的第一个JS项目。最后，我想拥有自己的老虎机。到现在为止，我遇到了一个问题，我不知道如何重新启动我的程序，或者只是一次又一次地生成新的随机值的函数。这是我的代码，直到现在：

＆＃13;

var randomX1 = Math.ceil(Math.random() * 10 );
var randomX2 = Math.ceil(Math.random() * 10 );
var randomX3 = Math.ceil(Math.random() * 10 );

function randomClickX() {
    document.getElementById("randomX1").innerHTML = randomX1;
    document.getElementById("randomX2").innerHTML = randomX2;
    document.getElementById("randomX3").innerHTML = randomX3;

    var ausgabe = "Play again";
    if (randomX1 === randomX2) {
    if(randomX2 === randomX3) {
        var ausgabe = "Jackpot";
        }
    }


    var chance = ausgabe;
    function clickChance() {
        document.getElementById("chance").innerHTML = chance;
    }
    document.getElementById('spanId').innerHTML = chance;
};

＆＃13;

.slot-container {
    border: 5px solid red;
    vertical-align: middle;
    font-size: 50px;
    font-family: Leelawadee UI Semilight, Calibri, Arial;
    width: 90%;
    margin: auto;
    height: 0;            
    padding-bottom: 30%;   
}


.slot {
    border: 3px solid green;
    height: 0;
    padding-bottom: 30%;
    width: 32%;
    margin-right: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
    float: left; 
    box-sizing: border-box;
}

#slot1 {
    margin-left: 1%;
}


h1 {
    color: #FC3FD3;
    text-align: center;
    font-family: Century Gothic;
    font-size: 5em;
    height: 50px;
}

p {
    text-align: center;
    vertical-align: middle;
    justify-content: center;
}


button {
    position: relative;
    font-size:20px;
    display: block;
    background-color: white;
    color: black;
    border: 2px solid green;
    width: 90%;
    position: middle;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;


}

button:hover {
    background-color: green;
}

button.spin-button {
    color: blue;
    position: absolute;
    height: 20%;
}



.answer {
    font-family: Century Gothic;
    font-size: 20px;
    color: red;
    text-align: center;
    margin-top: 10px;
}

ul.menubar {
    list-style-type: none; 
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #008000;
}

ul.menubar li {
    float: left; 
}

ul.menubar li a {
    color: black;
    display: inline-block;
    text-align: center;
    padding:15px 20px;
    text-decoration: none; 
    transition: 0.3s; 
    font-family: Century Gothic;
}

ul.menubar li a:hover {
    background-color: #00A300;
}

＆＃13;

<!DOCTYPE HTML>

<html>

<head>
  <title>Slotmachine</title>
  <script type="text/javascript" src="#.js"></script>
  <link type="text/css" rel="stylesheet" href="#.css" />
</head>

<body>
    <ul class="menubar" id=topmenubar>
        <li><a href="#linkHome">Home</a></li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
        <li><a href="#linkContact">Contact</a></a></li>
        <li><a href="#linkAbout">About</a></li>
    </ul>


    <h1>1-10</h1>


    <button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
    <div class="slot-container">
        <div id="slot1" class="slot">
            <p> <!-- Your random number: --> <a id="randomX1">0</a></p>
        </div>
        <div id="slot2" class="slot">
            <p> <!-- Your random number: --> <a id="randomX2">0</a></p>
        </div>
        <div id="slot3" class="slot">
            <p> <!-- Your random number: --> <a id="randomX3">0</a></p>
        </div>
        </div>
    </div>


    <div class="answer" id="spanId">Test #1<a id="spanId"> </div>


</body>

</html>

＆＃13;

如您所见，我已重新加载HTML文件，再次单击SPIN按钮以获得新的randoms。我认为重点是创建一个大的综合函数，并在SPIN函数结束时调用它。但我现在不知道如何做到这一点...... 丢失的步骤是什么，拥有与用户希望拥有的一样多的值？

谢谢，Jonas

Answer 1

只需将生成的随机数移动到点击方法中即可。

＆＃13;

function randomClickX() {
    var randomX1 = Math.ceil(Math.random() * 10 );
    var randomX2 = Math.ceil(Math.random() * 10 );
    var randomX3 = Math.ceil(Math.random() * 10 );

    document.getElementById("randomX1").innerHTML = randomX1;
    document.getElementById("randomX2").innerHTML = randomX2;
    document.getElementById("randomX3").innerHTML = randomX3;

    var ausgabe = "Play again";
    if (randomX1 === randomX2) {
    if(randomX2 === randomX3) {
        var ausgabe = "Jackpot";
        }
    }


    var chance = ausgabe;
    function clickChance() {
        document.getElementById("chance").innerHTML = chance;
    }
    document.getElementById('spanId').innerHTML = chance;
};

＆＃13;

.slot-container {
    border: 5px solid red;
    vertical-align: middle;
    font-size: 50px;
    font-family: Leelawadee UI Semilight, Calibri, Arial;
    width: 90%;
    margin: auto;
    height: 0;            
    padding-bottom: 30%;   
}


.slot {
    border: 3px solid green;
    height: 0;
    padding-bottom: 30%;
    width: 32%;
    margin-right: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
    float: left; 
    box-sizing: border-box;
}

#slot1 {
    margin-left: 1%;
}


h1 {
    color: #FC3FD3;
    text-align: center;
    font-family: Century Gothic;
    font-size: 5em;
    height: 50px;
}

p {
    text-align: center;
    vertical-align: middle;
    justify-content: center;
}


button {
    position: relative;
    font-size:20px;
    display: block;
    background-color: white;
    color: black;
    border: 2px solid green;
    width: 90%;
    position: middle;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;


}

button:hover {
    background-color: green;
}

button.spin-button {
    color: blue;
    position: absolute;
    height: 20%;
}



.answer {
    font-family: Century Gothic;
    font-size: 20px;
    color: red;
    text-align: center;
    margin-top: 10px;
}

ul.menubar {
    list-style-type: none; 
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #008000;
}

ul.menubar li {
    float: left; 
}

ul.menubar li a {
    color: black;
    display: inline-block;
    text-align: center;
    padding:15px 20px;
    text-decoration: none; 
    transition: 0.3s; 
    font-family: Century Gothic;
}

ul.menubar li a:hover {
    background-color: #00A300;
}

＆＃13;

<!DOCTYPE HTML>

<html>

<head>
  <title>Slotmachine</title>
  <script type="text/javascript" src="#.js"></script>
  <link type="text/css" rel="stylesheet" href="#.css" />
</head>

<body>
    <ul class="menubar" id=topmenubar>
        <li><a href="#linkHome">Home</a></li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
        <li><a href="#linkContact">Contact</a></a></li>
        <li><a href="#linkAbout">About</a></li>
    </ul>


    <h1>1-10</h1>


    <button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
    <div class="slot-container">
        <div id="slot1" class="slot">
            <p> <!-- Your random number: --> <a id="randomX1">0</a></p>
        </div>
        <div id="slot2" class="slot">
            <p> <!-- Your random number: --> <a id="randomX2">0</a></p>
        </div>
        <div id="slot3" class="slot">
            <p> <!-- Your random number: --> <a id="randomX3">0</a></p>
        </div>
        </div>
    </div>


    <div class="answer" id="spanId">Test #1<a id="spanId"> </div>


</body>

</html>

＆＃13;

Answer 2

只需再次调用该函数，然后返回，如下所示：

function myFunction() {
  //stuff...
  if(condition) {
    myFunction();
    return;
  }
}

if部分当然是可选的，我不确定你的确切应用。如果你需要返回值，它就是一行，如下所示：return myFunction（）;

如何重置JavaScript随机数生成器

2 个答案: