<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>BMI计算器</title>
</head>
<body>
	<h1>BMI计算器</h1>
	<table id="personalTable">
		<tr>
			<th>姓名</th>
			<th>体重(kg)</th>
			<th>身高(cm)</th>
			<th>BMI指数</th>
		</tr>
	</table>
	<div id="result"></div>
	<script>
		//读取csv文件
		function readCSV(file, callback) {
			var xhr = new XMLHttpRequest();
			xhr.open('GET', file, true);
			xhr.onreadystatechange = function(){
				if(xhr.readyState === 4 && xhr.status === 200){
					var data = xhr.responseText;
					callback(data);
				}
			};
			xhr.send();
		}
<pre><code>	//解析csv文件
	function parseCSV(data) {
		var lines = data.split('
</code></pre>
<p>');
var headers = lines[0].split(',');
var result = [];
for(var i = 1; i &lt; lines.length; i++) {
var obj = {};
var currentline = lines[i].split(',');
for(var j = 0; j &lt; headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
return result;
}</p>
<pre><code>	//计算BMI指数
	function calcBMI(weight, height) {
		var bmi = weight / Math.pow(height / 100, 2);
		return bmi.toFixed(2);
	}

	//显示结果
	function showResult(data) {
		var table = document.getElementById('personalTable');
		var resultDiv = document.getElementById('result');
		var threshold = 20;
		var html = '';
		for(var i = 0; i &lt; data.length; i++) {
			var bmi = calcBMI(data[i]['体重(kg)'], data[i]['身高(cm)']);
			data[i]['BMI指数'] = bmi;
			var tr = '&lt;tr&gt;&lt;td&gt;'+ data[i]['姓名'] +'&lt;/td&gt;&lt;td&gt;'+ data[i]['体重(kg)'] +'&lt;/td&gt;&lt;td&gt;'+ data[i]['身高(cm)'] +'&lt;/td&gt;&lt;td&gt;'+ bmi +'&lt;/td&gt;&lt;/tr&gt;';
			html += tr;
			if(bmi &lt; threshold) {
				var info = data[i]['姓名'] + ',' + data[i]['体重(kg)'] + 'kg,' + data[i]['身高(cm)'] + 'cm,BMI指数为' + bmi;
				resultDiv.innerHTML += info + '&lt;br&gt;';
			}
		}
		table.innerHTML += html;
	}

	//主函数
	function main() {
		readCSV('persionalinfo.csv', function(data){
			var parsedData = parseCSV(data);
			showResult(parsedData);
		});
	}

	main();
&lt;/script&gt;
</code></pre>
</body>
</html>
基于 JavaScript 的 BMI 计算器 - 筛选显示低 BMI 人员信息

原文地址: https://www.cveoy.top/t/topic/lOLY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录