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 相关文章推荐
GreyBox技术总结(转)
Nov 23 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
js生成随机数方法和实例
Jan 17 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
JavaScript高级程序设计之基本引用类型
Nov 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之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python translator使用实例
2008/09/06 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
列车长先进事迹材料
2014/01/25 职场文书
医院保洁服务方案
2014/06/11 职场文书
文案策划专业自荐信
2014/07/07 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
js不常见操作运算符总结
2021/11/20 Javascript