Question

我正在使用一个输入滑块，它使用JavaScript if / else函数对“ - ”和“+”值使用css translate。我对if / else语句有点问题。

这是一个小提琴http://jsfiddle.net/cn6St/，这里是代码：

HTML

 <div class="square"></div>

 <span class="result-X">Transform-X:</span>

 <input type="range" id="sliderX" min="0" max="100" value="50" onchange="rangevalueX.value=value"/>

 <output id="rangevalueX">50</output>

JS：

var sliderx = document.getElementById("sliderX");
var box = document.querySelector('.square');
var rangevalueX = document.getElementById("rangevalueX");

sliderx.onchange = function(){

    if (rangevalueX >'50') {
    box.style.webkitTransform = "translateX(" + (sliderx.value) + 'px)';
    rangevalueX.value = sliderx.value;
    }
    else if (rangevalueX <'50') {
    box.style.webkitTransform = "translateX(-" + (sliderx.value) + 'px)';
    rangevalueX.value = sliderx.value;
    }
    };

这个想法是在滑块上使用滑块上的“50”值作为“0”。如果滑块值> 50 CSS应该转换为正值。如果它小于＆lt; 50那么它应该是负数。

不确定我在这里做错了什么。

Answer 1

你想做的事：

var rangevalueX = document.getElementById('rangevalueX').value;

获取实际滑块值。

Answer 2

我似乎找到了这个问题。这是HTML。滑块的值应设置为＆＃34; 0＆＃34;，而min should be "-50" and the max value should be "50".

should be "-50" and the max value should be "50".



Final working code:

HTML:
    

  <div class="square"></div>

    <div>
       <span class="result-X">Transform-X:</span>
        <input type="range" id="sliderX" min="-50" max="50" value="0" onchange="rangevalueX.value=value"/>
        <output id="rangevalueX">0</output>
    </div>

</div>


JavaScript:

工作小提琴http://jsfiddle.net/cn6St/2/

JavaScript If / Else函数用于输入滑块

2 个答案: