JavaScript实现简单计算器功能


Posted in Javascript onDecember 19, 2019

本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下

1.实现基本计算器功能,如图

JavaScript实现简单计算器功能

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>

关于计算器的精彩文章请查看《计算器专题》 ,更多精彩等你来发现!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取多个tagname的节点数组
Sep 22 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 #Javascript
js通过循环多张图片实现动画效果
Dec 19 #Javascript
JS实现水平移动与垂直移动动画
Dec 19 #Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 #Javascript
d3.js实现图形拖拽
Dec 19 #Javascript
d3.js实现图形缩放平移
Dec 19 #Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 #Javascript
You might like
一个简洁的多级别论坛
2006/10/09 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
Three.js基础学习教程
2017/11/16 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python之wxPython菜单使用详解
2014/09/28 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
无故旷工检讨书
2014/01/26 职场文书
《匆匆》教学反思
2014/02/22 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
大学生毕业求职信
2014/06/12 职场文书
争先创优个人总结
2015/03/04 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server