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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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
javascript操作数组详解
2014/12/17 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
几道PHP的面试题
2012/05/19 面试题
中专生职业生涯规划书范文
2013/12/29 职场文书
学习党课思想汇报
2013/12/29 职场文书
党员的自我评价范文
2014/01/02 职场文书
美德好少年事迹材料
2014/01/19 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
项目建议书范文
2014/05/12 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
会计电算化实训报告
2014/11/04 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers