您的位置：首页 > Web前端 > JavaScript

利用html,JavaScript计算常用图形面积

2017-12-13 15:06 429 查看

重点内容

利用html,JavaScript

今天2017.12.13，项目预上线阶段，闲着没事，帮老表写个常用图形面积计算的小工具，顺便复习下之前所学知识，源代码如下：

这里写代码片

<!DOCTYPE html>
<html >

<head>
<meta charset="UTF-8">
<title>求图形面积</title>
</head>
<style>

</style>
<body align=center>
<div>请输入矩形长度：
<input id="iptw" type="text">
</div>
<div>请输入矩形宽度：
<input id="ipth" type="text">
</div>
<div>
<button id="btn">点击计算结果</button>
</div>
<div>矩形面积为：
<input id="iptr" type="text">
</div>
<hr/>
<div>请输入圆半径：
<input id="ipr" type="text">
</div>
<div>
<button id="btc">点击计算结果</button>
</div>
<div>圆面积为：
<input id="ipc" type="text">
</div>

<hr/>
<h4>当弧是劣弧时<h4/>
<div>请输弓高：
<input id="gg" type="text">
</div>
<div>请输玄长：
<input id="xc" type="text">
</div>
<div>
<button id="btg">点击计算结果</button>
</div>
<div>弓形面积为：
<input id="gxs" type="text">
</div>

<hr/>
<h4>当弧是优弧时<h4/>
<div>请输玄到圆心的距离：
<input id="ygg" type="text">
</div>
<div>请输玄长：
<input id="yxc" type="text">
</div>
<div>
<button id="btyg">点击计算结果</button>
</div>
<div>弓形面积为：
<input id="gxys" type="text">
</div>

<script>
function $(id) {
return document.getElementById(id);
}

$('btn').onclick = function() {

var width = parseFloat($('iptw').value);
var height = parseFloat($('ipth').value);
var mianji = width * height;
$('iptr').value = mianji;
}

$('btc').onclick = function() {

var r = parseFloat($('ipr').value);
var mianji = Math.PI*Math.pow(r,2);
$('ipc').value = mianji;
}

$('btg').onclick = function() {
var gheight = parseFloat($('gg').value);
var glenth = parseFloat($('xc').value);
<!--(R-H)^2+(L/2)^2=R^2 勾股定理求圆半径-->
var gR = gheight/2+(Math.pow(glenth,2)/(8*gheight))
<!-- 三角函数求弧所对应的圆心角:A=2*ARC SIN((L/2)/R)-->
var A = 2*Math.asin((glenth/2)/gR)
<!--弓形面积为:S=PI*R^2*A/360-(L*R*COS(A/2))/2-->
<!--var S = Math.PI*Math.pow(gR,2)*A/360-(glenth*gR*Math.cos(A/2))/2-->
<!--var S = Math.PI*Math.pow(gR,2)*A*(180/Math.PI)/360-(gR-gheight)*glenth/2  简化成下列-->
var S = Math.pow(gR,2)*A/2-(gR-gheight)*glenth/2

$('gxs').value = S;
}

$('btyg').onclick = function() {
var gheight = parseFloat($('ygg').value);
var glenth = parseFloat($('yxc').value);
<!--gheight^2+(L/2)^2=R^2 勾股定理求圆半径-->
var gR = Math.sqrt(Math.pow(gheight,2)+Math.pow(glenth/2,2));
<!-- 三角函数求弧所对应的圆心角:A=2*Math.PI-2*ARC SIN((L/2)/R)-->
var A = 2*Math.PI-2*Math.asin((glenth/2)/gR)
<!--弓形面积为:S=PI*R^2*A/360+(L*R*COS(A/2))/2-->
<!--var S = Math.PI*Math.pow(gR,2)*A/360+(glenth*gR*Math.cos(A/2))/2-->
<!--var S = Math.PI*Math.pow(gR,2)*A*(180/Math.PI)/360+(gR-gheight)*glenth/2  简化成下列-->
var S = Math.pow(gR,2)*A/2+gheight*glenth/2

$('gxys').value = S;
}
</script>
</body>

</html>s

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html

相关文章推荐

新的分享

章节导航