HTML文档的计算问题

OKJSJSF · 发表于 2024-7-3 16:33

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

问下老师，直接用ID可以计算，但加号+变成连字符不能加了。
<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-width: 1px;border-radius:5px;}
input[type="radio"]{width:20px;height: 20px}
input[type="button"]{font-size: x-large;line-height: 150%;font-weight: bold;border-radius:10px;}
table {width: 30%;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>

<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>砖混</td><td> <input type="text" id="input9" value=300></td></tr>
</table>

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

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

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

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

OKJSJSF · 发表于 2024-7-3 20:19

OKJSJSF 发表于 2024-7-3 16:33
问下老师，直接用ID可以计算，但加号+变成连字符不能加了。

用Office的办法“文本乘以1转换为数值”，问题解决，正常计算了。

OKJSJSF · 发表于 2024-7-3 23:05

重置输入框数据的代码改为如下：
function reset(){
arr=["",50000,"＝?",60,100,140,"",false,false,false,false,200,300,"＝?",3500,2900,2000,"",false,false,false,"＝?","",5600,5500,"＝?","＝?"]
var ra =document.getElementsByTagName("input");
for(var i=0;i<ra.length && ra[i];i++){
if(ra[i].type!="button"){
if(ra[i].type=="text"){ra[i].value=arr[i];}
else if(ra[i].type=="radio"){ra[i].checked=arr[i];}
}
}
}

OKJSJSF · 发表于 2024-7-21 18:14

继续改进中。

zpy2 · 发表于 2024-7-22 14:33

OKJSJSF 发表于 2024-7-3 23:05
重置输入框数据的代码改为如下：
function reset(){
arr=["",50000,"＝?",60,100,140,"",false,fals ...

<form>
<input

....
   <button type="reset">"重置"</button>

</form>

直接type=reset,不需要js重新赋值。

summary里一般不用a 标签，点击文字才能展开

zpy2 · 发表于 2024-7-22 14:36

zpy2 发表于 2024-7-22 14:33

input1
最好用 inputRuralPopulation
英文驼峰命名方式，方便后期维护。

如果经常维护，可以使用git版本控制

zpy2 · 发表于 2024-7-22 14:42

zpy2 发表于 2024-7-22 14:36
input1
最好用 inputRuralPopulation
英文驼峰命名方式，方便后期维护。

OKJSJSF · 发表于 2024-7-23 08:16

zpy2 发表于 2024-7-22 14:42
适配手机

字体大小可以使用rem

早上刚看到老师的贴子，学生会逐一改进。原来重置功能是这么简单，部份改为表单元素！
今天我先改一部份，输入框中的自动计算功能的使用，不需点击计算按钮，一个框中录入数据，另一个框自动产生运算后的数据并锁定，比如其中的按揭金额的首付比例与可按揭比例之间，和总是100%。同时这种向公众免费官宣的计算器，我应当在前面声明：计算结果仅供参考，请以当地实际为准！

OKJSJSF · 发表于 2024-7-23 08:23

网页还真是好玩，计算功能放在网页中，不需要下载Office之类，通过微信传输后，用QQ浏览器即可打开使用，太方便！现在年纪不太老的大家都有智能机都有微信。

OKJSJSF · 发表于 2024-7-23 08:32

zpy2 发表于 2024-7-22 14:33

学生这里把一与二当作折叠与展开的标题用，但又不能用标题标签元素H2等，用了后，折叠与展开按钮会跑到另一行，占用空间。现在我还不会把跳转到一与跳转到二放在“标题”一与二的末尾，这又占用了空间。

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

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