js 百分比计算|极客笔记

js 百分比计算

在前端开发中，经常会遇到需要计算百分比的情况，例如页面加载进度条、商品折扣计算、数据图表展示等等。在JavaScript中，我们可以通过简单的数学运算来实现百分比的计算。

计算百分比的公式

百分比的计算公式为：百分比 = (部分 / 总数) * 100%。用数学表达式表示就是：

percentage = (part / total) * 100;

其中，part代表部分的数值，total代表总数的数值，percentage即为计算得到的百分比。

实例演示

为了更好地理解百分比的计算方法，我们可以通过以下几个实例来演示：

实例一：计算商品打折后的价格

假设有一件商品原价为100元，现在打7折，我们可以通过以下代码来计算折后的价格：

// 计算商品打折后的价格
let originalPrice = 100; // 商品原价
let discountRate = 0.7; // 打折比例

let finalPrice = originalPrice * discountRate; // 计算折后价格
console.log("折后价格为：" + finalPrice + "元");

运行结果为：

折后价格为：70元

实例二：计算页面加载进度条的百分比

假设有一个页面需要加载数据，我们可以通过计算已加载数据量与总数据量的百分比来展示页面加载进度条的进度：

// 模拟页面加载数据
let loadedData = 500; // 已加载数据量
let totalData = 1000; // 总数据量

let percentage = (loadedData / totalData) * 100; // 计算加载进度百分比
console.log("页面加载进度为：" + percentage.toFixed(2) + "%");

运行结果为：

页面加载进度为：50.00%

实例三：计算数据图表展示的百分比

假设有一个数据图表展示某项指标在总值中的占比，我们可以通过以下代码来计算该占比的百分比：

// 数据图表展示
let currentNum = 750; // 当前项指标数值
let totalNum = 1500; // 总指标数值

let percentage = (currentNum / totalNum) * 100; // 计算占比百分比
console.log("该指标占比为：" + percentage.toFixed(2) + "%");

运行结果为：