JavaScript双向进度条负值判断逻辑失效问题求助

负值逻辑不生效是3处错误共同导致的：

• 宽度赋值不符合CSS规范：进入负值分支后，代码直接把负数值赋值给width属性，而CSS不支持负的宽度值，浏览器会直接忽略这条样式，进度条自然不会有变化。
• 输入值未做显式类型转换：My_Button.value拿到的是字符串类型，虽然纯数字字符串和0比较时JS会做隐式转换，但只要输入带非数字字符，判断逻辑就会完全失效。
• 布局错位：你把正负两个进度条的容器放在了相距几百像素的两个位置，就算负值宽度正常渲染，蓝色条出现在页面最左侧，也不会和右侧的红色进度条关联到一起，会误以为逻辑没跑通。

1. 调整HTML布局 #

把两个进度条对齐到同一个0基准点，实现正值向右延伸、负值向左延伸的双向效果：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h3>双向进度条示例</h3>
<input style="height:50px; width:80px; font-size:30px" type="text" id="btn1" name="btn10" > <span id="option1" style="font-size:30px">百分比（支持正负值）</span>
<p>进度条</p>

<!-- 0点基准位置 -->
<div style="position: relative; left: 500px; top: 10px">
  <!-- 负值进度条容器：右边缘对齐0点，进度从右向左延伸 -->
  <div id="Progress_Status2">
    <div id="myprogressBar2"></div>
  </div>
  <!-- 正值进度条容器：左边缘对齐0点，进度从左向右延伸 -->
  <div id="Progress_Status">
    <div id="myprogressBar"></div>
  </div>
</div>

<br>
<button onclick="Negative_or_Positive()">更新进度</button>

</body>
<script src="index.js"></script>
</html>

2. 修复CSS样式 #

调整负值进度条的对齐方式，修正初始宽度：

#Progress_Status {
  width: 25%;
  background-color: #ddd;
  position: absolute;
  left: 0;
  top: 0;
}

#myprogressBar {
  width: 0%;
  height: 20px;
  background-color: red;
  transition: width .2s;
}


#Progress_Status2 {
  width: 25%;
  background-color: #ddd;
  position: absolute;
  right: 0;
  top: 0;
}

#myprogressBar2 {
  width: 0%;
  height: 20px;
  background-color: blue;
  transition: width .2s;
  /* 让蓝色进度条从右向左填充 */
  margin-left: auto;
}

3. 修复JS逻辑 #

统一做类型转换、范围校验，负值取绝对值设置宽度，更新时清空反向进度：

var My_Button = document.getElementById("btn1")

function update(progress) {
  var positiveBar = document.getElementById("myprogressBar");
  var negativeBar = document.getElementById("myprogressBar2");
  if (progress > 0) {
    // 正值更新红色条，清空蓝色条
    positiveBar.style.width = progress + '%';
    negativeBar.style.width = '0%';
  } else if (progress < 0) {
    // 负值取绝对值更新蓝色条，清空红色条
    negativeBar.style.width = Math.abs(progress) + '%';
    positiveBar.style.width = '0%';
  } else {
    // 0值重置两个进度条
    positiveBar.style.width = '0%';
    negativeBar.style.width = '0%';
  }
}

function Negative_or_Positive() {
  // 输入值转整数，非法值默认按0处理
  var inputVal = parseInt(My_Button.value) || 0;
  // 限制进度范围在-100~100之间，避免超出容器宽度
  inputVal = Math.max(-100, Math.min(100, inputVal));
  update(inputVal);
}

修复后输入0_{100的正值，红色进度条从0点向右增长；输入-100}0的负值，蓝色进度条从0点向左增长，输入非法值默认回到0点位置。

内容的提问来源于stack exchange，提问作者Not_Anonymous