当前位置：首页 > JavaScript

js实现占比

2026-04-07 07:38:35JavaScript

计算百分比占比

在JavaScript中计算占比通常需要两个数值：部分值和总值。通过部分值除以总值再乘以100，可以得到百分比。

function calculatePercentage(partialValue, totalValue) {
  return (partialValue / totalValue) * 100;
}

const result = calculatePercentage(50, 200); // 返回25

处理边界情况

为了避免除以零或非数值输入导致的错误，可以添加验证逻辑。

function safePercentage(partialValue, totalValue) {
  if (typeof partialValue !== 'number' || typeof totalValue !== 'number') {
    return NaN;
  }
  if (totalValue === 0) return 0;
  return (partialValue / totalValue) * 100;
}

格式化百分比显示

计算后的数值可能需要格式化显示，比如固定小数位数或添加百分号。

function formatPercentage(value, decimals = 2) {
  return value.toFixed(decimals) + '%';
}

const display = formatPercentage(25.555); // "25.56%"

数组元素占比计算

对于数组数据，可以计算各元素占总和的比例。

function arrayPercentages(arr) {
  const sum = arr.reduce((a, b) => a + b, 0);
  return sum === 0 
    ? arr.map(() => 0)
    : arr.map(item => (item / sum) * 100);
}

const percentages = arrayPercentages([10, 20, 30]); // [16.66..., 33.33..., 50]

可视化进度条实现

结合DOM操作可以实现简单的进度条效果。

js实现占比

function updateProgressBar(value, maxValue, elementId) {
  const percentage = (value / maxValue) * 100;
  document.getElementById(elementId).style.width = `${percentage}%`;
}

标签: js