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 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
JQuery性能优化的几点建议
May 14 Javascript
浅谈js中变量初始化
Feb 03 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
JS实现键值对遍历json数组功能示例
May 30 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
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
Python运行的17个时新手常见错误小结
2012/08/07 Python
python 远程统计文件代码分享
2015/05/14 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Python补齐字符串长度的实例
2018/11/15 Python
python实现的分层随机抽样案例
2020/02/25 Python
python中元组的用法整理
2020/06/15 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
Python如何定义一个函数
2015/09/01 面试题
外贸业务员工作职责
2014/01/06 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers