使用JavaScript规范的Wierd效果

我正在用javascript为一个正在工作的项目制作一个语言，基于语言的值，整个事情应该会改变颜色，它确实会改变，但是颜色会对一些值产生影响，我不明白为什么会这样

正常情况下，行为应如下所示：

• 介于0%和25%之间-红色
• 26%到75%之间-黄色
• 在76%到100%之间-绿色

当代码运行时，它的行为显然与它应该的一样，除了

• 如果介于3%和9%之间，则为黄色（应为红色）
• 如果是100%，则为红色（应为绿色）
• 如果它是0%，它是红色的，但酒吧做一个360度旋转。。。胡特

我已经看了2个多小时的代码，我找不到为什么会出现这些bug的逻辑，我想知道这里是否有人看到了我遗漏的东西

HTML:

JS:

window.onload=function（）{
//画布初始化
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//尺寸
var W=画布宽度；
var H=画布高度；
//变数
var red=“25%”；
var yellow=“75%”；
var green=“100%”；
变量度=0；
var new_度=724；
var差=0；
var color=“浅绿色”；
变量bgcolor=“#222”；
var redcolor=“橙色”；
var yellowcolor=“黄花”；
var greencolor=“浅绿色”；
var文本；
var动画_循环，重绘_循环；
var startAngle=1*Math.PI；
var endAngle=1.7*Math.PI；
函数init（）
{
//每次绘制图表时清除画布
ctx.clearRect（0，0，W，H）
//背景360度弧
ctx.beginPath（）；
ctx.strokeStyle=bgcolor；
ctx.lineWidth=30；
ctx.arc（W/2，H/2，100，startAngle，endAngle，false）；//现在可以看到圆弧了
ctx.stroke（）；
//量规将是一个简单的圆弧
//以弧度表示的角度=以度表示的角度*PI/180
var弧度=度*Math.PI/1030；
ctx.beginPath（）；
ctx.strokeStyle=颜色；
ctx.lineWidth=30；
//弧线从最右边开始。如果我们从角度中减去90度
//在这里换行
//圆弧将从左侧开始
ctx.arc（W/2，H/2100，startAngle，弧度-180*Math.PI/180，假）；
//你现在可以看到弧线了
ctx.stroke（）；
//让我们添加文本
ctx.fillStyle=颜色；
ctx.font=“50px bebas”；
文本=数学地板（度/720*100）+“%”；
如果（文本<“25%”）{
颜色=红色；
}否则，如果（文本>“25%”）{
颜色=黄色；
}否则，如果（文本>“75%”）{
颜色=绿色；
}
//让我们将文本居中
//从位置x减去文本宽度的一半
var text_width=ctx.measureText（text）.width；
//将手动值添加到位置y，因为文本的高度无法更改
//很容易测量。有一些黑客，但我们现在将保留它的手册。
ctx.fillText（文本，W/2-文本宽度/2，H/2+15）；
}
函数绘图（）
{
//如果请求新图表，请取消任何移动动画
如果（动画循环的类型！=未定义）clearInterval（动画循环）；
//从0到360的随机度
new_degrees=Math.round（Math.random（）*360）；
//新_度=721；
差异=新的_度-度；
//这将为仪表设置新位置的动画
//动画将花费1秒
//每帧的时间为1秒/度差
动画_循环=设置间隔（动画_到，1000/差）；
}
//函数使图表移动到新的度数
函数animate_to（）
{
//如果度数达到新度数，则清除动画循环
如果（度==新度）
clearInterval（动画_循环）；
如果（度<新度）
学位++；
其他的
学位--；
init（）；
}
//让我们添加一些有趣的动画
draw（）；
redraw_loop=setInterval（draw，2000）；//每2秒绘制一个新图表
}

---

您可以在

中看到代码，您使用的是字符串而不是数字。因此，比较是字母数字的，而不是数字比较

---

例如，字符串

“9%”

位于您使用字符串而不是数字的字符串“25%”

之后。因此，比较是字母数字的，而不是数字比较

---

例如，字符串

“9%”

位于您使用字符串而不是数字的字符串“25%”

之后。因此，比较是字母数字的，而不是数字比较

---

例如，字符串

“9%”

位于您使用字符串而不是数字的字符串“25%”

之后。因此，比较是字母数字的，而不是数字比较

---

例如，字符串

的“9%”

在字符串的“25%”之后

我不知道同步性是否是罪魁祸首，但是

使用

setInterval（）

通常是个坏主意

---

使用

setTimeout（）

，当

draw（）

函数完成执行后，使用另一个

setTimeout（）

递归调用它

我不知道同步性是否是罪魁祸首，但是

使用

setInterval（）

通常是个坏主意

---

使用

setTimeout（）

，当

draw（）

函数完成执行后，使用另一个

setTimeout（）

递归调用它

我不知道同步性是否是罪魁祸首，但是

使用

setInterval（）

通常是个坏主意

---

使用

setTimeout（）

，当

draw（）

函数完成执行后，使用另一个

setTimeout（）

递归调用它

我不知道同步性是否是罪魁祸首，但是

使用

setInterval（）

通常是个坏主意

---

使用

setTimeout（）

，当

draw（）

函数完成执行后，使用另一个

setTimeout（）

递归调用它

现在，你为什么不直接使用整数值而不使用

%

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

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");
}

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




}