JS键盘版计算器的制作方法


Posted in Javascript onDecember 03, 2016

本文实例为大家分享了js制作计算器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #show {
 width: 232px;
 height: 80px;
 color: white;
 border-radius: 5px 5px 0 0;
 background-color: rgba(127, 128, 127, 1);
 text-align: right;
 border: none;
 font-size: 45px;
 outline: none;
 }
 
 table {
 border: 1px solid black;
 border-collapse: collapse;
 width: 234px;
 text-align: center;
 font-size: 30px;
 }
 
 td {
 height: 55px;
 width: 57.5px;
 background-color: wheat;
 }
 
 td:active {
 background-color: coral;
 }
 
 .aperation {
 background-color: rgb(245, 146, 62);
 color: white;
 }
 
 #ape {
 background-color: wheat;
 color: #000000;
 }
 </style>
 </head>
 
 <body>
 <div id="">
 <input type="" id="show" />
 <table border="1">
 <tr>
  <td id="clear">AC</td>
  <td>+/-</td>
  <td class="aperation" id="ape">%</td>
  <td class="aperation">/</td>
 </tr>
 <tr>
  <td class="num">7</td>
  <td class="num">8</td>
  <td class="num">9</td>
  <td class="aperation">*</td>
 </tr>
 <tr>
  <td class="num">4</td>
  <td class="num">5</td>
  <td class="num">6</td>
  <td class="aperation">-</td>
 </tr>
 <tr>
  <td class="num">1</td>
  <td class="num">2</td>
  <td class="num">3</td>
  <td class="aperation">+</td>
 </tr>
 <tr>
  <td colspan="2" class="num">0</td>
 
  <td>.</td>
  <td class="aperation" id="result">=</td>
 </tr>
 </table>
 </div>
 </body>
 <script type="text/javascript">
 //获取数字的集合
 var nums = document.getElementsByClassName("num");
 //获取操作符的集合
 var options = document.getElementsByClassName("aperation");
 //获取等号
 var result = document.getElementById("result");
 //获取归0
 var clear = document.getElementById("clear");
 //获取展示框
 var show = document.getElementById("show");
 //声明用于保存内容的三个变量
 var numValue = ""; //存储数字
 var optionC = ""; //存储操作符
 var numTemp = ""; //存储暂存值
 
 //点击数字键时 触发事件
 for(var i = 0; i < nums.length; i++) {
 nums[i].onclick = function() {
 if(numValue == "0") {
  numValue = "";
 }
 numValue += this.innerHTML;
 show.value = numValue;
 
 }
 }
 
 //点击操作键触发事件
 for(var i = 0; i < options.length - 1; i++) {
 options[i].onclick = function() {
 //先存储之前记录的数字
 numTemp = numValue;
 //记录操作符
 optionC = this.innerHTML;
 //清除原有记录的数字
 numValue = "";
 
 }
 }
 //等号操作
 result.onclick = function() {
 show.value = eval(numTemp + optionC + numValue);
 }
//清零操作
 clear.onclick = function() {
 show.value = "0";
 numValue = "";
 optionC = "";
 numTemp = "";
 }
 </script>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
奇妙的js
Sep 24 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
前端性能优化建议
Sep 17 Javascript
js实现右键自定义菜单
Dec 03 #Javascript
js实现小窗口拖拽效果
Dec 03 #Javascript
学习vue.js计算属性
Dec 03 #Javascript
学习vue.js中class与style绑定
Dec 03 #Javascript
jQuery图片轮播实现并封装(一)
Dec 03 #Javascript
jQuery 选择符详细介绍及整理
Dec 02 #Javascript
JQuery 动态生成Table表格实例代码
Dec 02 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python的多态性实例分析
2015/07/07 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python求凸包及多边形面积教程
2020/04/12 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
html5使用canvas画一条线
2014/12/15 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
管理专员自荐信
2014/01/26 职场文书
遗嘱继承公证书
2014/04/09 职场文书
优秀班组事迹材料
2014/12/24 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python