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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
如何实现iframe父子传参通信
Feb 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php连接数据库代码应用分析
2011/05/29 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
对Django外键关系的描述
2019/07/26 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
写给女生的道歉信
2014/01/08 职场文书
自我鉴定总结
2014/03/24 职场文书
军训口号
2014/06/13 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
行政复议决定书
2015/06/24 职场文书
php png失真的原因及解决办法
2021/11/17 PHP