jquery - 将 "180 - 360"的数据范围标准化为 "0 - 100"范围 - jQuery/JS

Question

我有一个正在旋转的图像，但它只能在 180 度和 360 度之间旋转。但我需要输入的 targetValue 介于 0 - 100 之间。

因此，如果您输入的 targetValue 为 20，它会将图像旋转 180 度 - 360 度范围内的 20%。

我已附上我已经拥有的代码片段 -

如有任何帮助，我们将不胜感激!

代码-

var targetValue = 100; //CAN ONLY BE BETWEEN 0 & 100

console.log(targetValue);

function targetChange(){
    $('#target').css('transform', 'rotate(' + targetValue + 'deg' + ')');
    console.log('hello');
}
targetChange();

.target {
    position: absolute;
	width: 100%;
    height: 100%;
    z-index: 2;
    transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="target" id="target" src="http://i65.tinypic.com/oarptf.png">

Answer 1

这很简单

• 取输入值(0-100)
• 求 180 度的比例
• 将其与 180 相加，得到 180-360 范围内的值

这在下面进行了演示

$('#input').on("change", function(){
    var val = +$(this).val();
    var rotAmount = 180 + ((val/100) * 180) 
    $('#output').val(rotAmount);
    $('#target').css('transform', 'rotate(' + rotAmount + 'deg' + ')');
});

.target {
    position: relative;
	width: 100%;
    height: 100%;
    z-index: 2;
    transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter value between 0-100 <input id="input" type="number" min="0" max="100">
<br>
Rotation: <input type="text" id="output">
<hr>
<img class="target" id="target" src="http://i65.tinypic.com/oarptf.png">