<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆面积</title>
<script type="text/javascript" src="area.js"></script>
<style type="text/css">
.circle{
border:5px solid #FF6A6A;
background: #ADD8E6;
width: 500px;
height: 300px;
margin: 120px 400px;
}
h3{
text-align: center;
margin-top: 40px;
}
p{
margin: 20px 110px;
}
.button{
width: 250px;
height: 30px;
margin:40px 110px;
}
.button1{
width:50px;
margin-left: 50px;
}
.button2{
width:50px;
margin-left: 40px;
}
</style>
</head>
<body>
<form class="circle" id="form1" name="form1" method="post">
<h3>计算圆的面积</h3><br>
<p>输入半径：<input type="text" id="radiustext" name="radiustext"></p>
<p>圆的面积：<input type="text" id="areatext" name="areatext" readonly="readonly"></p>
<div class="button">
<a href="#" onclick="show();return false;"><input class="button1" type="button" value="计算"></a>
<a href="#" onclick="reset();"><input class="button2" type="button" value="清空"></a>
</div>
</form>
</body>
</html>
function show() {
//通过 ID 获取半径文本框的输入值并转换为浮点数
var radius = parseFloat(document.getElementById("radiustext").value);
// console.log(document.getElementById("radiustext").value);
var area = Math.PI * radius * radius;
console.log(area);
//document.getElementById("areatext").setAttribute("value",area);
document.getElementById("areatext").value = area;
console.log( document.getElementById("areatext").value);
return;
};
function reset(){
document.getElementById("radiustext").value="";
document.getElementById("areatext").value="";
return;
};