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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
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
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
wxPython 入门教程
2008/10/07 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
详解Python之unittest单元测试代码
2018/01/24 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
使用Python实现批量ping操作方法
2020/05/06 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
2014新年寄语
2014/01/20 职场文书
工作决心书范文
2014/03/11 职场文书
无房证明范本
2014/09/17 职场文书
体育活动总结
2015/02/04 职场文书
终止劳动合同通知书
2015/04/16 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS