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 相关文章推荐
Javascript Math对象
Aug 13 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
解决vue中provide inject的响应式监听
Apr 19 Vue.js
微信小程序跨页面数据传递事件响应实现过程解析
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
无线电的诞生过程
2021/03/01 无线电
PHP关联链接常用代码
2012/11/05 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
Python实现简易端口扫描器代码实例
2017/03/15 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python 中如何获取列表的索引
2019/07/02 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
安全生产月演讲稿
2014/05/09 职场文书
大学生助学金感谢信
2015/01/21 职场文书
2016新年感言
2015/08/03 职场文书
600字作文之感受大自然
2019/11/27 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android