好吧所以我是一个初学者(一天前开始这个旅程)慢慢地教我自己的javascript,我为一个简单的价格引用写了一个代码......但是现在我试图建立它。我知道代码的格式非常糟糕(我不知道空间应该去哪里和那些括号:S)但我想出的是什么......间距和东西对程序有影响吗?或者出于美观原因和易于调试等...
所以我的价格报价......它有一些总价格,时间,镜头和DVD的等式...它们都是输入字段,现在我想在等式中添加复选框..如果它们是检查一个值将被添加到总...我在计算器中有他们但没有附加脚本...只有三个复选框有一个设定值... 2复选框将有一个值乘以在添加到总数之前的dvds数...最后一个复选框将是另一个类似于我已经输入的文本输入..
我已经尝试了多个东西,比如另一个功能,但它可能做错了反正大声笑,我尝试了另一个计算功能,添加功能,updatecost功能,一些chkbox功能(我忘了名字)...但我不知道怎么弄在该复选框的函数中计算的值,进入计算函数的等式。我尝试了parsefloat的事情,如果我检查了值,它只能半工作....我尝试的另一件事是在输入复选框的值之前输入隐藏值0,两者都具有相同的名称......一些研究告诉我,如果未选中复选框,则默认为隐藏值我设置了相同的名称(这是0)...它没有工作...或者我可能没有在方程中输入它...请指导我正确的方向:)我即将拉我的头发!!!“
http://jsfiddle.net/yetanothercoder/uFD3y/
<html>
<head>
<style type="text/css">
.tableheader {
font-weight: bold;
font-size: 20px;
font-family: calibri;
text-align: center;
}
.regreelfont {
font-size: 15px;
font-family: calibri;
text-align: right;
background-color: #96C6FF;
}
.supreelfont {
font-size: 15px;
font-family: calibri;
text-align: right;
background-color: #7CB8FF;
}
.sixreelfont {
font-size: 15px;
font-family: calibri;
text-align: right;
background-color: #55A1FE;
}
.bottomfonts {
font-family: calibri;
font-size: 16px;
font-weight: 900;
}
.cellcolor {
text-align: center;
background-color: #D2E7FF;
}
.cellcolor2 {
text-align: left;
background-color: #D2E7FF;
}
.rightside {
background-color: #D2E7FF;
text-align: right;
}
.border {
border-width: 10px;
border-radius: 20px;
border-style: solid;
border-color: #CBCBCB;
}
.leftside {
text-align: left;
}
.bottwo {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.addons {
font-family: Lucida Console;
font-size:11px;
font-weight;
bold;
}
.topleft {
border-top-left-radius: 10px;
}
.topright {
border-top-right-radius: 10px;
}
.orange {
color: #fef4e9;
border: solid 1px ##197BFB;
border-radius: 10px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#197BFB), to(#4A5C75));
background: -moz-linear-gradient(top, #197BFB, #207DF6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#197BFB', endColorstr='#4A5C75');
}
.orange:hover {
background: #C3D9FF;
}
.orange:active {
color: #000000;
</style>
<script language="javascript" type="text/javascript">
function calculate() {
var type;
price = parseFloat(0.20);
regthree = parseFloat(document.form.regthree.value);
if (isNaN(regthree)) {
regthree = 0;
}
regfour = parseFloat(document.form.regfour.value);
if (isNaN(regfour)) {
regfour = 0;
}
regfive = parseFloat(document.form.regfive.value);
if (isNaN(regfive)) {
regfive = 0;
}
regsix = parseFloat(document.form.regsix.value);
if (isNaN(regsix)) {
regsix = 0;
}
regseven = parseFloat(document.form.regseven.value);
if (isNaN(regseven)) {
regseven = 0;
}
supthree = parseFloat(document.form.supthree.value);
if (isNaN(supthree)) {
supthree = 0;
}
supfour = parseFloat(document.form.supfour.value);
if (isNaN(supfour)) {
supfour = 0;
}
supfive = parseFloat(document.form.supfive.value);
if (isNaN(supfive)) {
supfive = 0;
}
supsix = parseFloat(document.form.supsix.value);
if (isNaN(supsix)) {
supsix = 0;
}
supseven = parseFloat(document.form.supseven.value);
if (isNaN(supseven)) {
supseven = 0;
}
sixthree = parseFloat(document.form.sixthree.value);
if (isNaN(sixthree)) {
sixthree = 0;
}
sixfour = parseFloat(document.form.sixfour.value);
if (isNaN(sixfour)) {
sixfour = 0;
}
sixfive = parseFloat(document.form.sixfive.value);
if (isNaN(sixfive)) {
sixfive = 0;
}
sixsix = parseFloat(document.form.sixsix.value);
if (isNaN(sixsix)) {
sixsix = 0;
}
sixseven = parseFloat(document.form.sixseven.value);
if (isNaN(sixseven)) {
sixseven = 0;
}
regthreetot = parseFloat(regthree * 50);
regfourtot = parseFloat(regfour * 100);
regfivetot = parseFloat(regfive * 200);
regsixtot = parseFloat(regsix * 300);
regseventot = parseFloat(regseven * 400);
supthreetot = parseFloat(supthree * 50);
supfourtot = parseFloat(supfour * 100);
supfivetot = parseFloat(supfive * 200);
supsixtot = parseFloat(supsix * 300);
supseventot = parseFloat(supseven * 400);
sixthreetot = parseFloat(sixthree * 50);
sixfourtot = parseFloat(sixfour * 100);
sixfivetot = parseFloat(sixfive * 200);
sixsixtot = parseFloat(sixsix * 300);
sixseventot = parseFloat(sixseven * 400);
rthreet = parseFloat(regthree * 3.5);
if (isNaN(regthree)) {
regthree = 0;
}
rfourt = parseFloat(regfour * 7);;
if (isNaN(regfour)) {
regfour = 0;
}
rfivet = parseFloat(regfive * 14);
if (isNaN(regfive)) {
regfive = 0;
}
rsixt = parseFloat(regsix * 22);
if (isNaN(regsix)) {
regsix = 0;
}
rsevent = parseFloat(regseven * 29);
if (isNaN(regseven)) {
regseven = 0;
}
sthreet = parseFloat(supthree * 3);
if (isNaN(supthree)) {
supthree = 0;
}
sfourt = parseFloat(supfour * 6);
if (isNaN(supfour)) {
supfour = 0;
}
sfivet = parseFloat(supfive * 13);
if (isNaN(supfive)) {
supfive = 0;
}
ssixt = parseFloat(supsix * 20);
if (isNaN(supsix)) {
supsix = 0;
}
ssevent = parseFloat(supseven * 26);
if (isNaN(supseven)) {
supseven = 0;
}
sithreet = parseFloat(sixthree * 1.5);
if (isNaN(sixthree)) {
sixthree = 0;
}
sifourt = parseFloat(sixfour * 3);
if (isNaN(sixfour)) {
sixfour = 0;
}
sifivet = parseFloat(sixfive * 7);
if (isNaN(sixfive)) {
sixfive = 0;
}
sisixt = parseFloat(sixsix * 11);
if (isNaN(sixsix)) {
sixsix = 0;
}
sisevent = parseFloat(sixseven * 14);
if (isNaN(sixseven)) {
sixseven = 0;
}
totalprice = parseFloat(regthreetot + regfourtot + regfivetot + regsixtot + regseventot + supthreetot + supfourtot + supfivetot + supsixtot + supseventot + sixthreetot + sixfourtot + sixfivetot + sixsixtot + sixseventot) * price;
tottime = parseFloat(rthreet + rfourt + rfivet + rsixt + rsevent + sthreet + sfourt + sfivet + ssixt + ssevent + sithreet + sifourt + sifivet + sisixt + sisevent)
totalfoot = parseFloat(regthreetot + regfourtot + regfivetot + regsixtot + regseventot + supthreetot + supfourtot + supfivetot + supsixtot + supseventot + sixthreetot + sixfourtot + sixfivetot + sixsixtot + sixseventot)
dvdcal = parseFloat(tottime / 60)
totdvd = Math.ceil(dvdcal)
document.form.quote.value = totalprice;
document.form.totalfootage.value = totalfoot;
document.form.ttime.value = tottime;
document.form.totdvd.value = totdvd;
document.form.totad.value = music
}
</script>
</head>
<body>
<form name="form">
<table class="border" cellspacing="0" cellpadding="3">
<tr>
<td class="tableheader cellcolor topleft">Reel Size</td>
<td class="tableheader cellcolor topright"># of Reels</td>
</tr>
<tr>
<td class="regreelfont">3" Regular8 (50 ft)</font>
</td>
<td class="cellcolor">
<input type="text" name="regthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="regreelfont">4" Regular8 (100 ft)</td>
<td class="cellcolor">
<input type="text" name="regfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="regreelfont">5" Regular8 (200 ft)</td>
<td class="cellcolor">
<input type="text" name="regfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="regreelfont">6" Regular8 (300 ft)</td>
<td class="cellcolor">
<input type="text" name="regsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="regreelfont">7" Regular8 (400 ft)</td>
<td class="cellcolor">
<input type="text" name="regseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
<tr></tr>
<td class="supreelfont">3" Super8 (50 ft)</td>
<td class="cellcolor">
<input type="text" name="supthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="supreelfont">4" Super8 (100 ft)</td>
<td class="cellcolor">
<input type="text" name="supfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="supreelfont">5" Super8 (200 ft)</td>
<td class="cellcolor">
<input type="text" name="supfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="supreelfont">6" Super8 (300 ft)</td>
<td class="cellcolor">
<input type="text" name="supsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="supreelfont">7" Super8 (400 ft)</td>
<td class="cellcolor">
<input type="text" name="supseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="sixreelfont">3" 16mm (50 ft)</td>
<td class="cellcolor">
<input type="text" name="sixthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td td class="sixreelfont">4" 16mm (100 ft)</td>
<td class="cellcolor">
<input type="text" name="sixfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td td class="sixreelfont">5" 16mm (200 ft)</td>
<td class="cellcolor">
<input type="text" name="sixfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td td class="sixreelfont">6" 16mm (300 ft)</td>
<td class="cellcolor">
<input type="text" name="sixsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td td class="sixreelfont">7" 16mm (400 ft)</td>
<td class="cellcolor">
<input type="text" name="sixseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">BACKGROUND MUSIC - $14.99
<input type="checkbox" name="ckBox" id="ckBox">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">TITLES (PER DVD) - $9.99
<input type="checkbox" name="titles">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">TRANSITIONS (PER DVD) - $9.99
<input type="checkbox" name="transitions"
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">FILM REPAIR AND SPLICING - $14.99
<input type="checkbox" name="adees" value="14.99">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">SPECIAL FILM EDITING - $100.00
<input type="checkbox" name="adees" value="100">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">EXTRA COPIES - $9.99 PER COPY
<input type="text" name="copies" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:50px; font-size:15px">
</td>
</tr>
<tr>
<td class="cellcolor" colspan="2"></td>
</tr>
<tr>
<td class="rightside bottomfonts" colspan="2">TOTAL PRICE ($)
<input type="text" name="quote" style="font-family:Verdana; background-color:#FFFFE5; height:25px; text-align:center; width:100px; font-size:16px">
</td>
<tr/>
<tr>
<td class="rightside bottomfonts" colspan="2">FOOTAGE (ft)
<input type="text" name="totalfootage" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px"
</td>
</tr>
<tr>
<td class="rightside bottomfonts" colspan="2">TOTAL TIME (min)
<input type="text" name="ttime" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px">
</td>
</tr>
<tr>
<td class="rightside bottomfonts" colspan="2">TOTAL DVDs
<input type="text" name="totdvd" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px">
</td>
</tr>
<tr>
<td class="cellcolor bottwo" colspan="2">
<input type="button" class="orange" style="font-size: 18px; width:60px;height:35px"
value="Clear" onClick="this.form.reset()"> 
<input type="button" name="Button" class="orange" style="font-size: 18px; width:120px;height:35px"
value="Calculate" onClick="calculate()">
</td>
</tr>
</table>
</form>
</body>