JS计算器（自制）
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<script src="jquery-1.9.1.min.js"></script>
<style>
button{
width:40px;
background-color:#2B91D5;
color:white;
}
input[type='text']{
width:98%;
}
</style>
</header>
<body onload="fun()">
<table border="1px">
<tr>
<td colspan="5"><input type="text" id="a" style="text-align:right;"></td>
</tr>
<tr>
<td><button class="num">9</button></td>
<td><button class="num">8</button></td>
<td><button class="num">7</button></td>
<td><button id="add">+</button></td>
<td><button id="c">C</button></td>
</tr>
<tr>
<td><button class="num">6</button></td>
<td><button class="num">5</button></td>
<td><button class="num">4</button></td>
<td><button id="j">-</button></td>
<td><button id="per">%</button></td>
</tr>
<tr>
<td><button class="num">1</button></td>
<td><button class="num">2</button></td>
<td><button class="num">3</button></td>
<td><button id="che">*</button></td>
<td><button id="d">=</button></td>
</tr>
<tr>
<td><button class="num">0</button></td>
<td><button class="bai">00</button></td>
<td><button class="dian">.</button></td>
<td><button id="chu">/</button></td>
<td><button id="wen">?</button></td>
</tr>
</table>
<div style="margin-left:20px;">
<input type="hidden" id="fh">
<input type="hidden" id="yl"><!--计算预留 -->
</div>
</body>
</html>
<script>
function fun(){
$("#a").val(0);
}
var a = $("#a").val();
var fh = $("#fh").val();
var yl = $("#yl").val();
$("#c").click(function(){
$("#a").val(0);
$("#yl").val("");
$("#fh").val("");
})
$(".num").click(function(){
var a = $("#a").val();
var fh = $("#fh").val();
var yl = $("#yl").val();
if(fh !== "" && a !== "" && yl !== ""){
num = this.innerHTML;
$("#a").val(a+num);
}else if(fh !== "" && yl == ""){
$("#yl").val($("#a").val());
$("#a").val(this.innerHTML);
}else{
num = this.innerHTML;
if($("#a").val()==0){
$("#a").val(num);
}else{
var a = $("#a").val();
$("#a").val(a+num);
}
}
})
$("#add").click(function(){
var a = $("#a").val();
$("#fh").val("+")
})
$("#j").click(function(){
var a = $("#a").val();
$("#fh").val("-")
})
$("#che").click(function(){
var a = $("#a").val();
$("#fh").val("*")
})
$("#chu").click(function(){
var a = $("#a").val();
$("#fh").val("/")
})
$("#d").click(function(){
var a = $("#a").val();
var fh = $("#fh").val();
var yl = $("#yl").val();
if(fh == "+"){
$("#a").val(Number(yl)+Number(a));
}else if(fh == "-"){
$("#a").val(Number(yl)-Number(a));
}
else if(fh == "*"){
$("#a").val(Number(yl)*Number(a));
}
else if(fh == "/"){
$("#a").val(Number(yl)/Number(a));
}
})
$(".bai").click(function fun(){
var a = $("#a").val();
$("#a").val(a+"00");
})
$(".dian").click(function fun(){
var a = $("#a").val();
$("#a").val(a+".");
})
$("#per").click(function fun(){
var a = $("#a").val();
$("#a").val(Number(a)/100);
})
$("#wen").click(function fun(){
alert("这个按钮也许没什么用？也许吧")
})
</script>
JS计算器（自制）的更多相关文章
- 早期练手：功能相对比较完善的 js 计算器
第一次发博客,就先发一个自己早期,刚开始学前端时,用js写的一个计算器吧,计算功能比较少,只有 + - * / ,不过其他功能还是比较完善的,比如: 输出结果后,连续按"=",可以 ...
- js计算器案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- js计算器---转
至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...
- 简易js计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. <!DOCTYPE html> <html> <head> ...
- js计算器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js 计算器转摘
转自:https://mp.weixin.qq.com/s/Jxe3V7D0PFLvIFNZPlSyNg <table> <tr> <td colspan="4 ...
- 基于js白色简洁样式计算器
今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载.适用浏览器:360.FireFox.Chrome.Safari.Op ...
- 纯JS实现房贷利率报表对比
最近朋友买房,想计算下自己的房贷的还款情况,自己正好周末没事,从网上找来点代码修改,也算是对自己技术的巩固吧. 目前这个还只是个初级版本,暂时可以在PC上正常访问,将来会一步一步的把相继功能都加上的, ...
- windows10风格 springboot vue.js html 跨域 前后分离 activiti 整合项目框架源码
官网:www.fhadmin.org 此项目为Springboot工作流版本 windows 风格,浏览器访问操作使用,非桌面应用程序. 1.代码生成器: [正反双向](单表.主表.明细表.树形表,快 ...
随机推荐
- c/c++面试指导---c语言基础算法总结1
c语言基础算法总结 1 初学者学习任何一门编程语言都必须要明确,重点是学习编程方法和编程思路,不是学习语法规则,语法规则是为编程实现提供服务和支持.所以只要认真的掌握了c语言编程方法,在学习其它的语 ...
- django+xadmin在线教育平台（九）
django admin介绍 上一章我们进行了需求分析和数据库设计.本章我们来快速搭建一个可用的后台管理系统. 后台管理系统特点: 权限管理 少前端样式.(样式一般不是很看重), 快速开发 djang ...
- python--re(匹配字符串)
\d 匹配任何十进制数:它相当于类 [0-9]. \D 匹配任何非数字字符:它相当于类 [^0-9]. \s 匹配任何空白字符:它相当于类 [ fv]. \S 匹配任何非空白字符:它相当于类 [^ f ...
- C语言实例解析精粹学习笔记——26
实例26:阿拉伯数字转换为罗马数字,将一个整数n(1~9999)转换为罗马数字,其中数字和罗马数字的对应关系如下: 原书中的开发环境很老,我也没有花心思去研究.自己在codeblocks中进行开发的, ...
- Android面试收集录12 View测量、布局及绘制原理
一.View绘制的流程框架 View的绘制是从上往下一层层迭代下来的.DecorView-->ViewGroup(--->ViewGroup)-->View ,按照这个流程从上往下, ...
- html---Web Storage存储
在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端保存如用户名等简单用户信息,但通过长期使用 ...
- 2599: [IOI2011]Race
2599: [IOI2011]Race 链接 分析 被memset卡... 点分治,对于重心,遍历子树,记录一个数组T[i],表示以重心为起点的长度为i的路径中最少的边数是多少.然后先遍历子树,更新答 ...
- 二分查找问题(Java版)
二分查找问题(Java版) 1.一般实现 package search; /** * @author lei 2011-8-17 */ public class BinarySearch ...
- 做出一个SwitchButton的效果，并详细学习一下onDraw(Canvas canvas)方法的使用
代码的灵感和原理主要来自于android自定义开关控件-SlideSwitch http://blog.csdn.net/singwhatiwanna/article/details/9254309这 ...
- 用@property声明的NSString（或NSArray，NSDictionary）经常使用copy关键字，为什么？如果改用strong关键字，可能造成什么问题？
因为父类指针可以指向子类对象,使用 copy 的目的是为了让本对象的属性不受外界影响,使用 copy 无论给我传入是一个可变对象还是不可对象,我本身持有的就是一个不可变的副本. 如果我们使用是 str ...