html中动态显示数值，还可以改变颜色，比如 ”20/30“也是一个动态变量根据ajax从后台查询过来的数据，20显示绿色，斜杆是白色，30是红色。html中body代码和js代码如何写

要在HTML中动态显示数值，并根据数据变化改变颜色，你可以结合HTML、CSS和JavaScript实现这个功能。这里是一个简单的例子：

首先，在HTML部分，创建一个`<div>`元素用于显示数值：

<div id="dynamic-value">20/30</div>

然后，使用CSS设置初始样式以及颜色规则：

#dynamic-value {
  display: flex;
  justify-content: space-between;
}

.number {
  font-size: 24px;
  color: white; /* 初始颜色 */
}
.green {
  color: green; /* 绿色 */
}
.red {
  color: red; /* 红色 */
}

接下来，编写JavaScript代码，利用AJAX从后台获取数据并更新颜色：

// 假设我们有一个名为getData的函数，它返回Promise处理查询结果
async function getData() {
  const response = await fetch('your-api-url'); // 替换为实际API URL
  const data = await response.json();
  return data; // 返回包含20和30的数组
}

async function updateDynamicValue() {
  try {
    const [num1, num2] = await getData(); // 解析JSON并获取两个数字

    document.getElementById('dynamic-value').innerText = `${num1}/${num2}`;

    if (num1 > num2) {
      document.querySelector('.number:nth-child(1)').classList.add('green');
      document.querySelector('.number:nth-child(2)').classList.add('red');
    } else if (num1 < num2) {
      document.querySelector('.number:nth-child(1)').classList.add('red');
      document.querySelector('.number:nth-child(2)').classList.add('green');
    } else {
      document.querySelectorAll('.number').forEach((num) => num.classList.remove('green', 'red'));
    }
  } catch (error) {
    console.error(error);
  }
}

updateDynamicValue(); // 首次加载时立即更新

确保将`your-api-url`替换为实际的后端API地址。当你需要实时更新时，可以在某个事件触发时（如用户交互或者定时刷新）调用`updateDynamicValue()`。