將「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();