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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php如何连接sql server
2015/10/16 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python中的列表与元组的使用
2019/08/08 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
中职生自荐信
2013/10/13 职场文书
药学专业毕业生求职信
2013/10/20 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
招商银行工作证明
2015/06/17 职场文书
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android