Javascript 奇怪的虫子在画布上活动

本节：

无论如何，滑块有一个系统，所以顶部阴影永远不会比底部暗。但是当你向上拖动任何一个范围，值为10时，滑块的动作会很奇怪，我不明白为什么。（范围隐藏在画布的侧面）wondrin如果你们中有人看到问题

谢谢

   <input type="range" class="vs1 vs" min="0" max="45" style="left:-89px;top:-12px" id="vs1" />
    <input type="range" class="vs2 vs" min="0" max="45" style="right:-89px;top:-12px" id="vs2" />
    <style>
input {
    font-weight:bold;
    font-family:arial;
    outline:none;
}
input[type=range].vs {
    -webkit-appearance: none;
    background: none;
    width: 200px;
    height:28px;
    -webkit-transform:rotate(90deg);
    margin-top: 97px;
    z-index: 10;
    position: absolute;
    border:1px solid rgba(0, 0, 0, 0);
    opacity:0.4;
    transition-duration: 1s;
}
input[type="range"].vs1::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: black;
    width: 5px;
    height: 15px;
    border-top-right-radius:2em;
    border-top-left-radius:2em;
    position: relative;
    top: 6px;
}
input[type="range"].vs2::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: black;
    width: 5px;
    height: 15px;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;
    position: relative;
    bottom: 7px;
}
input[type=range]:hover.vs {
    background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
    border:1px solid black;
    opacity:1;
}
input[type=range]:active.vs {
    background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
    border:1px solid black;
    opacity:1;
}
</style>

输入{
字体大小：粗体；
字体系列：arial；
大纲：无；
}
输入[类型=范围].vs{
-webkit外观：无；
背景：无；
宽度：200px；
高度：28px；
-webkit变换：旋转（90度）；
边缘顶端：97px；
z指数：10；
位置：绝对位置；
边框：1px实心rgba（0,0,0,0）；
不透明度：0.4；
过渡时间：1s；
}
输入[type=“range”].vs1:：-webkit滑块拇指{
-webkit外观：无；
背景色：黑色；
宽度：5px；
高度：15px；
边框右上半径：2米；
边框左上半径：2米；
位置：相对位置；
顶部：6px；
}
输入[type=“range”].vs2:：-webkit滑块拇指{
-webkit外观：无；
背景色：黑色；
宽度：5px；
高度：15px；
边框右下半径：2米；
边框左下半径：2米；
位置：相对位置；
底部：7px；
}
输入[类型=范围]：悬停vs{
背景：-webkit渐变（线性、左上、右上、颜色停止（100%，#ffcb93）、颜色停止（73%，#ffd8af）、颜色停止（0%，#ffffff））；
边框：1px纯黑；
不透明度：1；
}
输入[类型=范围]：激活{
背景：-webkit渐变（线性、左上、右上、颜色停止（100%，#ffcb93）、颜色停止（73%，#ffd8af）、颜色停止（0%，#ffffff））；
边框：1px纯黑；
不透明度：1；
}

您不应该直接比较字符串。

value

属性提供字符串。 所以

“1”

和

“10”

不要像你想的那样进行比较

要解决您的问题，请使用：

parseInt(obj.value, 10)

其中，

obj

是使用

document.getElementById（）

获得的DOM元素

---

在作业的

if（）

和

get

和

set

中的任何地方都可以使用此选项。

您不应该直接比较字符串。

value

属性提供字符串。 所以

“1”

和

“10”

不要像你想的那样进行比较

要解决您的问题，请使用：

parseInt(obj.value, 10)

其中，

obj

是使用

document.getElementById（）

获得的DOM元素

---

在作业的

if（）

和

get

和

set

中，在任何地方都可以使用此选项。

您将其标记为jQuery，因此我通过实际使用jQuery对其进行了简化：

if (~~$('#vs1').val() > ~~$('#vs2').val()) {
    if (qwas == 1) $('#vs2').val($('#vs1').val())
    if (qwas == 2) $('#vs1').val($('#vs2').val())
}

jSFiddle： 注意：

~~

将值转换为整数（包括字符串）。比parseInt（）更简单、更快

---

另一个注意事项：起初我设法轻松地破坏了您的代码，因为嵌套的ifs上没有大括号。。。代码维护的做法非常糟糕。

您将其标记为jQuery，因此我通过实际使用jQuery对其进行了简化：

if (~~$('#vs1').val() > ~~$('#vs2').val()) {
    if (qwas == 1) $('#vs2').val($('#vs1').val())
    if (qwas == 2) $('#vs1').val($('#vs2').val())
}

jSFiddle： 注意：

~~

将值转换为整数（包括字符串）。比parseInt（）更简单、更快

---

另一个注意事项：起初我设法轻松地破坏了您的代码，因为嵌套的ifs上没有大括号。。。对于代码维护来说，这是一种非常糟糕的做法。

当你说“向上拖动任意范围”时，你能提供更多关于用户交互的细节吗？或者“举止怪异”是什么意思，这样读者就能知道他猜对了吗？还有什么是“wondrin”？当你说“向上拖动任何范围”时，你能提供更多关于用户交互的细节吗？或者“举止怪异”是什么意思，这样读者就能知道他猜对了吗？还有什么是“wondrin”？+1表示缺少大括号。此外，他在分号和缩进方面也不连贯，这些都是对可维护代码很重要的样式特性。在缺少大括号方面+1。此外，他在分号和缩进方面也不连贯，这些都是对可维护代码很重要的样式特性。