Javascript 如何解决添加css类的问题？

我有一个受启发的代码。
这是一个液体气泡进度条

我附加了我的整个代码，与原始代码略有不同（我正在动态地为

val

分配不同的值）

问题是：这里我的代码没有添加类：（它运行代码但不添加类）

HTML

CSS

html{
溢出：隐藏；
宽度：200px；
身高：100%；
变换：比例（0.21）；
利润上限：-34px；
左边距：-86px；
}
身体{
身高：100%；
}
身体{
背景色：透明；
字体系列：无衬线；
字体大小：15px；
颜色：#ccc；
}
.包装纸{
显示：-ms flexbox；
显示：框；
显示器：flex；
-o形盒对齐：居中；
对齐项目：居中；
-o盒组件：中心；
证明内容：中心；
-o形盒方向：垂直；
弯曲方向：立柱；
身高：100%；
}
格林先生{
边缘顶部：15px；
}
.绿色，进步，内在，
.红色，进步，内在，
.橙色.进步.内心{
位置：绝对位置；
溢出：隐藏；
z指数：10；
边界半径：50%；
背景色：透明；
}
.绿色，进步，内在，
.红色，进步，内在，
.橙色.进步.内心{
宽度：240px；
高度：240px；
}
.绿色，进步，内在，
.红色，进步，内在，
.橙色.进步.内心{
过渡：所有的1容易；
}
.绿色.进步.内部.水，
.红色.前进.内部.水，
.橙色.进步.内部.水{
位置：绝对位置；
z指数：1；
宽度：200%；
身高：200%；
左-50%；
边界半径：40%；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画计时功能：线性；
动画计时功能：线性；
-webkit动画名称：spin；
动画名称：旋转；
}
.绿色.进步.内部.水{
最高：25%；
}
.绿色.进步.内部.水{
背景：rgba（83252,83,0.7）；
}
.绿色.进步.内部.水，
.红色.前进.内部.水，
.橙色.进步.内部.水{
过渡：所有的1容易；
}
.绿色.进步.内部.水，
.红色.前进.内部.水，
.橙色.进步.内部.水{
-webkit动画持续时间：10秒；
动画持续时间：10秒；
}
.绿色.进步.内部.水{
盒影：0 0 20px#03bc03；
}
.绿色.进步.内部.眩光，
.红色.前进.内部.眩光，
.橙色.进步.内心.眩光{
位置：绝对位置；
前-120%；
左-120%；
z指数：5；
宽度：200%；
身高：200%；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
边界半径：50%；
}
.绿色.进步.内部.眩光，
.红色.前进.内部.眩光，
.橙色.进步.内心.眩光{
背景色：rgba（255255,0.15）；
}
.绿色.进步.内部.眩光，
.红色.前进.内部.眩光，
.橙色.进步.内心.眩光{
过渡：所有的1容易；
}
.绿色.进度.内部.百分比，
.红色.进度.内部.百分比，
.橙色.进度.内部.百分比{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
字体大小：粗体；
文本对齐：居中；
}
.绿色.进度.内部.百分比，
.红色.进度.内部.百分比，
.橙色.进度.内部.百分比{
线高：240px；
字体大小：48px；
}
.绿色.进度.内部.百分比{
颜色：#03c603；
}
.绿色.进度.内部.百分比{
文本阴影：0 10px#029502；
}
.绿色.进度.内部.百分比，
.红色.进度.内部.百分比，
.橙色.进度.内部.百分比{
过渡：所有的1容易；
}
瑞德先生{
边缘顶部：15px；
}
.红色.前进.内部.水{
最高：75%；
}
.红色.前进.内部.水{
背景：rgba（237,59,59,0.7）；
}
.红色.前进.内部.水{
盒影：0 0 20px#9b0e0e；
}
.红色.进度.内部.百分比{
颜色：#a30f0f；
}
.红色.进度.内部.百分比{
文本阴影：0 10px#7a0b0b；
}
.橙色{
边缘顶部：15px；
}
.橙色.进步.内部.水{
最高：50%；
}
.橙色.进步.内部.水{
背景：rgba（240124,62,0.7）；
}
.橙色.进步.内部.水{
盒影：0 20px#a0400c；
}
.橙色.进度.内部.百分比{
颜色：#ffffff；
}
.橙色.进度.内部.百分比{
文本阴影：0 0 10px#7e320a；
}
#版权所有{
边缘顶部：25px；
背景色：透明；
字体大小：14px；
颜色：#B3；
文本对齐：居中；
}
#版权司{
边缘底部：10px；
}
#版权a，
#版权a:链接{
颜色：#808080；
文字装饰：无；
边框底部：1px实心#808080；
垫底：2件；
}
#版权a:现行{
颜色：#B3；
}
#版权a:hover{
颜色：#B3；
边框底部：1px实心#B3；
垫底：4px；
}
.说明{
显示：内联块；
保证金：5px0；
字体大小：16px；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧旋转{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}

要覆盖类，您需要重新

   setTimeout(function(){

  if (val < 50) {
    console.log("less than 50%: " +window.valOld);
    $(".progress").parent().addClass("red");  
  } else if (50 <= val && val <= 80 ) {

    console.log("50-80: " +window.valOld);

    $(".progress").parent().addClass("orange");
  } else {
    console.log("100%: " +window.valOld);
    $(".progress").parent().addClass("green");
  }

}, 2000) 

window.valOld = 0;
runFunc();

setInterval(function(){ 
   console.log('Imported: ' + parent.window.confedenceVar);

   var valUpdate = parent.window.confedenceVar;
       console.log("valUpdate: " + valUpdate);
     console.log("valOld: " + window.valOld);

  if(valUpdate !== window.valOld){
     console.log("val Changed");

     window.valOld = valUpdate;
     runFunc();
};

}, 5000);

function runFunc(){

        $(".progress").parent().addClass("red");

var val = window.valOld;

 setTimeout(function(){

         if (val < 50) {
       console.log("less than 50%: " +window.valOld);
        $(".progress").parent().addClass("red");  
} else if (50 <= val && val <= 80 ) {

  console.log("50-80: " +window.valOld);

        $(".progress").parent().addClass("orange");
} else {
  console.log("100%: " +window.valOld);
        $(".progress").parent().addClass("green");
}

}, 2000)     

// Set the initial percent
$(".progress .percent").text(0 + "%");

// Set animation start
$(".progress .water").css("top", 100 + "%");

// Trigger animation in 2000ms (2 seconds)
setTimeout(function(){
  $(".progress .percent").text(val + "%");

$(".progress .water").css("top", 100 - val + "%");  
}, 2000)

console.log("valOld End: " +window.valOld);
}

$(".progress").parent().removeClass().addClass("green");