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 相关文章推荐
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
js实现自定义进度条效果
Mar 15 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
php缓存技术介绍
2006/11/25 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php实现的递归提成方案实例
2015/11/14 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
PHP时间类完整代码实例
2021/02/26 PHP
jquery 插件学习(三)
2012/08/06 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
使用Python写CUDA程序的方法
2017/03/27 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
行政管理人员精品工作推荐信
2013/11/04 职场文书
模具数控专业自荐信
2014/01/27 职场文书
捐款倡议书范文
2014/02/02 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
募捐感谢信
2015/01/22 职场文书
酒店前台辞职书
2015/02/26 职场文书
雷锋观后感
2015/06/10 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android