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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
JavaScript实现移动端轮播效果
Jun 06 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
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常用文件操作函数和简单实例分析
2016/06/03 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python打印斐波拉契数列实例
2015/07/07 Python
简单易懂的python环境安装教程
2017/07/13 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
商业活动邀请函
2014/02/04 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
三八节主持词
2014/03/17 职场文书
环保专项行动方案
2014/05/12 职场文书
大学生毕业求职信
2014/06/12 职场文书
卫生主题班会
2015/08/14 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Nginx配置之禁止指定IP访问
2022/05/02 Servers