将“180-360”的数据范围标准化到“0-100”范围 - jQuery/JS

Question

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

因此，如果您输入20的targetValue，它将旋转图像的范围180deg - 360deg的20％。

我重视我已经在代码片段 -

任何帮助，将不胜感激！

CODE -

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; 
 
\t 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; 
 
\t 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">

Answer 2

检查了这一点：

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

var normalizedValue = (targetValue/100 * 180) + 180 

console.log(targetValue); 

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