使用HTML+CSS，jQuery编写的简易计算器
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>简易计算器</title>
<jsp:include page="inc/easyui.jsp"></jsp:include>
<style type="text/css">
button {
font-size: 18px;
font-weight: bold;
width: 75px;
}
</style>
<script type="text/javascript">
var yunSuan = 0;//运算符号，0-无运算;1-加法;2-减法;3-乘法;4-除法
var change = 0;//属于运算符后需要清空上一数值
var num1 = 0;//运算第一个数据
var num2 = 0;//运算第二个数据
var cunChuValue = 0;//存储的数值
$(function() {
$(".number").click(function() {//点击数字触发事件
var num = $(this).attr('name');
var oldValue = $("#jieguo").html();
if (change == 1) {
oldValue = "0";
change = 0;
}
var newValue = "";
if (num == -1) {
oldValue = parseFloat(oldValue);
newValue = oldValue * -1;
} else if (num == ".") {
if (oldValue.indexOf('.') == -1)
newValue = oldValue + ".";
else
newValue = oldValue;
} else {
if (oldValue == 0 && oldValue.indexOf('.') == -1) {
newValue = num;
} else {
newValue = oldValue + num;
}
}
$("#jieguo").html(newValue);
});
$("#qingPing").click(function() {//点击清屏触发事件
$("#jieguo").html("0");
yunSuan = 0;
change = 0;
num1 = 0;
num2 = 0;
});
$("#tuiGe").click(function() {//点击退格触发事件
if (change == 1) {
yunSuan = 0;
change = 0;
}
var value = $("#jieguo").html();
if (value.length == 1) {
$("#jieguo").html("0");
} else {
value = value.substr(0, value.length - 1);
$("#jieguo").html(value);
}
});
$(".yunSuan").click(function() {//点击运算符号触发事件
change = 1;
yuSuan = $(this).attr('name');
var value = $("#jieguo").html();
var dianIndex = value.indexOf(".");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
num1 = parseFloat(value);
});
$("#dengYu").click(function() {//点击等于符号触发事件
var value = $("#jieguo").html();
var dianIndex = value.indexOf(".");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
num2 = parseFloat(value);
var sum = 0;
if (yuSuan == 1) {
sum = num1 + num2;
} else if (yuSuan == 2) {
sum = num1 - num2;
} else if (yuSuan == 3) {
sum = num1 * num2;
} else if (yuSuan == 4) {
sum = num1 / num2;
} else if (yuSuan == 0 || num1 == 0 || num2 == 0) {
sum = num1 + num2;
}
var re = /^[0-9]+.?[0-9]*$/;
if (re.test(sum)) {
sum = sum.toFixed(2);
}
$("#jieguo").html(sum);
change = 1;
yuSuan = 0;
num1 = 0;
num2 = 0;
});
$("#cunChu").click(function() {//点击存储触发事件
change = 1;
var value = $("#jieguo").html();
var dianIndex = value.indexOf(".");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
cunChuValue = parseFloat(value);
});
$("#quCun").click(function() {//点击取存触发事件
change = 1;
$("#jieguo").html(cunChuValue);
});
$("#qingCun").click(function() {//点击清存触发事件
change = 1;
cunChuValue = 0;
});
$("#leiCun").click(function() {//点击累存触发事件
change = 1;
var value = $("#jieguo").html();
var dianIndex = value.indexOf(".");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
cunChuValue += parseFloat(value);
});
$("#jiCun").click(function() {//点击积存触发事件
change = 1;
var value = $("#jieguo").html();
var dianIndex = value.indexOf(".");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
if (cunChuValue == 0) {
cunChuValue = parseFloat(value);
} else {
cunChuValue = cunChuValue * parseFloat(value);
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td colspan="4">
<div id="jieguo"
style="width: 300px;height: 30px;font-size: 30px;text-align: right;font-weight:bold;color: red;">0</div>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="cunChu"> 存 储 </button>
</td>
<td>
<button id="quCun"> 取 存 </button>
</td>
<td>
<button id="tuiGe"> 退 格 </button>
</td>
<td>
<button id="qingPing"> 清 屏 </button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="leiCun"> 累 存 </button>
</td>
<td>
<button id="jiCun"> 积 存 </button>
</td>
<td>
<button id="qingCun"> 清 存 </button>
</td>
<td>
<button id="Chuyi" class="yunSuan" name="4"> ÷ </button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="seven" class="number" name="7"> 7 </button>
</td>
<td>
<button id="eight" class="number" name="8"> 8 </button>
</td>
<td>
<button id="nine" class="number" name="9"> 9 </button>
</td>
<td>
<button id="chengYi" class="yunSuan" name="3"> × </button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="four" class="number" name="4"> 4 </button>
</td>
<td>
<button id="five" class="number" name="5"> 5 </button>
</td>
<td>
<button id="six" class="number" name="6"> 6 </button>
</td>
<td>
<button id="jianQu" class="yunSuan" name="2"> - </button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="one" class="number" name="1"> 1 </button>
</td>
<td>
<button id="two" class="number" name="2"> 2 </button>
</td>
<td>
<button id="three" class="number" name="3"> 3 </button>
</td>
<td>
<button id="jiaShang" class="yunSuan" name="1"> + </button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="zero" class="number" name="0"> 0 </button>
</td>
<td>
<button id="dian" class="number" name="."> . </button>
</td>
<td>
<button id="zhengFu" class="number" name="-1"> +/- </button>
</td>
<td>
<button id="dengYu"> = </button>
</td>
</tr>
</table>
</body>
</html>
计算器样式布局有所借鉴，代码均为原创，未经授权禁止转载；内容未经过严格测试，如遇BUG欢迎提出，谢谢！
使用HTML+CSS，jQuery编写的简易计算器的更多相关文章
- 使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 ...
- html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- JS编写简易计算器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- 再谈：jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
- 基于jQuery编写的横向自适应幻灯片切换特效
基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6. 适用浏览器:IE6.IE7.IE8.360.Fire ...
- JavaScript之简易计算器
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
随机推荐
- vijos1053Easy sssp
P1053Easy sssp 描述 输入数据给出一个有N(2 <= N <= 1,000)个节点,M(M <= 100,000)条边的带权有向图. 要求你写一个程序, 判断这个有向图 ...
- mac下的改装人生——制作mac os 启动盘
我即将开始对我的mac进行彻底的改造,现在还需要的是一个mac的启动盘或者启动光盘.由于没钱买mac的安装光盘或者安装盘,只能网上下了一个镜像自己做启动盘~ 需要:装有Mac Os的电脑,至少8g的u ...
- nginx在mac下的安装与基本操作
1. 安装 brew install nginx(需要安装homebrew) 2. 执行 nginx 直接启动nginx服务 3. nginx -s reload/stop 4. 配置地址 sud ...
- 广度优先搜索BFS
广度优先搜索可以形成一个广度优先搜索树 算法时间为O(V+E),两重循环 输入:图g,起点start(int) 需要的数据结构:队列Q.color数组(存放每个顶点的颜色) 算法过程: 1. 预处理: ...
- Wow! Such Doge! - HDU 4847 （水题）
题目大意:题目描述了一大堆.....然而并没什么用,其实就是让求给的所有字符串里面有多少个"doge",不区分大小写. 代码如下: ====================== ...
- Struts2.xml中result type属性说明
在struts2配置XML里,result中type属性有以下几种: 1.dispatcher:服务器跳转到前台,后面跟着可以是JSP.htm等等前台页面,默认是这种. 2.redirect:客户端跳 ...
- Android Fragment动态添加 FragmentTransaction FragmentManager
Fragment常用的三个类:android.app.Fragment 主要用于定义Fragmentandroid.app.FragmentManager 主要用于在Activity中操作Fragme ...
- undo损坏故障恢复（二）ORA-01092,ORA-00604,ORA-01110
undo 故障诊断与恢复(二) 今天是2013-09-01,目前困扰我将近一周的问题,终于解决了,我非常感谢帮助我的朋友,也非常感谢管我要钱然后替我解决问题的朋友(我没采用).这更激发了我一定要解决这 ...
- memcache实现公共计数器网站
在反问题的过程中遇到的最近项目.网上查了很多资料并没有完全实现. 因此,要找到适合自己的xmemcache client和memcache关联API和说明,我们发现了一个比较完美的实现. 键类:net ...
- MYSQL 体系结构图 log commit