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

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');
        }
};

文献资料

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-04-29 15:55:27

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-29 15:55:27

解决方案1
1 已采纳 2019-04-29 15:55:27