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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
css图片自适应大小
2007/11/28 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python操作CouchDB的方法
2014/10/08 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
python能做哪些生活有趣的事情
2020/09/09 Python
python文件路径操作方法总结
2020/12/21 Python
举例讲解Python装饰器
2020/12/24 Python
HTML5标签大全
2016/11/23 HTML / CSS
大学生职业生涯规划书模板
2014/01/03 职场文书
研究生毕业鉴定
2014/01/29 职场文书
数字化校园建设方案
2014/05/03 职场文书
建筑工地标语
2014/06/18 职场文书
公司员工手册范本
2015/05/14 职场文书
《开国大典》教学反思
2016/02/16 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
python数字图像处理:图像简单滤波
2022/06/28 Python