Question

我正在用一个简单的“骰子”风格的游戏制作页面。设置游戏后，用户可以使用带有2个范围手柄（使用jquery-ui制作）的滑块设置数字范围，并且如果按下“滚动”按钮时生成的随机数在设置范围内在滑块上，显示的大数字变为蓝色。如果生成的数字超出其设置范围，则该数字将变为红色。

我还添加了“奖励”功能，其中包括同时生成的第二个随机数（称为“幸运数”），如果随机数与掷骰数匹配，则将其计为“头奖”和较大的数字变成黄色。这不是我的问题很大的一部分，但这说明了为什么我的JavaScript中还有第二个随机数生成器。

我已将所有返回值设置为记录到控制台以进行调试-移动滑块手柄时，控制台记录高值和低值（以及获胜百分比，但这与这些目的无关）。同样，当按下“滚动”按钮时，指定为“滚动编号”的生成的随机数以及指定为“幸运数字”的第二个随机数也将记录到控制台。

我所描述的大多数内容都已经在页面上起作用，但有一个大例外：我似乎无法将范围滑块设置的值用作我的roller（）函数中的范围值（我必须手动设置它们-在我的代码分别为9和95）。

我试图从Slider函数中获取值，并在不使用var关键字的情况下对其进行声明，目的是使它们在全局范围内可访问，但是roller（）函数似乎仍然无法识别它们。我怀疑这可能是由于页面首次加载时未“设置/初始化”滑块值引起的，但是我对javascript（尤其是jQuery）的了解似乎不足以解决此问题。

我的问题很简单：我需要首先确保在页面加载时范围滑块提供的两个值不为空，其次，我需要一种方法来使用这些值来表示我的“获胜范围” roller（）函数。

任何帮助将不胜感激。

我的代码在下面

//HTML/Javascript
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <title>ROLLER</title>
</head>
<body>
<div class="wrapper">
    <div class="whitespace"></div>
    <div class="bignumber" id="number">50</div>
    <div class="whitespace"></div>
    <div class="whitespace"></div>
    <div class="rangetext" id="slidervalue">
    <label for="slidenumbers">NUMBER RANGE</label></div>
    <input type="text" id="slidenumbers" name="slidenumbers">
    <div class="rangeslider">
        <div id="slider"></div>
    </div>
    <button class="rollonce" onclick="luckynumber(); roller()">ROLL</button>

<script>
//I NEED THIS FUNCTION TO LOAD ON PAGE LOAD SO THE SLIDER ALREADY HAS REGISTERED VALUES (as of now they are blank on page load with null value - I think)
$('#slider').slider({
    slide: function(event, ui) {
        $('#slidenumbers').val(ui.values[0] + " - " + ui.values[1]);
        var top = ui.values[1];           ///AN ATTEMPT TO SET THE VALUES AS VARIABLES - DID NOT WORK 
        var bottom = ui.values[0];
        // highNumber = top;              ////// AN ATTEMPT TO MAKE THE VALUE VARIABLES GLOBAL - ALSO DID NOT WORK WHEN I ATTEMPTED TO USE THEM IN ROLLER() FUNCTION
        //lowNumber = bottom;
        console.log("BOTTOM VALUE - ", bottom);
        console.log("TOP VALUE - ", top);
        console.log(" --- WIN PERCENT CHANCE --- ", (top - bottom),"%");
    },
    min: 5,
    max: 95,
    values: [15, 85],
    step: 1,
    range: true,
    orientation: "horizontal"
});

var lucky
function roller() {
    random = Math.floor((Math.random() * 99) + 1);
    document.getElementById('number').innerText = random;
    console.log("Your rolled number:", random);
    //THESE ARE THE VALUES (5 and 95) I NEED REPLACED WITH THE (LAST UPDATED) VALUES FROM THE TOP AND BOTTOM RANGE OF THE SLIDER SET BY THE USER
        if (random > 5 || random < 95  && random != lucky) { 
            document.getElementById('number').setAttribute('class', 'bignumber2');
        } if (lucky == random && random > 5 && random < 95) {
            document.getElementById('number').setAttribute('class', 'bignumber');
            console.log("MATCH! - LUCKY NUMBER:", lucky, "RANDOM NUMBER:", random);
        } else if (random <= 5 || random >= 95 && random != lucky) {
            document.getElementById('number').setAttribute('class', 'bignumber1');
        }
};

function luckynumber(){
    random1 = Math.floor((Math.random() * 99) + 1);
    console.log("-------------------------");
    console.log("Lucky number:      ", random1)
    lucky = random1
};
</script>
</div>
</body>
</html>



//CSS
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: center;
}
body, html{
    background: #222;
    font-family: sans-serif;
    height: 100%;
    overflow: hidden;
}
.wrapper{
    background: #000;
    background-size: cover;
    height: 55.9vw;
    text-align: center;
    width: 30%;
    margin-left: 35vw;
}
.bignumber{
    color: #FFFF00;
    font-size: 23vw;
    font-weight: 500;
    font-family: sans-serif;
    margin-left: 1vw;
}
.bignumber1{
    color: #FF0000;
    font-size: 23vw;
    font-weight: 500;
    font-family: sans-serif;
    margin-left: 1vw;
}
.bignumber2{
    color: #0000FF;
    font-size: 23vw;
    font-weight: 500;
    font-family: sans-serif;
    margin-left: 1vw;
}
.rangetext{
    color: #FFFFFF;
    font-size: 2.5vw;
    font-weight: 300;
    margin-top: 1vw;
}
.rangeslider{
    height: 3vw;
    margin-left: 3.5vw;
    margin-top: 1vw;
    position: relative;
    width: 22vw;
}
#slider .ui-slider-range{
    background: #0CF;
    border: 1px solid #AAF;
    outline: none;
 }
 #slider .ui-slider-handle{
    background: #000;
    border: 3px double #FA0;
    outline: none;
}
#slidenumbers{
    background: none;
    border: none;
    color: #AADDFF;
    font-family:  sans-serif;
    font-size: 2vw;
    height: 2.5vw;
    outline: none;
    width: 10vw;
} 
.rollonce{
    background: transparent;
    border: .1vw solid rgba(255,215,0,0.8);
    border-radius: 5px;
    color: #AADDFF;
    cursor: pointer;
    font-family:  sans-serif;
    font-size: 3vw;
    font-weight: 700;
    height: 5vw;
    margin-top: 3vw;
    outline: none;
    padding-top: 0vw;
    text-align: center;
    width: 22vw;
}
.rollonce:hover{
    box-shadow: 0px 0px 20px 10px #FF7500
}
.whitespace{ 
    height: 1.5vw;
    width: 100%;
}

我对大量的代码表示歉意-我尝试摆弄小提琴，但显示不正确。那是我的下一个问题...

Answer 1

JQuery UI Slider具有使您可以读取此类值的方法

var top = $('#slider').slider( "values", 0 );
var bottom = $('#slider').slider( "values", 1 );

以下是在滚子功能中使用它的方式：

function roller() {
    random = Math.floor((Math.random() * 99) + 1);
    document.getElementById('number').innerText = random;
    console.log("Your rolled number:", random);

    var top = $('#slider').slider( "values", 0 );
    var bottom = $('#slider').slider( "values", 1 );

        if (random > bottom || random < top  && random != lucky) { 
            document.getElementById('number').setAttribute('class', 'bignumber2');
        } if (lucky == random && random > bottom && random < top) {
            document.getElementById('number').setAttribute('class', 'bignumber');
            console.log("MATCH! - LUCKY NUMBER:", lucky, "RANDOM NUMBER:", random);
        } else if (random <= bottom || random >= top && random != lucky) {
            document.getElementById('number').setAttribute('class', 'bignumber1');
        }
};

Documentation

在单独的函数中使用来自两个句柄的jquery-ui范围滑块的值

1 个答案: