Php 如何使用javascript或jQuery进行计算，从各种不同的元素中获取值？
我目前正试图为我的第一个网站构建一个报价计算器，我已经学习Javascript一周了，我使用jQuery在网站加载时隐藏各种元素，然后单击相关按钮显示。第一个问题，通过这样做，我是否在任何新的javascript代码和jQuery代码之间创建了任何冲突 我建立了一个弹出式界面，将提供的服务分为5类。我进一步开发了一个类别，当单击“需要存储多少个框”时，会显示一个文本框，下面是一个文本框，旁边是一个提交按钮。单击“提交”按钮，将显示一个新问题；'“您希望存储多长时间？”和另外两个名为“周”和“月”的文本框，还有另一个提交按钮 我希望实现的是创建一个函数，它获取输入到第一个框中的值，将给定的数字除以18，并将其四舍五入到下一个整数，即使它是1.000001。同时，我需要将输入到“月”中的值乘以4.33并四舍五入。然后将月数*4.33的结果与输入周数的值相加，得出总持续时间，最终计算结果必须是（总持续时间*2.50）*第一次计算的结果。最终结果必须显示在我选择的文本框中，作为货币值-0.00英镑 许多问题： 我使用的所有文本框都必须在javascript的“form”标记中才能正确找到它们吗？ 如果是这样的话，是必须全部采用一种形式，还是可以使用多种形式？Php 如何使用javascript或jQuery进行计算，从各种不同的元素中获取值？,php,javascript,jquery,Php,Javascript,Jquery,我目前正试图为我的第一个网站构建一个报价计算器，我已经学习Javascript一周了，我使用jQuery在网站加载时隐藏各种元素，然后单击相关按钮显示。第一个问题，通过这样做，我是否在任何新的javascript代码和jQuery代码之间创建了任何冲突 我建立了一个弹出式界面，将提供的服务分为5类。我进一步开发了一个类别，当单击“需要存储多少个框”时，会显示一个文本框，下面是一个文本框，旁边是一个提交按钮。单击“提交”按钮，将显示一个新问题；'“您希望存储多长时间？”和另外两个名为“周”和“月”
我可以在同一个“script”标记中混合使用Javascript和jQuery吗？如果是的话，一个应该先走一个吗 稍后，一旦报价计算器运行正常，我计划使用PHP向用户发送一封电子邮件，其中包含他们的报价详细信息，并向我自己发送相同的信息。我是否需要在HTML/Javascript中考虑这一点？我想发送的所有详细信息都必须是：一个表单/多个表单/无所谓，可以是任何元素吗 这里是弹出按钮在几乎完美的工作条件下（减去计算lol），右边的元素有轻微缺陷，但我已经在网站代码中修复了这个问题。在脚本标记的顶部，在代码的底部，我已经在一些思维导图之后加入了我在计算部分的最佳尝试，以理解所需内容和顺序
<!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">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body { width:100%; height:100%; text-align:center; margin:0px; }
div#bodycontainer { position:absolute; min-width:100%; height:100%; padding:0px; z-index:100; }
div.centerdiv { position:relative; width:1100px; height:100%; margin:0 auto; border-left:solid 2px #ddd; border-right:solid 2px #ddd; background-image:url(images/transport_background_alt.png); overflow:visible; background-position:0px 0px; background-repeat:no-repeat; z-index:1 }
div#getaquote { width:320px; height:55px; border:solid 1px #516c84; border-radius:15px; float:right; background:url(images/quotebkgd.png) no-repeat #fff; background-position:500px -50px; padding:none; }
button#quote { width:300px; height:50px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#516c84; background-color:#fff; border:none; }
p#quotetitle { position:relative; top:20px; left:20px; width:500px; height:100px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:28px; color:#516c84; margin:0px; text-align:left; }
div#callus { position:absolute; top:435px; width:340px; height:110px; font-family:"Bookman Old Style", Times New Roman, Times, serif; float:left;/*border:solid 1px #000;*/ }
div#emailus { position:absolute; top:435px; left:340px; width:370px; height:110px; font-family:"Bookman Old Style", Times New Roman, Times, serif; float:left; }
img.icon { float:left; }
p#email { position:absolute; top:10px; left:120px; font-size:30px; font-weight:bold; color:#516c84; margin:0px; line-height:34px; }
p#smallertxt { position:absolute; top:50px; left:100px; font-size:22px; color:#516c84; margin:0px; }
p#call { position:absolute; top:10px; left:105px; font-size:28px; font-weight:bold; color:#516c84; margin:0px; line-height:34px; }
div#minbutton { width:52px; height:52px; position:absolute; top:15px; left:915px;/*border:solid 1px #000;*/ }
div#minbutton a:hover img { background:#516c84; }
div.quotebuttons { position:absolute; top:70px; left:15px; width:200px; height:auto; }
button#servcat1 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat1:hover { background:#516c84; color:#fff; }
button#servcat1:click {
background:#516c84;
color:#fff;
}
button#servcat2 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat2:hover { background:#516c84; color:#fff; }
button#servcat3 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat3:hover { background:#516c84; color:#fff; }
button#servcat4 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat4:hover { background:#516c84; color:#fff; }
button#servcat5 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat5:hover { background:#516c84; color:#fff; }
div#transportopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#storageopt { position:absolute; top:73px; left:230px; width:500px; height:330px;/*border:outset 3px #000;*/
}
div#freightopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#relocationopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#exhibitionopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#quoteelements { position:absolute; left:750px; width:auto; height:auto; left:750px; }
form#form { position:absolute; top:270px; width:205px; height:225px; /*border:solid 1px #000;*/ font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:20px; color:#fff; line-height:30px; }
form#quoteform { background:none; }
input.formdata { height:30px; width:200px; border-radius:5px; }
input#submitbtn { position:relative; display:block; float:right; width:130px; height:50px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; }
input#submitbtn:hover { color:#516c84; background:#fff; border-radius:5px; }
div#quotecalc { position:absolute; top:63px; width:205px; height:210px; }
div#total { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
div#tax { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
div#grandtotal { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
p.calctitles { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-weight:bold; color:#fff; text-align:left; margin-left:5px; margin-top:0px; text-decoration:underline; }
#numberprice { max-width:150px; max-height:22px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-weight:500; font-size:20px; padding:0px; color:#fff; text-align:right; text-decoration:underline; margin-top:0px; border:none; background:#516c84; }
#storagebutton1 { width:230px; height:70px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; margin-right:10px; }
#storagebutton1:hover { background:#fff; color:#516c84; font-weight:bold; }
#storagebutton2 { width:230px; height:70px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; }
#storagebutton2:hover { background:#fff; color:#516c84; font-weight:bold; }
#backbutton { width:70px; height:70px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:16px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; margin-right:10px; }
#backbutton:hover { background:#fff; color:#516c84; font-weight:bold; }
#backbutton2 { width:70px; height:70px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:16px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; margin-right:10px; }
#backbutton2:hover { background:#fff; color:#516c84; font-weight:bold; }
.optdisplay { width:470px; height:8px; background:#516c84; margin:10px auto; border:outset 3px #116c84; border-radius:5px; }
.boxtext { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:28px; font-weight:bold; color:#fff; margin-top:10px; }
#numbofboxes { width:85px; height:55px; background:#fff; color:#516c84; text-align:center; border:outset 2px #516c84; border-radius:5px; font-size:34px; font-weight:bold; margin:0px; }
#numbweeks { width:60px; height:40px; background:#fff; color:#516c84; text-align:center; border:outset 5px #516c84; border-radius:5px; font-size:34px; font-weight:bold; margin:0px; }
#numbmonths { width:60px; height:40px; background:#fff; color:#516c84; text-align:center; border:outset 5px #516c84; border-radius:5px; font-size:34px; font-weight:bold; margin-top:0px; }
.btw { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:18px; font-weight:bold; color:#fff; }
#smtbxno { width:85px; height:55px; background:#516c84; color:#fff; text-align:center; border-top:solid #fff 2px; border-left:solid #eee 1px; border-right:outset 3px #516c84; border-bottom:outset 2px #516c84; border-radius:5px; font-size:24px; font-weight:bold; font-family:"Bookman Old Style", Times New Roman, Times, serif; }
#tick2 { width:85px; height:55px; background:#516c84; color:#fff; text-align:center; border-top:solid #fff 2px; border-left:solid #eee 1px; border-right:outset 3px #516c84; border-bottom:outset 2px #516c84; border-radius:5px; font-size:24px; font-weight:bold; font-family:"Bookman Old Style", Times New Roman, Times, serif; }
</style>
</head><body>
<div id="bodycontainer">
<div id="getaquote"> <a>
<button id="quote"> <strong>Get A Quote Now</strong></br>
</button>
</a>
<p id="quotetitle"> <strong>Choose The Services You Require:</strong> </p>
<div id="callus"> <img class="icon" src="images/phoneicon.gif" />
<p id="call"> 0208 208 4411 </br>
07850 495 804 </p>
</div>
<div id="emailus"> <img class="icon" src="images/aticon.gif" />
<p id="email"> EMAIL: INFO
<p id="smallertxt"> <strong>BelmontTransport.com</strong> </p>
</p>
</div>
<div id="minbutton"> <a><img class="minimize" src="images/minimizebutton.png" /></a> </div>
<div class="quotebuttons"> <a>
<button id="servcat1"> <strong>Transport</strong> </button>
</a> <a>
<button id="servcat2"> <strong>Storage</strong> </button>
</a> <a>
<button id="servcat3"> <strong>Freight</strong> </button>
</a> <a>
<button id="servcat4"> <strong>Relocation</strong> </button>
</a> <a>
<button id="servcat5"> <strong>Exhibition</strong> </button>
</a> </div>
<div id="transportopt">
<div id="dedicatedtransport" onclick="addselected">
<input type="checkbox" name="options" onclick="options" value=250>
Dedicated Transport
</input>
</div>
<div id="commercialtransport"> Commercial Transport </div>
</div>
<div id="storageopt"> <a>
<button id="backbutton"> Back </button>
</a> <a>
<button id="backbutton2"> Back </button>
</a> <a>
<button id="storagebutton1"> Palletised Storage </button>
</a> <a>
<button id="storagebutton2"> Boxed Storage </button>
</a>
<div class="optdisplay">
<div id="noboxes">
<p class="boxtext">How many boxes do you need to store?</p>
<div id="boxinputs">
<input type="text" id="numbofboxes" value="0" name="boxnumber"/>
<button id="smtbxno"> <img src="images/tick.gif" alt="proceed"/> </button>
</div>
<p class="btw"> Standard box dimensions: 40cm x 40cm x 40cm </p>
</div>
<div id="storetimebox">
<p class="boxtext"> How long do you need to store for? </p>
<p class="btw"> Weeks
<input type="text" id="numbweeks" value="0" name="weekno" />
Months
<input type="text" id="numbmonths" value="0" name="monthno"/>
</p>
<button id="tick2" onclick="workitout()"> <img src="images/tick.gif" alt="proceed"/> </button>
</div>
</div>
</div>
<div id="freightopt"> This is where freight options are displayed </div>
<div id="relocationopt"> This is where relocation options are displayed </div>
<div id="exhibitionopt"> This is where exhibition options are displayed </div>
<div id="quoteelements">
<form id="form">
<strong>Name:</strong>
<input class="formdata" type="text" name="name">
<strong>Business:</strong>
<input class="formdata" type="text" name="business">
<strong>Email Address:</strong>
<input class="formdata" type="text" name="email">
<a>
<input id="submitbtn" type="submit" value="Get Quote">
</a>
</form>
<div id="quotecalc">
<div id="total">
<p class="calctitles"> Sub-Total </p>
<p id="stresult"> WOULD LIKE SUB TOTAL HERE </p>
</div>
<div id="tax">
<p class="calctitles"> VAT </p>
</div>
<div id="grandtotal">
<p class="calctitles"> Grand Total </p>
<p id="numberprice"> </p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var totalprice=""
var storagetime=""
var boxno=""
function workitout(){
var a=parseInt(document.boxnumber.value);
var b=parseInt(document.weekno.value);
var c=parseInt(document.monthno.value);
storagetime=(c*4.3);
Math.round(storagetime)=totalprice;
document.quotecalc.grandtotal.value=totalprice;
};
$(document).ready(function(){
$("#quotetitle").hide();
$("#callus").hide();
$("#emailus").hide();
$(".quotebuttons").hide();
$("#minbutton").hide();
$("#transportopt").hide();
$("#storageopt").hide();
$("#freightopt").hide();
$("#relocationopt").hide();
$("#exhibitionopt").hide();
$("#quoteelements").hide();
$("#quotecalc").hide();
$("#quoteform").hide();
$(".optdisplay").hide();
$("#backbutton").hide();
$("#backbutton2").hide();
$("#noboxes").hide();
$("#storetimebox").hide();
});
$("#quote").click(function(){
$("#getaquote").animate({height:"550px",position:"absolute",top:"125px"});
$("#getaquote").animate({width:"980px",left:"-245px"})
$("#quotetitle").show(1000);
$("#getaquote").css({"border-style":"solid","border-width":"2px","border-color":"#516c84"});
$("#quote").hide(500);
$("#bodytext").fadeTo(2500,0.15);
$("#callus").show(1000);
$("#emailus").show(1000);
$(".quotebuttons").show(2000);
$("#minbutton").show(1500);
$("#quotecalc").show();
$("#quoteelements").show(1000);
/*$("#bodytext").css({"background":"#516c84"});9e9ec6*/
});
$("#minbutton").click(function(){
$("#getaquote").animate({width:"320px",left:"435px"});
$("#getaquote").animate({height:"55px",position:"absolute",top:"65px"});
$("#quotetitle").hide();
$("#getaquote").css({"border-style":"none"});
/*$("#getaquote").css({"border-style":"solid","border-width":"2px","border-color":"#516c84"});*/
$("#quote").show(2000);
$("#bodytext").fadeTo(2500,1);
$("#callus").hide(1000);
$("#emailus").hide(1000);
$(".quotebuttons").hide();
$("#minbutton").hide();
$("#transportopt").hide();
$("#storageopt").hide();
$("#freightopt").hide();
$("#relocationopt").hide();
$("#exhibitionopt").hide();
$("#quoteelements").hide();
});
$("#servcat1").click(function(){
$("#transportopt").show();
$("#storageopt").hide();
$("#freightopt").hide();
$("#relocationopt").hide();
$("#exhibitionopt").hide();
});
$("#servcat2").click(function(){
$("#transportopt").hide();
$("#storageopt").show();
$("#freightopt").hide();
$("#relocationopt").hide();
$("#exhibitionopt").hide();
});
$("#servcat3").click(function(){
$("#transportopt").hide();
$("#storageopt").hide();
$("#freightopt").show();
$("#relocationopt").hide();
$("#exhibitionopt").hide();
});
$("#servcat4").click(function(){
$("#transportopt").hide();
$("#storageopt").hide();
$("#freightopt").hide();
$("#relocationopt").show();
$("#exhibitionopt").hide();
});
$("#servcat5").click(function(){
$("#transportopt").hide();
$("#storageopt").hide();
$("#freightopt").hide();
$("#relocationopt").hide();
$("#exhibitionopt").show();
});
$("#storagebutton1").click(function(){
$("#backbutton").show();
$(".optdisplay").show()
$(".optdisplay").animate({height:"245px"});
$("#storagebutton2").hide();
$("#storagebutton1").animate({width:"390px"})(5000)
});
$("#storagebutton2").click(function(){
$("#backbutton").show();
$(".optdisplay").show()
$(".optdisplay").animate({height:"245px"});
$("#storagebutton1").hide();
$("#noboxes").show(500);
$("#storagebutton2").animate({width:"390px"})(5000)
});
$("#backbutton").click(function(){
$("#storagebutton1").show();
$("#storagebutton2").show();
$(".optdisplay").hide();
$("#backbutton").hide();
$("#storagebutton2").animate({width:"230px"});
$("#noboxes").hide();
$("#storagebutton1").animate({width:"230px"})(5000);
});
$("#smtbxno").click(function(){
$("#noboxes").hide(1000);
$("#storetimebox").show(1500);
$("#backbutton").hide();
$("#backbutton2").show();
});
$("#backbutton2").click(function(){
$("#noboxes").show(1000);
$("#storetimebox").hide(500);
$("#backbutton").show();
$("#backbutton2").hide();
});
</script>
</body>
</html>
无标题文件
正文{宽度：100%；高度：100%；文本对齐：居中；边距：0px；}
div#bodycontainer{位置：绝对；最小宽度：100%；高度：100%；填充：0px；z索引：100；}
div.centerdiv{position:relative；width:1100px；height:100%；margin:0 auto；border left:solid 2px#ddd；border right:solid 2px#ddd；background image:url（image/transport#u background#alt.png）；溢出：可见；背景位置：0px 0px 0px；背景重复：无重复；z索引：1}
div#getaquote{width:320px；height:55px；border:solid 1px#516c84；border radius:15px；float:right；background:url（images/quotebkgd.png）no repeat#fff；背景位置：500px-50px；填充：none；}
按钮#引号{宽度：300px；高度：50px；边距：0px；字体系列：Arial，Helvetica，无衬线；字体大小：22px；颜色：516c84；背景色：#fff；边框：无；}
位置：相对；顶部：20px；左侧：20px；宽度：500px；高度：100px；字体系列：“Bookman Old Style”，Times New Roman，Times，serif；字体大小：28px；颜色：516c84；边距：0px；文本对齐：left；}
div#callus{位置：绝对；顶部：435px；宽度：340px；高度：110px；字体系列：“Bookman Old Style”，Times New Roman，Times，serif；float:left；/*边框：实心1px#000；*/}
div#emailus{位置：绝对；顶部：435px；左侧：340px；宽度：370px；高度：110px；字体系列：“Bookman Old Style”，Times New Roman，Times，serif；float:left；}
img.icon{float:left；}
电子邮件{位置：绝对；顶部：10px；左侧：120px；字体大小：30px；字体重量：粗体；颜色：516c84；边距：0px；行高：34px；}
p#smallerText{位置：绝对；顶部：50px；左侧：100px；字体大小：22px；颜色：516c84；边距：0px；}
调用{位置：绝对；顶部：10px；左侧：105px；字体大小：28px；字体重量：粗体；颜色：516c84；边距：0px；行高：34px；}
div#minbutton{宽度：52px；高度：52px；位置：绝对；顶部：15px；左侧：915px；/*边框：实心1px#000；*/}
div#minbutton a:悬停img{背景：#516c84；}
div.quotebuttons{位置：绝对；顶部：70px；左侧：15px；宽度：200px；高度：自动；}
按钮#servcat1{位置：相对；显示：块；浮动：左；宽度：200px；高度：60px；页边顶部：7px；字体系列：“Bookman Old Style”，Times New Roman，Times，serif；字体大小：22px；颜色：516c84；背景：fff；边框：起始3px#516c84；边框半径：5px；}
按钮#servcat1:悬停{背景：#516c84；颜色：#fff；}
按钮#服务1：单击{
背景#516c84；
颜色：#fff；
}
按钮#servcat2{位置：相对；显示：块；浮动：左；宽度：200px；高度：60px；页边顶部：7px；字体系列：“Bookman Old Style”，Times New Roman，Times，serif；字体大小：22px；颜色：516c84；背景：fff；边框：起始3px#516c84；边框半径：5px；}
按钮#servcat2:悬停{背景：#516c84；颜色：#fff；}
按钮#servcat3{位置：相对；显示：块；浮动：左；宽度：200px；高度：60px；页边顶部：7px；字体系列：“Bookman Old Style”，Times New Roman，Times，serif；字体大小：22px；颜色：516c84；背景：fff；边框：起始3px#516c84；边框半径：5px；}
按钮#servcat3:悬停{背景：#516c84；颜色：#fff；}
按钮#servcat4{位置：相对；显示：块；浮动：左；宽度：200px；高度：60px；页边顶部：7px；字体系列：“Bookman Old Style”，Times New Roman，Times，serif；字体大小：22px；颜色：516c84；背景：fff；边框：起始3px#516c84；边框半径：5px；}
按钮#servcat4:悬停{背景：#516c84；颜色：#fff；}
按钮#维修5{位置