使用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 ...
随机推荐
- oracle 表查询(2)
使用逻辑操作符号 问题:查询工资高于500 或者是岗位为MANAGER 的雇员,同时还要满足他们的姓名首字母为大写的J? or job = 'MANAGER') and ename LIKE 'J%' ...
- Shader Forge 刀光溶解
实际特效时,时间可以控制vertex color.a,shader forge 还只是玩具,试验用具,离商业产品质量还有差距. 其实,有技术美术的画,很多问题,美术能自己解决,都是一些欠缺通道的问题, ...
- iconv gbk字符转utf8字符
直接上代码 bool gbk2utf8(const char* src, char* dest, size_t inlen) { const char *inbuf = src; size_t out ...
- Hadoop core-site.xml 配置项列表
core-default.xml与core-site.xml的功能是一样的,如果在core-site.xml里没有配置的属性,则会自动会获取core-default.xml里的相同属性的值 官方文档: ...
- HDOJ(HDU) 2502 月之数(进制)
Problem Description 当寒月还在读大一的时候,他在一本武林秘籍中(据后来考证,估计是计算机基础,狂汗-ing),发现了神奇的二进制数. 如果一个正整数m表示成二进制,它的位数为n(不 ...
- O - Extended Traffic（判断负环）
题意:有n个城市,每一个城市有一个拥挤度ai,从一个城市I到另一个城市J的时间为:(aJ-aI)^3,存在负环.问从第一个城市到达第k个城市所话的时间,如果不能到达,或者时间小于3输出?否则输出所花的 ...
- Heavy Transportation
题目大意: 雨果的沉重运输是快乐的,当浮空运输出现故障时候他可以扩展业务, 但他需要一个聪明的人告诉他是否真的是一种把他的客户构建了巨型钢起重机的地方需要的所有街道都可以承受重量(这句是直接有道翻译的 ...
- [转载]Web前端和后端之区分，以及面临的挑战
原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...
- python最简洁的条件判断语句写法
这篇文章主要介绍了Python返回真假值(True or False)小技巧,本文探讨的是最简洁的条件判断语句写法,本文给出了两种简洁写法,需要的朋友可以参考下 如下一段代码: def isLen(s ...
- 融云的Java端实现
产品中要使用融云实现即时通讯,下面是实现步骤: 1 .注册appkey secret,这个是第一步: 2 .下载融云Java客户端 https://github.com/rongcloud/serve ...