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.代码生成器: [正反双向](单表.主表.明细表.树形表,快 ...
随机推荐
- lambda函数,内置map()函数及filter()函数
8.1 lambda函数 作用及意义: 1.没必要专门定义函数,给函数起名,起到精简的效果 2.简化代码的可读性 def ds(x): return 2 * x + 1 ds(5) ---11 g ...
- SSI框架下,用jxl实现导出功能
SSI框架下,用jxl实现导出功能 先说明一下,这个是SSI框架下,前端用ExtJs,应用在一个企业级的系统中的导出功能,因为是摸索着做的,所以里面有一些代码想整理一下,如果有人看到了,请视自己的架构 ...
- spring-传统AOP
Spring传统AOP AOP的增强类型 AOP联盟定义了Advice(org.aopalliance.aop.Interface.Advice) 五类(目标类方法的连接点): 1. 前置通知(or ...
- datatables 给字段设置默认值,屏蔽没有字段的错误
我们返回的数据不能保证都是正常的,可能包含 null ,显然这个对于最终用户来说是不友好的,那么我们可以这么处理 先有如下数据格式: //示例数据 { data:[ {"id":1 ...
- JAVAOOP继承
继承:修饰符 子类 extends 父类{ //类定义部分},不可以使用private和protected修饰类 减少代码量,实现无损替换 必须符合A is a B的关系 宝马 车 狗 ...
- 用ajax获取淘宝关键字接口
可定需要查看淘宝界面的结构,按F12查看网页,此时先清除一下网页中的数据,让Network制空,随后在输入框中输入新的内容,比如钱包,数据中会出现新的数据.点击及查看蓝色方框中的内容 点击之后,你可以 ...
- tcl之控制流-break/continue
- ospf几种lsa
ospf网络类型 1.点到点 点到点网段 2.广播网络 transit网段(至少有两台路由器的广播型网段) 3.NBMA transit网段 4.点到多点 ospf网段的类型(网段的类型只与网络的类型 ...
- B-树 动机与结构
Ps.我们遵循从感性到理性的认知顺序来逐步探索B-树的奥秘,之前经常说的value这里用key(关键码)指代,因为可能存的是字符串,说是value就不合适了. (多图预警!!!建议在WI-FI下观看) ...
- Java石头剪刀布小游戏
package com.neusoft.test; import java.awt.BorderLayout; import java.awt.Choice; import java.awt.Colo ...