开发一个XHTML文档,其中包含了一组文本框和一个提交按钮(1) 文本框的提示内容为苹果(每斤5元)、桔子(每斤3.5元)、香蕉(每斤4元),文本框是用来接收数值输入,表示购买了几斤此类水果,都应该有自己的onclick事件处理程序,这些事件处理能够将对应的水果价格添加到总价格中。(2) 针对提交按钮的事件处理程序必须能产生一个alert窗口,给用户提示总价格。(3) 对文档中文本框添加真实性检查功能,对文本框输入的检查应该保证在0-99之间。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水果</title>
<style type="text/css">
#a{
width:600px;
height:300px;
font-size:15px;
color:white;
position:absolute;
top:100px;
left:400px;
background-color:blue;
z-index:3;
}
</style>
<script language="javascript">
function add(x)
{
var a1=document.getElementById("a1").value;
var a2=document.getElementById("a2").value;
var a3=document.getElementById("a3").value;
var value0=0;
if(x==1)
{
if(a1<1||a1>99)
{
alert("请输入0-99之间的数!");
else
{
var value0=a1*5;
if( value1!==undefined)
{
document.getElementById("b1").value=value0;
}
}
}
else if(x==2)
{
if(a2<1||a2>99)
alert("请输入0-99之间的数!");
else
{
var value0=a2*3.5;
if( value0!==undefined)
{
document.getElementById("b2").value=value0;
}
}
}
else if(x==3)
{
if(a3<1||a3>99)
alert("请输入0-99之间的数!");
else
{
var value0=a3*4;
if(value0!==undefined)
{
document.getElementById("b3").value=value0;
}
}
}
else if(x==4)
{
if(value0!=undefined)
{
value0=a1*5+a2*3.5+a3*4;
document.getElementById("b4").value=value0;
alert("总共的价格为:"+value0);
}
}
else if(x=5)
{
document.getElementById("a1").value=0;
document.getElementById("a2").value=0;
document.getElementById("a3").value=0;
document.getElementById("b4").value=0;
document.getElementById("b1").value=0;
document.getElementById("b2").value=0;
document.getElementById("b3").value=0;
}
}
</script>
</head>
<body background="雪花.gif">
<bgsound loop="-1" src="纯音乐-忧伤还是快乐.mp3" >
<div id="a" >
<br/>
<h3 align="center">水果商店</h3>
<br>
<p align="center">
<form name="form1">
苹果( 5元\斤 ) <input type="text" ID="a1" value="" size="4" >
<button onclick="add(1);">确定</button>
</form>
<form name="form2">
桔子(3.5元\斤) <input type="text" ID="a2" value="" size="4" >
<button onclick="add(2);">确定</button>
</form>
<form name="form3">
香蕉( 4元\斤 ) <input type="text" ID="a3" value="" size="4" >
<button onclick="add(3);">确定</button>
</form>
<form>
总价格:
<input typr="text" id="b4" disabled="disabled" value="" size="25" />
<button onclick="add(4);">提交</button>
</form>
<form>
<button onclick="add(5);">清零</button>
</form>
</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水果</title>
<style type="text/css">
#a{
width:600px;
height:300px;
font-size:15px;
color:white;
position:absolute;
top:100px;
left:400px;
background-color:blue;
z-index:3;
}
</style>
<script language="javascript">
function add(x)
{
var a1=document.getElementById("a1").value;
var a2=document.getElementById("a2").value;
var a3=document.getElementById("a3").value;
var value0=0;
if(x==1)
{
if(a1<1||a1>99)
{
alert("请输入0-99之间的数!");
else
{
var value0=a1*5;
if( value1!==undefined)
{
document.getElementById("b1").value=value0;
}
}
}
else if(x==2)
{
if(a2<1||a2>99)
alert("请输入0-99之间的数!");
else
{
var value0=a2*3.5;
if( value0!==undefined)
{
document.getElementById("b2").value=value0;
}
}
}
else if(x==3)
{
if(a3<1||a3>99)
alert("请输入0-99之间的数!");
else
{
var value0=a3*4;
if(value0!==undefined)
{
document.getElementById("b3").value=value0;
}
}
}
else if(x==4)
{
if(value0!=undefined)
{
value0=a1*5+a2*3.5+a3*4;
document.getElementById("b4").value=value0;
alert("总共的价格为:"+value0);
}
}
else if(x=5)
{
document.getElementById("a1").value=0;
document.getElementById("a2").value=0;
document.getElementById("a3").value=0;
document.getElementById("b4").value=0;
document.getElementById("b1").value=0;
document.getElementById("b2").value=0;
document.getElementById("b3").value=0;
}
}
</script>
</head>
<body background="雪花.gif">
<bgsound loop="-1" src="纯音乐-忧伤还是快乐.mp3" >
<div id="a" >
<br/>
<h3 align="center">水果商店</h3>
<br>
<p align="center">
<form name="form1">
苹果( 5元\斤 ) <input type="text" ID="a1" value="" size="4" >
<button onclick="add(1);">确定</button>
</form>
<form name="form2">
桔子(3.5元\斤) <input type="text" ID="a2" value="" size="4" >
<button onclick="add(2);">确定</button>
</form>
<form name="form3">
香蕉( 4元\斤 ) <input type="text" ID="a3" value="" size="4" >
<button onclick="add(3);">确定</button>
</form>
<form>
总价格:
<input typr="text" id="b4" disabled="disabled" value="" size="25" />
<button onclick="add(4);">提交</button>
</form>
<form>
<button onclick="add(5);">清零</button>
</form>
</p>
</div>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货