HTML文档的计算问题

OKJSJSF · 发表于 2024-6-29 23:43

HTML计算器练习，改进中。

OKJSJSF · 发表于 2024-6-29 23:52

代码上半部份
<html>
<head>
<meta charset="utf-8">
<h1>“大搬快聚”补贴计算器</h1>
</head>
<body>
<style type="text/css">
.style1 {font-size: x-large;text-align: center;
}
.style2 {width: 40%;font-size: x-large;text-align: center;
border-style:solid;border-width: 1px;border-collapse: collapse;
cellspacing="0";cellpadding="0";
}
</style>
<span class="style1">单位：元、平方米
<br><span class="style1">请在下面空框中录入数据及选择项目后点击“计算”：
<br><span class="style1">1、农户人口数？
<input type="text" id="input1" class="style1" onkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')">

<br><span class="style1">2、人均补贴标准：
<input type="text" id="input2" value=50000 class="style1">

<br><span class="style1">3、按农户人口补贴金额：
<input type="text" id="input3" value=＝？ class="style1">

<br><span class="style1">4、按农户人口可审批安置面积标准：
<br><table class="style2"> 
<tr><td class="style2">人口数</td><td class="style2">可安置面积</td></tr>
<tr><td class="style2">1</td><td class="style2"><input type="text" id="input4" value=60 class="style1">
</td></tr>
<tr><td class="style2">2</td><td class="style2"><input type="text" id="input5" value=100 class="style1">
</td></tr>
<tr><td class="style2">3及以上</td><td class="style2"><input type="text" id="input6" value=140 class="style1">
</td></tr>
</table>

<br><span class="style1">5、旧房建筑面积？
<input type="text" id="input7" class="style1" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))
execCommand('undo')">






<br><span class="style1">6、是否愿意搬迁至城南？
<input type="radio" name="group1" id=o1 value=1 class="style1">是
   <input type="radio" name="group1" id=o2 value=2 class="style1">否

<br><span class="style1">7、旧房结构类型？
<input type="radio" name="group2" id=o3 value=1 class="style1">泥木
   <input type="radio" name="group2" id=o4 value=2 class="style1">砖混

<br><span class="style1">8、旧房拆除补贴标准：
<br><table class="style2">
<tr><td class="style2">房屋结构</td><td class="style2">补贴单价</td></tr>
<tr><td class="style2">泥木</td><td class="style2"><input type="text" id="input8" value=200 class="style1">
</td></tr>
<tr><td class="style2">砖混</td><td class="style2"><input type="text" id="input9" value=300 class="style1">
</td></tr>
</table>

<br><span class="style1">9、旧房拆除可补贴金额：
<input type="text" id="input10" value=＝？ class="style1">

<br><span class="style1">10、有房户购商品房按面积补贴标准：
<input type="text" id="input11" value=3500 class="style1">

<br><span class="style1">11、无房户购商品房按面积补贴标准：
<input type="text" id="input12" value=2900 class="style1">

<br><span class="style1">12、按商品房实际建筑面积再补贴标准：
<input type="text" id="input13" value=2000 class="style1">

<br><span class="style1">13、计划新房建筑面积？
<input type="text" id="input14" class="style1" onkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')">

<br><span class="style1">14、新房户型选择？
<input type="radio" name="group3" id=o5 value=1 class="style1">商品房   
<input type="radio" name="group3" id=o6 value=2 class="style1">安置房   
<input type="radio" name="group3" id=o7 value=3 class="style1">大搬快聚房

<br><span class="style1">15、补贴合计：
<input type="text" id="input15" value=＝？ class="style1">

<br><span class="style1">16、意向商品房单价？
<input type="text" id="input16"  class="style1" onkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')">

<br><span class="style1">17、意向安置房单价：
<input type="text" id="input17" value=5600 class="style1">

<br><span class="style1">18、意向大搬快聚房单价：
<input type="text" id="input18" value=5500 class="style1">

<br><span class="style1">19、意向新房总价：
<input type="text" id="input19" value=＝？ class="style1">

<br><span class="style1">20、资金缺口（房价-补贴=）：
<input type="text" id="input20" value=＝？ class="style1">

<p><input type="button" value=计算＝ onclick="getsum()" class="style1">
   <input type="button" value="重置" onclick="reset()" class="style1">
   <input type="button" value="按揭计算器" onclick="zjrcu()" class="style1">

<br><class="style1">友情链接：<a href="http://www.jiangshan.gov.cn/col/col1229335337/index.html",target="_blank" >江山市人民政府</a>  <a href="https://www.zj96596.com/zj96596/gywm/index.shtml",target="_blank" >江山农村商业银行</a>
<br>总编：OKJSJSF，电话618887、13645708887，微信号18057025250,审核：
<br>日期：2024年6月29日。
</body>

OKJSJSF · 发表于 2024-6-29 23:52

代码下半部份
<script type="text/javascript">
function g1(id){
return document.getElementById(id);
}
function getsum(){
if(g1("input1").value==""){g1("input1").focus();alert("农户人口数不能空！可以 0");return;}
var inp1=parseInt(g1("input1").value);
if(g1("input2").value==""){g1("input2").focus();alert("标准不能删空！");return;}
var inp2=parseInt(g1("input2").value);
g1("input3").value=(inp1*inp2);
var inp3=parseInt(g1("input3").value);
if(g1("input4").value==""){g1("input4").focus();alert("标准不能删空！");return;}
var inp4=parseInt(g1("input4").value);
if(g1("input5").value==""){g1("input5").focus();alert("标准不能删空！");return;}
var inp5=parseInt(g1("input5").value);
if(g1("input6").value==""){g1("input6").focus();alert("标准不能删空！");return;}
var inp6=parseInt(g1("input6").value);
var s1;
if(inp1==0){s1=0;}
else if(inp1==1){s1=inp4;}
else if(inp1==2){s1=inp5;}
else{s1=inp6;}
if(g1("input7").value==""){g1("input7").focus();alert("旧房建筑面积不能空！可以 0");return;}
var inp7=parseInt(g1("input7").value);
var s2=Math.max(s1,inp7);
if(g1("input8").value==""){g1("input8").focus();alert("标准不能删空！");return;}
var inp8=parseInt(g1("input8").value);
if(g1("input9").value==""){g1("input9").focus();alert("标准不能删空！");return;}
var inp9=parseInt(g1("input9").value);
if(inp7>0){
if(g1("o1").checked){
if(g1("o3").checked){g1("input10").value=(inp7*inp8);}
else if(g1("o4").checked){g1("input10").value=(inp7*inp9);}
else{g1("o3").focus();alert("有旧房且愿意搬迁城南时旧房结构二选一！");return;}
}
else if(g1("o2").checked){g1("input10").value=0;}
else{g1("o1").focus();alert("有旧房时是否愿意搬迁城南二选一！");return;}
}
else{g1("input10").value=0;g1("o1").checked=false;g1("o2").checked=false;g1("o3").checked=false;g1
("o4").checked=false;
}
var inp10=parseInt(g1("input10").value);
if(g1("input11").value==""){g1("input11").focus();alert("标准不能删空！");return;}
var inp11=parseInt(g1("input11").value);
if(g1("input12").value==""){g1("input12").focus();alert("标准不能删空！");return;}
var inp12=parseInt(g1("input12").value);
if(g1("input13").value==""){g1("input13").focus();alert("标准不能删空！");return;}
var inp13=parseInt(g1("input13").value);
if(g1("input14").value==""){g1("input14").focus();alert("计划新房建筑面积不能空！");return;}
var inp14=parseInt(g1("input14").value);
if(g1("o6").checked||g1("o7").checked){g1("input15").value=(inp3+inp10);}
else if(g1("o5").checked&&inp7>0){g1("input15").value=(inp3+inp10+s2*inp11+inp14*inp13);}
else if(g1("o5").checked&&inp7==0){g1("input15").value=(inp3+inp10+s2*inp12+inp14*inp13);}
else{g1("o5").focus();alert("计划搬迁新房户型三选一！");return;}
var inp15=parseInt(g1("input15").value);
var inp16=parseInt(g1("input16").value);
if(g1("input17").value==""){g1("input17").focus();alert("标准不能删空！");return;}
var inp17=parseInt(g1("input17").value);
if(g1("input18").value==""){g1("input18").focus();alert("标准不能删空！");return;}
var inp18=parseInt(g1("input18").value);

if(g1("o5").checked){g1("input19").value=(inp14*inp16);}
else if(g1("o6").checked){g1("input19").value=(inp14*inp17);}
else if(g1("o7").checked){g1("input19").value=(inp14*inp18);}
var inp19=parseInt(g1("input19").value);
g1("input20").value=(inp19-inp15);
var inp20=parseInt(g1("input20").value);
if(isNaN(inp20)){alert("商品房单价无数据，新房总价与资金缺口无法计算！");}
}

function reset(){
g1("input1").value="";
g1("input2").value=30;
g1("input3").value="＝?";
g1("input4").value=60;
g1("input5").value=100;
g1("input6").value=140;
g1("input7").value="";
g1("input8").value=200;
g1("input9").value=300;
g1("input10").value="＝?";
g1("input11").value=3500;
g1("input12").value=2900;
g1("input13").value=2000;
g1("input14").value="";
g1("input15").value="＝?";
g1("input16").value="";
g1("input17").value=5600;
g1("input18").value=5500;
g1("input19").value="＝?";
g1("input20").value="＝?";
g1("o1").checked=false;
g1("o2").checked=false;
g1("o3").checked=false;
g1("o4").checked=false;
g1("o5").checked=false;
g1("o6").checked=false;
g1("o7").checked=false;
}

function zjrcu(){
alert("让我们做得更好！");
}
</script>
</html>

zpy2 · 发表于 2024-6-30 16:27

OKJSJSF 发表于 2024-6-22 10:28

value=计算＝

这种提示一般用 placeholder 这个标签比较多

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder

zpy2 · 发表于 2024-6-30 16:30

OKJSJSF 发表于 2024-6-29 23:52
代码下半部份

function g1(id){

function g1(id){
return document.getElementById(id);
}

这个感觉没必要，id直接使用应该可以的

zpy2 · 发表于 2024-6-30 16:33

zpy2 发表于 2024-6-30 16:30
function g1(id){
return document.getElementById(id);
...

<input type="text" id="input7" class="style1" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))
execCommand('undo')">

输入整数

用type=number也可以，手机端直接调出数字键盘比较方便输入

OKJSJSF · 发表于 2024-7-1 16:13

zpy2 发表于 2024-6-30 16:30
function g1(id){
return document.getElementById(id);
...

直接使用ID名称吗？这个是我抄袭的方法，少写了十几个字符。还有，类与样式的运用比较混乱需要找资料学习改进一下。div与span还不知道是什么意思，块与节也不懂。谢谢老师耐心指导。网页还是很好玩的东西。

OKJSJSF · 发表于 2024-7-1 16:34

我想，应该为网页预先设置一些样式，比如普通文本、特别标注的文本、不同的输入框、按钮等等，以便不要在每行代码中重复写相同的设置。

zpy2 · 发表于 2024-7-1 18:35

OKJSJSF 发表于 2024-7-1 16:34
我想，应该为网页预先设置一些样式，比如普通文本、特别标注的文本、不同的输入框、按钮等等，以便不要在每 ...

导入单独的css文件是可以的

OKJSJSF · 发表于 2024-7-3 06:56

逐步改进
<html>
<head>
<meta charset="utf-8">
<h1>村乡“大搬快聚”补贴计算器</h1>
</head>
<style type="text/css">
.style1 {font-size: x-large;line-height: 150%;}
.style2 {background-color: #FFFF00;}
input[type="text"]{width:180px;font-size: x-large;text-align: center;border-radius:5px;}
input[type="button"]{font-size: x-large;line-height: 150%;font-weight: bold;border-radius:10px;}
table {width: 25%;font-size: x-large;text-align: center;border-collapse: collapse;}
table td{border:solid 1px;padding:1px;}
</style>

<body>
<p class="style1">单位：元、平方米
<br>请在下面空框中录入数据及选择项目后点击“计算”：
<br><span style="background-color: #FFFF00;">1、</span>农户人口数？
<input type="text" id="input1" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" title="农户人口数：0或自然数">

<br><class="style1">2、人均补贴标准：
<input type="text" id="input2" value=50000>

<br><class="style1">3、按农户人口补贴金额：
<input type="text" id="input3" value=＝？>

<br><class="style1">4、按农户人口可审批安置面积标准：
<br><table>
<tr><td>人口数</td><td>可安置面积</td></tr>
<tr><td>1</td><td><input type="text" id="input4" value=60></td></tr>
<tr><td>2</td><td><input type="text" id="input5" value=100></td></tr>
<tr><td>3及以上</td><td><input type="text" id="input6" value=140></td></tr>
</table>

<br><class="style1"><span class="style1" style="background-color: #FFFF00" >5、</span>旧房建筑面积？
<input type="text" id="input7" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" title="旧屋建筑面积：0或自然数">

<br><class="style1"><span class="style1" style="background-color: #FFFF00" >6、</span>是否愿意搬迁至城南？
<input type="radio" name="group1" id=o1 value=1>是
   <input type="radio" name="group1" id=o2 value=2>否

<br><class="style1"><span class="style1" style="background-color: #FFFF00" >7、</span>旧房结构类型？
<input type="radio" name="group2" id=o3 value=1>泥木
   <input type="radio" name="group2" id=o4 value=2>砖混

<br><class="style1">8、旧房拆除补贴标准：
<br><table>
<tr><td>房屋结构</td><td>补贴单价</td></tr>
<tr><td>泥木</td><td><input type="text" id="input8" value=200></td></tr>
<tr><td class="style2">砖混</td><td> <input type="text" id="input9" value=300></td></tr>
</table>

<br><class="style1">9、旧房拆除可补贴金额：
<input type="text" id="input10" value=＝？>

<br><class="style1">10、有房户购商品房按面积补贴标准：
<input type="text" id="input11" value=3500>

<br><class="style1">11、无房户购商品房按面积补贴标准：
<input type="text" id="input12" value=2900>

<br><class="style1">12、按商品房实际建筑面积再补贴标准：
<input type="text" id="input13" value=2000>

<br><class="style1"><span class="style1" style="background-color: #FFFF00" >13、</span>计划新房建筑面积？
<input type="text" id="input14" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" title="新房建筑面积：0或自然数">

<br><class="style1"><span class="style1" style="background-color: #FFFF00" >14、</span>新房户型选择？
<input type="radio" name="group3" id=o5 value=1>商品房
   <input type="radio" name="group3" id=o6 value=2>安置房
   <input type="radio" name="group3" id=o7 value=3>大搬快聚房

<br>15、<strong>补贴合计：</strong>
<input type="text" id="input15" value=＝？ style="font-weight: bold;">

<br><class="style1"><span class="style1" style="background-color: #FFFF00" >16、</span>意向商品房单价？
<input type="text" id="input16" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

<br><class="style1">17、意向安置房单价：
<input type="text" id="input17" value=5600>

<br><class="style1">18、意向大搬快聚房单价：
<input type="text" id="input18" value=5500>

<br><class="style1">19、意向新房总价：
<input type="text" id="input19" value=＝？>

<br><class="style1">20、资金缺口（房价-补贴=）：
<input type="text" id="input20" value=＝？>

<p><input type="button" value=计算＝ onclick="getsum()">
   <input type="button" value="重置" onclick="reset()">
   <input type="button" value="按揭计算器" onclick="zjrcu()">

<br><p class="style1">友情链接：<a href="http://www.jiangshan.gov.cn/col/col1229335337/index.html",target="_blank" >江山市人民政府网</a>  <a href="https://www.zj96596.com/zj96596/gywm/index.shtml",target="_blank" >江山农村商业银行网</a>
<br>编辑：OKJSJSF，电话618887、13645708887，微信号18057025250,审核：
<br>日期：2024年6月29日。
</body>

<script type="text/javascript">
function g1(id){
return document.getElementById(id);
}
function getsum(){
if(g1("input1").value==""){g1("input1").focus();alert("农户人口数不能空！可以 0");return;}
var inp1=parseInt(g1("input1").value);
if(g1("input2").value==""){g1("input2").focus();alert("标准不能删空！");return;}
var inp2=parseInt(g1("input2").value);
g1("input3").value=(inp1*inp2);
var inp3=parseInt(g1("input3").value);
if(g1("input4").value==""){g1("input4").focus();alert("标准不能删空！");return;}
var inp4=parseInt(g1("input4").value);
if(g1("input5").value==""){g1("input5").focus();alert("标准不能删空！");return;}
var inp5=parseInt(g1("input5").value);
if(g1("input6").value==""){g1("input6").focus();alert("标准不能删空！");return;}
var inp6=parseInt(g1("input6").value);
var s1;
if(inp1==0){s1=0;}
else if(inp1==1){s1=inp4;}
else if(inp1==2){s1=inp5;}
else{s1=inp6;}
if(g1("input7").value==""){g1("input7").focus();alert("旧房建筑面积不能空！可以 0");return;}
var inp7=parseInt(g1("input7").value);
var s2=Math.max(s1,inp7);
if(g1("input8").value==""){g1("input8").focus();alert("标准不能删空！");return;}
var inp8=parseInt(g1("input8").value);
if(g1("input9").value==""){g1("input9").focus();alert("标准不能删空！");return;}
var inp9=parseInt(g1("input9").value);
if(inp7>0){
if(g1("o1").checked){
if(g1("o3").checked){g1("input10").value=(inp7*inp8);}
else if(g1("o4").checked){g1("input10").value=(inp7*inp9);}
else{g1("o3").focus();alert("有旧房且愿意搬迁城南时旧房结构二选一！");return;}
}
else if(g1("o2").checked){g1("input10").value=0;}
else{g1("o1").focus();alert("有旧房时是否愿意搬迁城南二选一！");return;}
}
else{g1("input10").value=0;g1("o1").checked=false;g1("o2").checked=false;g1("o3").checked=false;g1
("o4").checked=false;
}
var inp10=parseInt(g1("input10").value);
if(g1("input11").value==""){g1("input11").focus();alert("标准不能删空！");return;}
var inp11=parseInt(g1("input11").value);
if(g1("input12").value==""){g1("input12").focus();alert("标准不能删空！");return;}
var inp12=parseInt(g1("input12").value);
if(g1("input13").value==""){g1("input13").focus();alert("标准不能删空！");return;}
var inp13=parseInt(g1("input13").value);
if(g1("input14").value==""){g1("input14").focus();alert("计划新房建筑面积不能空！");return;}
var inp14=parseInt(g1("input14").value);
if(g1("o6").checked||g1("o7").checked){g1("input15").value=(inp3+inp10);}
else if(g1("o5").checked&&inp7>0){g1("input15").value=(inp3+inp10+s2*inp11+inp14*inp13);}
else if(g1("o5").checked&&inp7==0){g1("input15").value=(inp3+inp10+s2*inp12+inp14*inp13);}
else{g1("o5").focus();alert("计划搬迁新房户型三选一！");return;}
var inp15=parseInt(g1("input15").value);
var inp16=parseInt(g1("input16").value);
if(g1("input17").value==""){g1("input17").focus();alert("标准不能删空！");return;}
var inp17=parseInt(g1("input17").value);
if(g1("input18").value==""){g1("input18").focus();alert("标准不能删空！");return;}
var inp18=parseInt(g1("input18").value);

if(g1("o5").checked){g1("input19").value=(inp14*inp16);}
else if(g1("o6").checked){g1("input19").value=(inp14*inp17);}
else if(g1("o7").checked){g1("input19").value=(inp14*inp18);}
var inp19=parseInt(g1("input19").value);
g1("input20").value=(inp19-inp15);
var inp20=parseInt(g1("input20").value);
if(isNaN(inp20)){alert("商品房单价无数据，新房总价与资金缺口无法计算！");}
}

function reset(){
g1("input1").value="";
g1("input2").value=30;
g1("input3").value="＝?";
g1("input4").value=60;
g1("input5").value=100;
g1("input6").value=140;
g1("input7").value="";
g1("input8").value=200;
g1("input9").value=300;
g1("input10").value="＝?";
g1("input11").value=3500;
g1("input12").value=2900;
g1("input13").value=2000;
g1("input14").value="";
g1("input15").value="＝?";
g1("input16").value="";
g1("input17").value=5600;
g1("input18").value=5500;
g1("input19").value="＝?";
g1("input20").value="＝?";
g1("o1").checked=false;
g1("o2").checked=false;
g1("o3").checked=false;
g1("o4").checked=false;
g1("o5").checked=false;
g1("o6").checked=false;
g1("o7").checked=false;
}

function zjrcu(){
alert("让我们做得更好！");
}
</script>
</html>

		自动登录	找回密码
密码			免费注册

[求助] HTML文档的计算问题