使用JavaScript量表的Wierd效果

我正在製作一個javascript工作項目，並且基於標準的值，整個事情應該改變顏色和它的確如此，然而顏色在一些值上堅果，我可以不知道爲什麼會這樣。使用JavaScript量表的Wierd效果

Normaly行爲應該是以下：

介於0％和25％ - 紅色
之間26％和75％ - 黃色
之間76％和100％ - 綠色

當代碼運行時，它顯然表現爲它應該除外......

如果它的3％和9％之間它黃色（應該是紅色）
如果它是100％它是紅色（應爲綠色）
如果它是0％它是紅色，但酒吧做了360度旋轉。 .. wut？

我已經看了2個多小時的代碼，我找不到邏輯爲什麼錯誤，我想知道是否有人在這裏可能會看到我錯過的東西。

HTML：

<canvas id="canvas" width="300" height="300">

CSS：

body { 
    background: #333; 
} 
/*Centering the gauge*/ 
#canvas { 
    display: block; 
    width: 300px; 
    margin: 100px auto; 
} 
/*Custom font for numbers*/ 
@font-face { 
    font-family: "bebas"; 
    src: url("http://thecodeplayer.com/uploads/fonts/BebasNeue.otf"); 
}

JS：

window.onload = function(){ 
//canvas initialization 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
//dimensions 
var W = canvas.width; 
var H = canvas.height; 
//Variables 
var red = "25%"; 
var yellow = "75%"; 
var green = "100%"; 
var degrees = 0; 
var new_degrees = 724; 
var difference = 0; 
var color = "lightgreen"; 
var bgcolor = "#222"; 
var redcolor = "orangered"; 
var yellowcolor = "goldenrod"; 
var greencolor = "lightgreen"; 
var text; 
var animation_loop, redraw_loop; 
var startAngle = 1 * Math.PI; 
var endAngle = 1.7 * Math.PI; 


function init() 
{ 
    //Clear the canvas everytime a chart is drawn 
    ctx.clearRect(0, 0, W, H) 

    //Background 360 degree arc 
    ctx.beginPath(); 
    ctx.strokeStyle = bgcolor; 
    ctx.lineWidth = 30; 
    ctx.arc(W/2, H/2, 100, startAngle, endAngle, false); //you can see the arc now 
    ctx.stroke(); 

    //gauge will be a simple arc 
    //Angle in radians = angle in degrees * PI/180 
    var radians = degrees * Math.PI/1030; 
    ctx.beginPath(); 
    ctx.strokeStyle = color; 
    ctx.lineWidth = 30; 
    //The arc starts from the rightmost end. If we deduct 90 degrees from the angles 
// CHANGE THIS LINE HERE 
    //the arc will start from the left 
    ctx.arc(W/2, H/2, 100, startAngle, radians - 180*Math.PI/180, false); 
    //you can see the arc now 
    ctx.stroke(); 

    //Lets add the text 
    ctx.fillStyle = color; 
    ctx.font = "50px bebas"; 
    text = Math.floor(degrees/720*100) + "%"; 
if (text < "25%") { 
    color = redcolor; 
} else if (text > "25%") { 
    color = yellowcolor; 
} else if (text > "75%") { 
    color = greencolor; 
} 
    //Lets center the text 
    //deducting half of text width from position x 
    var text_width = ctx.measureText(text).width; 
    //adding manual value to position y since the height of the text cannot 
    //be measured easily. There are hacks but we will keep it manual for now. 
    ctx.fillText(text, W/2 - text_width/2, H/2 + 15); 
} 

function draw() 
{ 
    //Cancel any movement animation if a new chart is requested 
    if(typeof animation_loop != undefined) clearInterval(animation_loop); 

    //random degree from 0 to 360 
    new_degrees = Math.round(Math.random()*360); 
//new_degrees = 721; 
    difference = new_degrees - degrees; 
    //This will animate the gauge to new positions 
    //The animation will take 1 second 
    //time for each frame is 1sec/difference in degrees 
    animation_loop = setInterval(animate_to, 1000/difference); 
} 

//function to make the chart move to new degrees 
function animate_to() 
{ 
    //clear animation loop if degrees reaches to new_degrees 
    if(degrees == new_degrees) 
     clearInterval(animation_loop); 
    if(degrees < new_degrees) 
     degrees++; 
    else 
     degrees--; 



    init(); 
} 

//Lets add some animation for fun 
draw(); 
redraw_loop = setInterval(draw, 2000); //Draw a new chart every 2 seconds 




}

您可以在http://codepen.io/rgaspary/pen/Glfdn

來源

2013-11-01 Renzo Gaspary

現在爲什麼你不只是使用整數值而不是在裏面放一個'％'並比較字符串？ –

您應該嘗試檢查整數格式的度數而不是字符串格式。 – funerr