如何自动执行函数并按百分比修改Circliful的SVG描边颜色？

问题分析 #

你之前的代码存在两个核心问题：

• 错误修改了<section id="connect-data">的stroke属性，但实际需要调整的是class为circle的SVG圆形元素
• if语句语法不完整，缺少条件判断逻辑

实现步骤 #

要按百分比区间设置颜色，需要完成以下三步：

1. 从计时器文本中提取纯百分比数值
2. 根据数值区间匹配对应颜色
3. 给目标SVG元素设置stroke属性

完整代码实现 #

$(document).ready(function() {
  // 1. 获取计时器文本并提取百分比数值
  const timerText = $('.timer').text();
  const percentage = parseInt(timerText.replace('%', ''), 10); // 移除%符号并转为数字

  // 2. 根据百分比区间确定对应颜色
  let strokeColor;
  if (percentage < 10) {
    strokeColor = 'rgb(255, 0, 0)'; // 红色
  } else if (percentage >= 10 && percentage < 30) {
    strokeColor = 'rgb(255, 182, 25)'; // 橙色
  } else {
    strokeColor = 'rgb(0, 128, 0)'; // 绿色
  }

  // 3. 给目标SVG元素设置stroke颜色
  $('.circle').attr('stroke', strokeColor);
});

额外说明 #

如果你的百分比是通过API动态获取的，只需把提取百分比的部分替换为API返回值即可，示例：

// 假设API返回的百分比数据存储在response.percentage中
const percentage = response.percentage;

确保代码包裹在$(document).ready()中，避免DOM未加载完成时找不到元素的问题

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