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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
上一篇:Vue filter 过滤当前时间 实现实时更新效果
栏 目:JavaScript
本文标题:JavaScript实现简单计算器功能
本文地址:https://www.xiuzhanwang.com/a1/JavaScript/9454.html
您可能感兴趣的文章
- 04-02javascript潜力,javascript强大吗
- 04-02javascript点线,点线的代码
- 04-02javascript移出,js 移入移出
- 04-02javascript替换字符串,js字符串的替换
- 04-02包含javascript舍的词条
- 04-02javascript匿名,js匿名方法
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript警报,JavaScript警告
- 04-02javascript前身,javascript的前身
- 04-02javascript遮盖,JavaScript遮盖PC端页面
阅读排行
本栏相关
- 04-02javascript点线,点线的代码
- 04-02javascript潜力,javascript强大吗
- 04-02javascript替换字符串,js字符串的替换
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的词条
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警报,JavaScript警告
- 04-02javascript遮盖,JavaScript遮盖PC端页面
- 04-02javascript前身,javascript的前身
随机阅读
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-10delphi制作wav文件的方法
- 04-02jquery与jsp,用jquery
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 01-11ajax实现页面的局部加载
- 01-10SublimeText编译C开发环境设置
- 01-10C#中split用法实例总结
- 08-05DEDE织梦data目录下的sessions文件夹有什