我正在制作一个带有简单“掷骰子”风格游戏的页面。游戏设置为用户可以使用带有 2 个范围 handle 的 slider 设置数字范围(使用 jquery-ui 制作)，如果按下“滚动”按钮时生成的随机数在设置范围内在 slider 上，显示的大数字变为蓝色。如果生成的数字超出其设定范围，则数字变为红色。
我还添加了一个“奖金”功能，其中包括同时生成的第二个随机数(指定为“幸运数字”)，如果随机数与掷骰数匹配，则计为“头奖”和大数字变成黄色。这不是我的问题的主要部分，但它解释了为什么我的 javascript 中有第二个随机数生成器。
我已将所有返回值设置为记录到控制台以用于调试目的 - 当 slider handle 移动时，控制台记录高值和低值(以及获胜百分比，但这与这些目的无关) .此外，当按下“roll”按钮时，指定为“rolled number”的随机数被记录到控制台，第二个随机数被指定为“lucky number”。
除了一个很大的异常(exception)，我描述的大部分内容已经在页面上起作用:我似乎无法将范围 slider 设置的值用作我的 roller() 函数中的范围值(我必须手动设置它们 - 在我的代码分别为 9 和 95)。
我试图从 slider 函数中获取值并在不使用 var 关键字的情况下声明它们，目的是使它们可以全局访问，但 roller() 函数似乎仍然无法识别它们。我怀疑这可能是由于页面首次加载时 slider 值未被“设置/初始化”引起的，但我对 javascript(尤其是 jQuery)的了解似乎不足以解决这个问题。
我的问题简单地说:我需要首先确保范围 slider 提供的两个值在页面加载时不为空，其次，我需要一种方法来使用这些值来表示我的“获胜范围” 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%;
}
对于大量代码，我深表歉意 - 我尝试制作一个 fiddle ，但它没有正确显示。那是我的下一个问题...
最佳答案
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');
}
};
关于javascript - 在单独的函数中使用来自两个句柄的 jquery-ui 范围 slider 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55906545/