使用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 ...
随机推荐
- BZOJ1621: [Usaco2008 Open]Roads Around The Farm分岔路口
1621: [Usaco2008 Open]Roads Around The Farm分岔路口 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 521 S ...
- 禁用页面及页面所有frame内的右键菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...
- 动态规划(模型转换)：uvaoj 1625 Color Length
[PDF Link]题目点这里 这道题一眼就是动态规划,然而貌似并不好做. 如果不转换模型,状态是难以处理的. 巧妙地转化:不直接求一种字母头尾距离,而是拆开放到状态中. #include <i ...
- 【模拟】FOJ 2244 Daxia want to buy house
题目链接: http://acm.fzu.edu.cn/problem.php?pid=2244 题目大意: 每月还款额=贷款本金×[月利率×(1+月利率)^还款月数]÷[(1+月利率)^还款月数-1 ...
- ASP.NET网站文件上传下载功能
if (!IsPostBack) { if (Application["RaNum"] == null) { Random ra = new Random(); Applicati ...
- HDOJ 2071 Max Num
Problem Description There are some students in a class, Can you help teacher find the highest studen ...
- C++递归求解N个元素的所有子集
C++递归求解N个元素的所有子集 引言: 我在复习C++遇到了设计递归函数的问题.这个例子,很好的显示了设计递归的方式,思想. 这与斐波那数列不同,这个例子更有应用意义. 问题: 试编写一个递归函数, ...
- winscp自动执行脚本
我们经常使用WinSCP工具通过sftp协议上传获取文件,本文描述通过bat批量处理文件. 首先,我们打开dos命令窗口使用 cd \d :D\WinSCP 打开WinSCP安装目录 上传文件: wi ...
- Detect the Virus - ZOJ 3430（恶心的自动机）
题目大意:给你一些病毒的特征码,然后再给一些文本,判断每个文本有多少种病毒,不过给的字符串都是加密处理过的,给的每个字符串都有对应一个64以内的一个数(题目里面那个表就是),然后可以把这个64以内的这 ...
- 用Myeclipse 编写struts.xml时，自动提示
之所以不自动提示,是因为这个xml它不知道自己的xml格式是什么有哪些标签,所以不知道该怎么提示 所以就要给它引入格式,所以要引入XSD或者DTD文件 1.首先打开MyEclipse的窗口,选择“Wi ...