JavaScript实现简单计算器功能
来源:本站原创|时间:2022-11-25|栏目:JavaScript|
本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下
1.实现基本计算器功能,如图
2.逻辑代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <!--设置样式--> <style> .showdiv{ text-align: center; margin:auto;/*设置居中*/ border: solid 1px; width: 400px; height: 500px; border-radius: 10px;/*设置边框角度*/ } input[type="text"]{ margin-top: 10px; width: 380px; height: 40px; font-size: 40px; } input[type="button"]{ margin: 10px; margin-top: 20px; width: 60px; height: 80px; font-size: 40px; font-weight: bold; } </style> <!--设置js代码--> <script type="text/javascript"> /*将按钮的值赋值给输入框*/ function num(btn){ //把不能为零去掉 if(document.getElementById("inp").value.match("除数")){ document.getElementById("inp").value = ""; } //获取button按钮的value var num = btn.value; console.log(num +" " +typeof(num)) //将值赋值给text文本框 switch(num){ case "c": document.getElementById("inp").value = ""; break; case "=": if(document.getElementById("inp").value.match("/")){ if(document.getElementById("inp").value.split("/")[1] == "0"){ document.getElementById("inp").value = "除数不能为零"; }else{ document.getElementById("inp").value = eval(document.getElementById("inp").value); } break; }else{ document.getElementById("inp").value = eval(document.getElementById("inp").value); break; } default: document.getElementById("inp").value = document.getElementById("inp").value+num; break; } } </script> </head> <body> <div class = "showdiv"> <input type="text" name="" id="inp" value="" readonly="readonly"/><br /> <input type="button" name="" id="" value="0" onclick="num(this)"/> <input type="button" name="" id="" value="1" onclick="num(this)"/> <input type="button" name="" id="" value="2" onclick="num(this)"/> <input type="button" name="" id="" value="3" onclick="num(this)"/><br /> <input type="button" name="" id="" value="4" onclick="num(this)"/> <input type="button" name="" id="" value="5" onclick="num(this)"/> <input type="button" name="" id="" value="6" onclick="num(this)"/> <input type="button" name="" id="" value="7" onclick="num(this)"/><br /> <input type="button" name="" id="" value="8" onclick="num(this)"/> <input type="button" name="" id="" value="9" onclick="num(this)"/> <input type="button" name="" id="" value="+" onclick="num(this)"/> <input type="button" name="" id="" value="-" onclick="num(this)"/><br /> <input type="button" name="" id="" value="*" onclick="num(this)"/> <input type="button" name="" id="" value="/" onclick="num(this)"/> <input type="button" name="" id="" value="=" onclick="num(this)"/> <input type="button" name="" id="" value="c" onclick="num(this)"/> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
您可能感兴趣的文章
- 01-10Echarts实现单条折线可拖拽效果
- 01-10在Vue项目中使用Typescript的实现
- 01-10js实现上传图片并显示图片名称
- 01-10Vue中使用Lodop插件实现打印功能的简单方法
- 01-10echarts实现折线图的拖拽效果
- 01-10d3.js实现图形缩放平移
- 01-10小程序简单两栏瀑布流效果的实现
- 01-10H5实现手机拍照和选择上传功能
- 01-10Echarts实现多条折线可拖拽效果
- 01-10js通过循环多张图片实现动画效果