用javascript写计算器遇到的问题,求大神

Carlchenccc 2016-09-18 08:07:14
下面是我写的JS,主要想实现的就是一个简单的计算器,能够进行除零和余零的判断,完成以后发现一些问题:
1.涉及到小数点的时候,只能输入例如0.9、0.78等数字,不能输入9.9、8.7等小数点之前有数的数字;
2.我想实现计算完成之后重新输入数字时,之前的结果被自动重置的效果,怎么实现?
3.怎么限制+、-等运算符连续输入?

<body>
<div id="main">
<label for="res"></label><input type="text" id="res" readonly/>
<div id="button1">
<button onclick="getNum(this)">1</button>
<button onclick="getNum(this)">2</button>
<button onclick="getNum(this)">3</button>
<button onclick="getNum(this)">+</button>
<button onclick="getNum(this)">4</button>
<button onclick="getNum(this)">5</button>
<button onclick="getNum(this)">6</button>
<button onclick="getNum(this)">-</button>
<button onclick="getNum(this)">7</button>
<button onclick="getNum(this)">8</button>
<button onclick="getNum(this)">9</button>
<button onclick="getNum(this)">*</button>
<button onclick="clearRes()">C</button>
<button onclick="getNum(this)">0</button>
<button onclick="getNum(this)">.</button>
<button onclick="getNum(this)">/</button>
<button onclick="getNum(this)">(</button>
<button onclick="getNum(this)">)</button>
<button onclick="getNum(this)">%</button>
<button onclick="getRes()">=</button>
</div>
</div>
</body>
<script>
var res = document.getElementById("res");
function getNum(obj){
res.value = res.value + obj.innerHTML;
//首位清零
if(!isNaN(res.value)){
res.value=eval(res.value);
}
}
//等于功能
function getRes(){
pdkh(res.value);
res.value = eval(res.value);
}
//清零功能
function clearRes(){
res.value="";
}
//判断括号
function pdkh(str) {
var a = str;
var b = str.lastIndexOf("\(");
//b最后一个左括号位置,加1防止第一个为位置0
if (b + 1) {
var c = a.slice(b);
var d = c.indexOf("\)");
var e = c.slice(0, d + 1); //e为括号及内部内容
// 判断除号
a = a.replace(e, pdch(e));
pdch(a);
b = a.lastIndexOf("\(");
} else {
pdch(a);
}
}
function pdch(khz) {
if (khz.match(/[\/%]/)) {
var wds = khz.match(/[\/%](\d+)+/);
if (wds[1] == 0) {
alert("除数或余数不能为零");
res.value = 0;
} else {
khz = khz.replace(wds[0], "");
pdch(khz);
}
} else {
return eval(khz);
}
}
</script>
...全文
448 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
chanel_1 2016-09-19
  • 打赏
  • 举报
回复
<div id="main"> <label for="res"></label><input type="text" id="res" readonly/> <div id="button1"> <button onclick="getNum(this)">1</button> <button onclick="getNum(this)">2</button> <button onclick="getNum(this)">3</button> <button onclick="getNum(this)">+</button> <button onclick="getNum(this)">4</button> <button onclick="getNum(this)">5</button> <button onclick="getNum(this)">6</button> <button onclick="getNum(this)">-</button> <button onclick="getNum(this)">7</button> <button onclick="getNum(this)">8</button> <button onclick="getNum(this)">9</button> <button onclick="getNum(this)">*</button> <button onclick="clearRes()">C</button> <button onclick="getNum(this)">0</button> <button onclick="getNum(this)">.</button> <button onclick="getNum(this)">/</button> <button onclick="getNum(this)">(</button> <button onclick="getNum(this)">)</button> <button onclick="getNum(this)">%</button> <button onclick="getRes()">=</button> </div> </div> </body> <script> var res = document.getElementById("res"); function getNum(obj){ //计算完成之后重新输入数字时,之前的结果被自动重置的效果 var num=res.getAttribute("data-num"); switch (num){ case "=": //清0 res.value="" break; case "+":case "-":case "*":case "%": //不准连续输入运算符 if(obj.innerHTML=="+"||obj.innerHTML=="-"||obj.innerHTML=="*"||obj.innerHTML=="%"){ return false; } break; deafult: res.value=res.value; } res.value = res.value + obj.innerHTML; res.setAttribute("data-num",obj.innerHTML); //首位清零 if(res.value[0]=="0"){ res.value=eval(res.value); } } //等于功能 function getRes(){ pdkh(res.value); res.value = eval(res.value); res.setAttribute("data-num","="); } //清零功能 function clearRes(){ res.value=""; } //判断括号 function pdkh(str) { var a = str; var b = str.lastIndexOf("\("); //b最后一个左括号位置,加1防止第一个为位置0 if (b + 1) { var c = a.slice(b); var d = c.indexOf("\)"); var e = c.slice(0, d + 1); //e为括号及内部内容 // 判断除号 a = a.replace(e, pdch(e)); pdch(a); b = a.lastIndexOf("\("); } else { pdch(a); } } function pdch(khz) { if (khz.match(/[\/%]/)) { var wds = khz.match(/[\/%](\d+)+/); if (wds[1] == 0) { alert("除数或余数不能为零"); res.value = 0; } else { khz = khz.replace(wds[0], ""); pdch(khz); } } else { return eval(khz); } } </script> 水平有限,不过效果可以达到
Carlchenccc 2016-09-18
  • 打赏
  • 举报
回复
自己顶一下ha
使用 JavaScript的科学计算器(附源代码)   项目:使用 JavaScript的科学计算器(附源代码) 科学计算器是 HTML5、CSS 和 JavaScript 中的一个简单项目。该项目用于解决数字的数学计算。您可以在此项目中看到高级计算器的基本功能。此外,此计算器系统有两种模式。因此,您可以使用基本模式或高级模式。 项目制作 科学计算器项目仅使用 HTML、CSS 和 JavaScript。谈到计算器的功能,用户可以进行加、减、除、平方、开根、三角比、乘法,甚至计算任意两个数字的余数。您只需单击要参与计算的数字,然后单击带有“=”符号的按钮即可获得结果。 该项目包含大量 javascript,用于对项目的某些部分进行验证。 如何运行该项目? 要运行此项目,您不需要任何类型的本地服务器,但需要浏览器。我们建议您使用现代浏览器,如 Google Chrome 和 Mozilla Firefox  ,以获得更好的性能。要执行该项目,首先,通过单击 index.html 文件在浏览器中打开该项目。 项目演示: 该项目为国外大神项目,可以作为毕业设计的项目,也可以作为大作业项目,不用担心代码重复,设计重复等,如果需要对项目进行修改,需要具备一定基础知识。 注意:如果装有360等杀毒软件,可能会出现误报的情况,源码本身并无病毒,使用源码时可以关闭360,或者添加信任。
项目:带有源代码的JavaScript 计算器 这个 javascript 计算器项目是一个简单的 HTML5、CSS 和 JavaScript 项目。在这里,计算器的功能与现实生活中的简单计算器相同。该项目用于解决数字的数学计算。您可以在此项目中看到计算器的基本功能。 项目制作 该项目仅使用 HTML、CSS 和 JavaScript。谈到计算器的功能,用户可以对任意两个数字进行加、减、除、乘,甚至计算余数。您只需单击要参与计算的数字,然后单击带有“=”符号的按钮即可获得结果。此外,您无需按“等号”按钮即可继续计算。 该项目包含大量 javascript,用于对项目的某些部分进行验证。 如何运行该项目? 要运行此项目,您不需要任何类型的本地服务器,但需要浏览器。我们建议您使用现代浏览器,如 Google Chrome 和 Mozilla Firefox  ,以获得更好的性能。要执行该项目,首先,通过单击 index.html 文件在浏览器中打开该项目。带有源代码的 JavaScript 计算器可免费下载,仅用于教育目的。 该项目为国外大神项目,可以作为毕业设计的项目,也可以作为大作业项目,不用担心代码重复,设计重复等,如果需要对项目进行修改,需要具备一定基础知识。 注意:如果装有360等杀毒软件,可能会出现误报的情况,源码本身并无病毒,使用源码时可以关闭360,或者添加信任。

87,992

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧