彩票 Javascript

Question

我必須在 javascript、html 和 css 中進行某種彩票。 我的 html 和 css 已經完成了，問題是我不知道如何生成隨機數並顯示之前的滾動。 最后它應該是這樣的： 所以當按下應該彈出的按鈕時。 這是我的其他代碼（html 和 css： https://codepen.io/TIHOW1/pen/rNNbMqm ）

我唯一需要的是 javascript。

Html：

<!DOCTYPE html>
<html>
<head>
    <title>Hipster powered lottery</title>

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css"/>
    <link rel="stylesheet" href="assets/css/style.css" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="assets/js/main.js"></script>

</head>
<body>
<div id="container" class="cf">
    <header>
        <h1>Hipster Powered Lottery</h1>

    </header>

    <section>
        <h2>Play with our wonderful lottery est. 1831</h2>
        <a href="#" id="generate" onclick="generatenumbers()">Generate my numbers!</a>
        <ul id="generated"></ul>

    </section>
    <aside>
        <h2>Previously generated set</h2>
        <ul id="previous"></ul>

    </aside>
</div>

</body>
</html>

CSS：


/*---------------------*/
/*   GENERAL ELEMENTS  */
/*---------------------*/


body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 1rem;
    color: #333333;
    background-color: #FFFFFF;
    padding-top: 1px;
    padding-bottom: 25px;
    background-image: url(../media/bg.gif);
}

h1 {
    background-image: url(../media/hipster-powered-lottery.png);
    background-position: top left;
    background-repeat: no-repeat;
    height: 196px;
    width: 395px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;

    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1%;
}

h2 {
    font-weight: bold;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 15px;
}
/*---------------------*/
/*   GENERAL CLASSES   */
/*---------------------*/

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

.column {
    float: left;
}

.hide {
    display: none;
}

.errormessage {
    color: #FF0000;
}


/*---------------------*/
/* CONTAINING ELEMENTS */
/*---------------------*/

#container {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

/*------------------------*/
/* PAGE SPECIFIC ELEMENTS */
/*------------------------*/

/* --- Generation --- */
#generate {
    text-align: center;
    width: 20%;
    display: block;
    background-color: #3c3c3c;
    color: #FFFFFF;
    text-decoration: none;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    line-height: 35px;
    padding: 3px;
    margin-bottom: 25px;
}

#generate:hover {
    background-color: #c83c3c;
    border-color: #c83c3c;
}
#generated {
    text-align: center;
    margin-bottom: 25px;
}
#generated li, #generated span {
    background-image: url(../media/number.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 101px;
    width: 101px;
    height: 101px;
    text-align: center;
    line-height: 101px;
    color: #FFFFFF;
    display: inline-block;
    margin-right: 25px;
    font-size: 1.6rem;
}

#generated .joker {
    background-image: url(../media/joker.png);
    width: 100px;
    height: 115px;
    line-height: 115px;
    background-size: 100px 115px;
    display: block;
    margin-left: auto; margin-right: auto;
    font-size: 2rem;
}


/* --- previous --- */
#previous {
    text-align: center;
}
#previous ul {
    margin-bottom: 10px;
}

#previous li, #previous .joker {
    display: inline;
    font-size: 1.6rem;
}
#previous li:after {
    content: " - "
}

#previous li:last-child:after {
    content: ""
}

謝謝

Answer 1

 function GenerateLottery() { var chr1 = Math.ceil(Math.random() * 40)+ ''; var chr2 = Math.ceil(Math.random() * 40)+ ''; var chr3 = Math.ceil(Math.random() * 40)+ ''; var chr4 = Math.ceil(Math.random() * 40)+ ''; var chr5 = Math.ceil(Math.random() * 40)+ ''; var chr6 = Math.ceil(Math.random() * 40)+ ''; var captchaCode = chr1 + ' ' + chr2 + ' ' + chr3 + ' ' + chr4 + ' ' + chr5 + ' '+ chr6; document.getElementById("txtLottery").value = captchaCode }

 <body onload="GenerateLottery();"> <input class="form-control" disabled="" id="txtLottery" style="text-align: center; border: none; font-weight: bold; font-family: Modern; display:inline-block; pointer-events:none;" type="text"> </body>

將數字 40 更改為您的最大數字，這就是我提供的所有幫助，祝您好運將此添加到您的代碼中。

彩票 Javascript

問題描述

1 個解決方案

解決方案1
0 2019-11-25 16:11:15

彩票 Javascript

問題描述

1 個解決方案

解決方案1 0 2019-11-25 16:11:15

解決方案1
0 2019-11-25 16:11:15