JavaScript编写简单的计算器


Posted in Javascript onNovember 25, 2015

本文实例讲述了JavaScript编写简单计算器的代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

JavaScript编写简单的计算器

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>计算器</title>
 <style>
  /*Basic reset*/
*{
 margin:0;
 padding:0;
 box-sizing: border-box;
 font: 14px Arial,sans-serif;
}
html{
 height:100%;
 background-color:lightslategrey;
}

#calculator{
 margin: 15px auto;
 width:330px;
 height:400px;
 border: 1px solid lightgray;
 background-color:darkgrey;
 padding:15px;
}

/*LOGO*/
.LOGO{
 height:20px;

}
.LOGO .name{
 float:left;
 line-height:30px;
}
.LOGO .verson{
 float:right;
 line-height:30px;
}
/*screen*/
#shuRu{
 margin-top:15px;
}
.screen{
 margin-top:5px;
 width:300px;
 height:40px;
 text-align: right;
 padding-right:10px;
 font-size:20px;
}
#keys{
 border:1px solid lightgray;
 height:223px;
 margin-top:25px;
 padding:8px;
}
#keys .last{
 margin-right:0px;
}
.footer{
 margin-top:20px;
 height:20px;
}
.footer .link{
 float:right;
}

#keys .buttons{
 float:left;
 width: 42px;
 height: 36px;
 text-align:center;
 background-color:lightgray;
 margin: 0 17px 20px 0;
}
 </style>
</head>
<body>
<div id="calculator">
 <div class="LOGO">
  <span class="name">简单的计算器</span>
  <span class="verson">@walker</span>
 </div>
 <div id="shuRu">
  <!--screen输入栏-->
  <div class="screen">
   <input type="text" id="screenName" name="screenName" class="screen">
  </div>
 </div>
 <div id="keys">
  <!-- j -->
  <!--第一排-->
  <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">
  <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">
  <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
  <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">
  <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">
  <!--第二排-->
  <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">
  <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">
  <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
  <input type="button" id="*" onclick="jsq(this.id)" value="X" class="buttons">
  <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">
  <!--第三排-->
  <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">
  <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">
  <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
  <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">
  <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">
  <!--第四排-->
  <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">
  <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">
  <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">
  <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">
  <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">
 </div>
 <div class="footer">
  <span class="aside">欢迎使用JavaScript计算器</span>
   <span class="link">
    <a href="#" title="声明" target="_blank">反馈</a>
   </span>
 </div>
</div>
</body>
</html>

js代码:

<script>
 var num = 0; // 定义第一个输入的数据
 function jsq(num) {
  //获取当前输入
  if(num=="%"){
   document.getElementById('screenName').value=Math.round(document.getElementById('screenName').value)/100;
  }else{
   document.getElementById('screenName').value += document.getElementById(num).value;
  }
 }
 function eva() {
  //计算输入结果
  document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
 }
 function clearNum() {
  //清0
  document.getElementById("screenName").value = null;
  document.getElementById("screenName").focus();
 }
 function tuiGe() {
  //退格
  var arr = document.getElementById("screenName");
  arr.value = arr.value.substring(0, arr.value.length - 1);
 }
</script>

关于计算器的精彩文章请查看《计算器专题》 ,更多精彩等你来发现!

一个简单的计算器就是这样实现的,大家也可以利用javascript编写计算器,,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
详解JavaScript执行模型
Nov 16 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 #Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 #Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 #Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 #Javascript
jquery+css实现动感的图片切换效果
Nov 25 #Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 #Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 #Javascript
You might like
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP中echo和print的区别
2014/08/28 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
Python2.x中文乱码问题解决方法
2015/06/02 Python
python psutil库安装教程
2018/03/19 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python带参数打包exe及调用方式
2019/12/21 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
西部世纪面试题
2014/12/05 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
迟到检讨书大全
2014/01/25 职场文书
九年级物理教学反思
2014/01/29 职场文书
颁奖晚会主持词
2014/03/25 职场文书
应届生面试求职信
2014/07/02 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
逃课检讨书
2015/01/26 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技