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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
jquery append与appendTo方法比较
May 24 jQuery
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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对XML的操作详解
2013/06/07 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
文本加密解密
2006/06/23 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
详解React服务端渲染从入门到精通
2019/03/28 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
思想汇报范文
2013/11/04 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
校园广播稿范文
2015/08/19 职场文书
高三语文教学反思
2016/02/16 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers