<!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计算器（自制）的更多相关文章

  1. 早期练手：功能相对比较完善的 js 计算器

    第一次发博客,就先发一个自己早期,刚开始学前端时,用js写的一个计算器吧,计算功能比较少,只有 + - * / ,不过其他功能还是比较完善的,比如: 输出结果后,连续按"=",可以 ...

  2. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  3. js计算器---转

    至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...

  4. 简易js计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. <!DOCTYPE html> <html> <head> ...

  5. js计算器

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. js 计算器转摘

    转自:https://mp.weixin.qq.com/s/Jxe3V7D0PFLvIFNZPlSyNg <table> <tr> <td colspan="4 ...

  7. 基于js白色简洁样式计算器

    今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载.适用浏览器:360.FireFox.Chrome.Safari.Op ...

  8. 纯JS实现房贷利率报表对比

    最近朋友买房,想计算下自己的房贷的还款情况,自己正好周末没事,从网上找来点代码修改,也算是对自己技术的巩固吧. 目前这个还只是个初级版本,暂时可以在PC上正常访问,将来会一步一步的把相继功能都加上的, ...

  9. windows10风格 springboot vue.js html 跨域 前后分离 activiti 整合项目框架源码

    官网:www.fhadmin.org 此项目为Springboot工作流版本 windows 风格,浏览器访问操作使用,非桌面应用程序. 1.代码生成器: [正反双向](单表.主表.明细表.树形表,快 ...

随机推荐

  1. WKWebView 屏蔽长按手势 - iOS

    研究半天还跟正常套路不一样,WKWebView 需要将 JS 注入进去,套路啊 ... 查半天资料,为了后者们开发可以提高效率,特此分享一下,不到的地方多多包涵哈. 废话不多说,直接上 code,将如 ...

  2. 创建自己的网站博客--Hexo

    原文地址:https://www.xingkongbj.com/blog/hexo/creat-hexo.html 安装环境 安装 node 下载对应版本并安装 node . 安装 Git Windo ...

  3. 太阳地球月亮运行动画（使用@keyframes）

    闲来无事的demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. HTML5一些标签和属性

    <bdo> 元素 可以覆盖默认文本的方向  根据dir 属性来控制文字的排序方向            属性:dir="rtl"                     ...

  5. Django 入门案例开发

    Django是一个重量级的web开发框架,它提供了很多内部已开发好的插件供我们使用:这里不去描述 Django直接进入开发过程. Django入门案例分两部分:一.开发环境的配置:二.业务需求分析. ...

  6. elasticsearch-dsl聚合-1

    接续上篇,本篇介绍elasticsearch聚合查询,使用python库elasticsearch-dsl进行聚合查询操作. 7.3.聚合查询 高阶概念 Buckets(桶/集合):满足特定条件的文档 ...

  7. JavaScript数组常用的方法

    改变原数组: ※ push,pop,shif,unshift,sort,reverse ※ splice 不改变原数组: ※ concat,join→split,toString,slice push ...

  8. 012---Django的用户认证组件

    知识预览 用户认证 回到顶部 用户认证 auth模块 ? 1 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的 ...

  9. Android 浮动按钮+上滑隐藏按钮+下滑显示按钮

    1.效果演示 1.1.关注这个红色的浮动按钮 . 可以看到,上滑的时候浮动按钮消失,因为用户迫切想知道下面的东西,而不是回到顶部. 当下滑的时候,用户想回到原来的位置,就可以点击浮动按钮,快速回到顶部 ...

  10. LinkedHashMap和HashMap的比较使用 详解

    由于现在项目中用到了LinkedHashMap,并不是太熟悉就到网上搜了一下. import java.util.HashMap; import java.util.Iterator; import ...