使用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 ...
随机推荐
- 【转】onPrepareOptionsMenu 和onCreateOptionsMenu 的区别
原文网址:http://blog.csdn.net/allenjy123/article/details/7467084 @Override public boolean onCreateOption ...
- 图论 BZOJ 3669 [Noi2014]魔法森林
Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节 ...
- 【模拟】NCPC 2014 K Train passengers
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1797 题目大意: 有N个车站,火车一共可以坐M个人,每个车站下车Ai,上车Bi个人,在 ...
- Search in Rotated Sorted Array II——LeetCode
Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this ...
- iOS: 关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系
刚接触iOS开发的人难免会对苹果的各种证书.配置文件等不甚了解,可能你按照网上的教程一步一步的成功申请了真机调试,但是还是对其中的缘由一知半解.这篇文章就对Certificate.Provisioni ...
- [Locked] Paint House I & II
Paint House There are a row of n houses, each house can be painted with one of the three colors: red ...
- [转]sleep和wait的区别
http://www.cnblogs.com/plmnko/archive/2010/10/15/1851854.html from:http://nneverwei.javaeye.com/blog ...
- Mysql Binlog日志详解
一．Mysql Binlog格式介绍 Mysql binlog日志有三种格式,分别为Statement,MiXED,以及ROW! 1.Statement:每一条会修改数据的sql都会记录在 ...
- serialVersionUID的作用以及设置方法（转）
声明:本篇文章是转载的 http://blog.csdn.net/kakaxi_77/article/details/8129070 http://snowlotus.iteye.com/blog/2 ...
- mybatis 关联对象mapper.xml的写法
https://github.com/zfrHJ/mybaties/blob/master/mybaties/src/com/itheima/mybatits/mapper/OrdersMapperC ...