代码：
<style type="text/css">
div{
margin: 10px 450px;
}
label{
display: block;
margin:10px 50px;
color: #0066ff;
font-size: 1.1em;
font-family: "Microsoft YaHei";
}
.title{
display: inline-block;
font-family: "Microsoft YaHei";
margin-left: 2px;
}
input{
size: 3;
maxlength:4;
}
.btn{
height: 2em;
width: 50px;
border:1px solid #fff;
border-radius: 2px;
background: #3366ff;
color: #fff;
}
.btn:hover{
background: #33cc66;
}
</style>
<script type="text/javascript">
function moveNext(object,index){
if(object.value.length == 3){
document.forms[0].elements[index+1].focus();
}
}
function getArea(){
var m = parseFloat(document.triangle.a.value);
var n = parseFloat(document.triangle.b.value);
var t = parseFloat(document.triangle.c.value);
if ((m+n>t)&&(m+t>n)&&(n+t>m)) {
var p = (m+n+t)/2;
var area = Math.sqrt(p*(p-m)*(p-n)*(p-t));
var result = "三角形的面积为"+area;
document.triangle.area.value = result;
}
else{
var error = "不存在这样的三角形，请检查.";
document.triangle.area.value = error;
}
}
</script>
</head>
<body onload = "document.form[0].elements[0].focus();">
<div>
<label>计算三角形的面积</label>
<p class="title">请输入三角形的三边长为：</p>
<form name="triangle" method="post">
<input type="number" name="a" size="2" maxlength="3" onkeyup = "moveNext(this,0)">-
<input type="number" name="b" size="2" maxlength="3" onkeyup = "moveNext(this,1)">-
<input type="number" name="c" size="2" maxlength="3" onkeyup = "moveNext(this,2)">
<input type="button" class="btn" value="计算" onclick="getArea()">
<input type="text" name="area" size="30">
</form>
</div>
</body>
</html>图片：
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
