Loading... ## 其它 webstorm 1. 计算利息小数多 计算机算是2进制,我们填10进制;2转10会有误差 2. 无反应 用控制台看有无报错,无报错则一行行查 3. 不输也能算 用JS做表单验证 --- ## JS表单验证 正则表达式,JS函数,DOM --- <div class="tip inlineBlock success"> 第一个实战的代码示例: </div> <div class="tip inlineBlock warning"> 这是head区的: </div> ```html <head> <meta charset="UTF-8"> <title>个人存款计算软件界面</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> //定义一个函数,完成计算 function jisuan(){ //1.获取文本框输入的数字 var cunkun = document.getElementById("shuru").value; //表单验证是否为数字 //定义一个正则表达式[规则表达式],假设要求钱6位数字 var regExp=/^[0-9]{2,6}$/;//最多6位,最少2位 if (!regExp.test(cunkun)) { //到此说明不合法 document.getElementById("shuru").value="输入不合法,必须为2-6位数字"; document.getElementById("shuru").style="color: red"; return; } //上方取得值为:"数字" //"数字"-->数字 var cunkunnum=parseInt(cunkun);//字符串转为整数 //2.开始计算 //取得存款年限 var lilv=document.getElementById("year").value; //3.判断并求利息 if(lilv=="0.0175") {var lixi=cunkunnum*lilv*1} else if(lilv=="0.0225") {var lixi=cunkunnum*lilv*2} else if(lilv=="0.02753") {var lixi=cunkunnum*0.0275*3} else if(lilv=="0.02755") {var lixi=cunkunnum*0.0275*5} var benxi=lixi+cunkunnum//本息合计 //3.把结构写入相应文本框 document.getElementById("lixi").value=lixi; document.getElementById("total").value=benxi; } function clearCon(){ //清空内容 document.getElementById("shuru").value=''; document.getElementById("shuru").style="color: black"; } </script> </head> ``` <div class="tip inlineBlock warning"> 这是body区的: </div> ```html <body> <div class="container text-center"> <h1>个人存款计算</h1> <table class="table table-bordered text-center"> <tr class="bg-primary"> <td colspan="2">个人存款计算器</td> </tr> <tr> <td>存款金额</td> <td> <input onfocus="clearCon()" class="form-control" type="text" id="shuru" placeholder="请输入存款金额"/> </td> </tr> <tr> <td>存款年限</td> <td> <select id="year" class="form-control"/> <option value="0.0175">1年(1.75%)</option> <option value="0.0225">2年(2.25%)</option> <option value="0.02753">3年(2.75%)</option> <option value="0.02755">5年(2.75%)</option> </select> </td> </tr> <tr> <td>所得利息</td> <td> <input class="form-control" type="text" id="lixi" readonly="readonly" /> </td> </tr> <tr> <td>本息合计</td> <td> <input class="form-control" type="text" id="total" readonly="readonly" /> </td> </tr> <tr> <td colspan="2"> <button onclick="jisuan()" class="btn-primary btn-block">计算</button> </td> </tr> </table> 开发者信息: 小草林 </div> </body> ``` --- <div class="tip inlineBlock success"> 第二个实战的代码示例: </div> <div class="tip inlineBlock warning"> 这是head区的: </div> ```html <head> <meta charset="UTF-8"> <title>个人社保计算器</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> function jisuan(){ //1.获得工资,表单验证看输入是否合法 var sal=document.getElementById("salary").value;//取得工资 //表单验证是否合法 var regExp=/^[0-9]{4,5}$/;//最多5位,最少4位 if (!regExp.test(sal)) { //到此说明不合法 document.getElementById("salary").value="输入不合法,必须为4-5位数字"; document.getElementById("salary").style="color: red"; return; } //2.输入合法,开始算 var salnum=parseInt(sal);//字符串转为数字 var ylgr=salnum*0.08;//个人交养老保险 var ylgs=salnum*0.2;//公司交养老保险 var ybgr=salnum*0.02; var ybgs=salnum*0.06; var sygr=salnum*0.005; var sygs=salnum*0.015; var gsgs=salnum*0.005; var syugs=salnum*0.008; var gjjgr=salnum*0.12; var gjjgs=salnum*0.12; var hjgr=ylgr+ybgr+sygr+gjjgr; var hjgs=ylgs+ybgs+sygs+gsgs+syugs+gjjgs; var total=hjgs+salnum; //3.把计算结果放入单元格 document.getElementById("ylgr").innerHTML=ylgr; document.getElementById("ylgs").innerText=ylgs; document.getElementById("ybgr").innerHTML=ybgr; document.getElementById("ybgs").innerText=ybgs; document.getElementById("sygr").innerHTML=sygr; document.getElementById("sygs").innerText=sygs; document.getElementById("gsgs").innerHTML=gsgs; document.getElementById("syugs").innerText=syugs; document.getElementById("gjjgr").innerHTML=gjjgr; document.getElementById("gjjgs").innerText=gjjgs; document.getElementById("hjgr").innerHTML=hjgr; document.getElementById("hjgs").innerText=hjgs; document.getElementById("total").innerText=total; } function clearCon(){ //清空内容 document.getElementById("salary").value=''; document.getElementById("salary").style="color: black"; } </script> </head> ``` <div class="tip inlineBlock warning"> 这是body区的: </div> ```html <body> <div class="container text-center"> <img src="//www.xuegao-tzx.top/usr/uploads/auto_save_image/d20ca8cb6a76b1c2b3187edf0c691d1e.jpg" class="img-circle" width="100px"> <table class="table table-bordered text-center"> <tr> <td >工资</td> <td colspan="3"> <input onfocus="clearCon()" type="text" id="salary" placeholder="请输入工资" class="form-control"> </td> <td> <button onclick="jisuan()" class="btn btn-block btn-danger" id="jisu">计算</button> </td> </tr> <tr class="bg-primary"> <td>险种</td> <td>个人%</td> <td>个人</td> <td>公司%</td> <td>公司</td> </tr> <tr> <td>养老</td> <td>8%</td> <td id="ylgr"></td> <td>20%</td> <td id="ylgs"></td> </tr> <tr> <td>医疗</td> <td>2%</td> <td id="ybgr"></td> <td>6%</td> <td id="ybgs"></td> </tr> <tr> <td>失业</td> <td>0.5%</td> <td id="sygr"></td> <td>1.5%</td> <td id="sygs"></td> </tr> <tr> <td>工商</td> <td></td> <td></td> <td>0.5%</td> <td id="gsgs"></td> </tr> <tr> <td>生育</td> <td></td> <td></td> <td>0.8%</td> <td id="syugs"></td> </tr> <tr> <td>公积金</td> <td>12%</td> <td id="gjjgr"></td> <td>12%</td> <td id="gjjgs"></td> </tr> <tr> <td>合计</td> <td>个人合计</td> <td id="hjgr"></td> <td>公司合计</td> <td id="hjgs"></td> </tr> <tr> <td>总额</td> <td id="total" colspan="4"></td> </tr> </table> 开发者信息: 小草林 </div> </body> ``` 最后修改:2021 年 07 月 24 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏,谢谢
3 条评论
加油
谢谢
好