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 修改URL参数(实现代码)
Jul 08 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 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生成不重复标识符的方法
2014/11/21 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python装饰器decorator介绍
2014/11/21 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python挖矿算力测试程序详解
2019/07/03 Python
html5 标签
2009/07/16 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
工会主席事迹材料
2014/06/03 职场文书
个人优缺点总结
2015/02/28 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL