jQuery实现简易计算器功能
jQuery制作一个简易计算器，供大家参考，具体内容如下
页面效果:
源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
#all {
width: 600px;
margin: 0px auto;
background-color: deepskyblue;
height: 400px;
padding-top: 20px;
}
#myCal {
width: 500px;
height: 300px;
margin: 0px auto;
}
table {
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid white;
}
button {
width: 96px;
height: 40px;
font-size: 26px;
font-family: "宋体";
color: navy;
background-color:white;
}
</style>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
var Num1 = ""; //存放数字1
var Num2 = ""; //存放数字2
var Char = ""; //存放运算符
var Result = "";//存放结果
$(function () {//页面加载时绑定事件
$("button").hover(function () {
$(this).css({"background-color":"orange","color":"white"});//鼠标悬停时更改背景颜色与字体颜色
}, function () {
$(this).css({ "background-color": "white", "color": "navy" });
});
//给运算符添加点击事件
$('.char').click(function () {
if (Num2 == "") {
Char = $(this).text();
$('#content').val(Num1 + Char);
} else if(Num2!="") {
switch (Char) {//当Num2存在时 代表两个数字已存在,并点了一个新运算符 则直接进行运算
case "+":
Result = parseFloat(Num1) + parseFloat(Num2);
break;
case "-":
Result = parseFloat(Num1) - parseFloat(Num2);
break;
case "*":
Result = parseFloat(Num1) * parseFloat(Num2);
break;
case "/":
Result = parseFloat(Num1) / parseFloat(Num2);
break;
}
Num2 = "";//清空Num2的值
Num1 = Result;//将结果的值赋值给Num1
Char = $(this).text();//更新下一次点击 的运算符
$('#content').val(Num1 + Char);//将更新完的运算符 和结果一起拼接到文本框中
}
});
//给数字添加点击事件
$('.num').click(function () {
var txt = $(this).text();//拿到当前点击的数字按钮
if (Char == "") {//如果运算符为空 则代表第一次点击 或者点击了等于号
if (Result != Num1) {//如果Result!=Num1 则代表 没有点击=号
Num1 = Num1 + txt;//正常拼接
$('#content').val(Num1);//显示
} else {//点击了=号
Num1 = "";//清空Num1值 以免 等于号计算出的结果直接拼接了新的值
Num1 = Num1 + txt;//拼接新的输入值
$('#content').val(Num1);//显示
}
}else {
Num2 = Num2 + txt;//如果运算符已存在 则输入的是第二个数
$('#content').val(Num1 + Char + Num2);//拼接
}
});
$(".clear").click(function () {//归零按钮 清空所有值 并将输入框按钮的值还原成0
Num1 = "";
Num2 = "";
Char = "";
Result = "";
$('#content').val("0");
});
$(".result").click(function () {
switch (Char) {//做一个判断，不同的运算符做不同的运算
case "+":
Result = parseFloat(Num1) + parseFloat(Num2);
break;
case "-":
Result = parseFloat(Num1) - parseFloat(Num2);
break;
case "*":
Result = parseFloat(Num1) * parseFloat(Num2);
break;
case "/":
Result = parseFloat(Num1) / parseFloat(Num2);
break;
}
$('#content').val(Result);
Num1 = Result;//将计算结果赋值给Num1
Char = "";//在这里清空原有的运算符 以跟直接点击+-/*运算符区分开
Num2 = "";//清空Num2的值
});
});
</script>
</head>
<body>
<div id="all">
<div id="myCal">
<div style="margin:auto;text-align:center;font-size:20px;font-family:'宋体';color:navy'">jQuery简易计算器</div>
<table style="margin-top:20px;">
<tr>
<td colspan="4"><input id="content" value="0" style="height:40px;width:490px;font-size:30px;color:blue;font-family:'宋体';text-align:right" /></td>
</tr>
<tr>
<td><button class="num">7</button></td>
<td><button class="num">8</button></td>
<td><button class="num">9</button></td>
<td><button class="char">+</button></td>
</tr>
<tr>
<td><button class="num">4</button></td>
<td><button class="num">5</button></td>
<td><button class="num">6</button></td>
<td><button class="char">-</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 class="char">*</button></td>
</tr>
<tr>
<td><button class="num">0</button></td>
<td><button class="clear">C</button></td>
<td><button class="char">/</button></td>
<td><button class="result">=</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery实现计算器小功能
本文实例为大家分享了jquery实现计算器功能的具体代码,供大家参考,具体内容如下 用jquery实现计算器对于我来说有三个难点 1.单纯的html页面,怎么实现计算2.显示屏用什么标签,又怎么把他显示出来3.要想实现删除,怎么把字符串最后一个字母删除 解决 1.看了别人的计算器,我发现eval()可以实现这个目的eg: alert(eval(“3+5”));没错,会弹出 8.2.看了几个人的博客,都是用span元素节点当显示屏,通过jQuery的html()函数来实现把内容显示出来.3.有两个
-
一个简单的jQuery计算器实现了连续计算功能
一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=
-
基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 var change = 0;// 属于运算符后需要清空上一数值 var num1 = 0;// 运算第一个数据 var num2 = 0;// 运算第二个数据 var cunChuValue = 0;// 存储的数值 $(function() { $(".number").click(f
-
jQuery实现的简单在线计算器功能
本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
-
jQuery实现简单计算器功能
本文实例为大家分享了jQuery实现简单计算器的具体代码,供大家参考,具体内容如下 要求: 代码: <html> <head> <meta charset="utf-8"> <title>我的计算器</title> <script src="jquery-1.9.1.min.js"> </script> <script>
-
jQuery实现计算器功能
本文实例为大家分享了jQuery实现计算器功能的具体代码,供大家参考,具体内容如下 动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"></script> <st
-
jQuery实现简单计算器
本文实例为大家分享了jQuery实现简单计算器的具体代码,供大家参考,具体内容如下 基本功能: 1.计算器换肤,目前有白色(默认色).绿色.蓝色.灰色.橙色几种颜色可供选择. 2.简单的加.减.乘.除.取余计算,注意由于时间有限,没有深入研究功能,每次运算后需点击清屏功能才能进行下一次正确的运算. 3.历史运算数据记录,此功能需要点击记录按钮后打开浏览器控制台查看. 4.退出功能,点击退出按钮,可实现计算器退出. 功能截图: 1.换肤(当前肤色为灰色).计算. 2.历史运算记录. 3.退出. 代
-
jQuery实现简易的计算器
本文实例为大家分享了jQuery实现简易的计算器的具体代码,供大家参考,具体内容如下 布局如下: css代码 #d1{ width: 400px; height: 500px; /*background-color: #A9A9A9;*/ float: left; margin: 20px 0px 0px 500px; font-size: 30px; font-weight: bold; font-family: 宋体;
-
jQuery实现可以计算进制转换的计算器
本文实例为大家分享了jQuery实现可以计算进制转换的计算器,供大家参考,具体内容如下 在案例8的基础上增加了进制转换功能 动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js">&l
-
jQuery实现简易计算器功能
jQuery制作一个简易计算器,供大家参考,具体内容如下 页面效果: 源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8&quo
-
Python PyQt5实现的简易计算器功能示例
本文实例讲述了Python PyQt5实现的简易计算器功能.分享给大家供大家参考,具体如下: 这里剩下计算函数(self.calculator)未实现,有兴趣的朋友可以实现它 [知识点] 1.利用循环添加按钮部件,及给每个按钮设置信号/槽 2.给按钮设置固定大小:button.setFixedSize(QtCore.QSize(60,30)) 3.取事件的的发送者(此例为各个按钮)的文本: self.sender().text() [效果图] [源代码] import sys from PyQt
-
Python正则表达式实现简易计算器功能示例
本文实例讲述了Python正则表达式实现简易计算器功能.分享给大家供大家参考,具体如下: 需求:使用正则表达式完成一个简易计算器. 功能:能够计算简单的表达式. 如:1*2*((1+2)/(2+3)+1)*5.1-3+2**2 import re class SimpleCalc(object): # 表达式检测 def check(self,exp): # 合法字符检测 res = re.findall(r"[^\d\+\-\*/\(\)\.]", exp) print(res) i
-
java实现简易计算器功能
本文为大家分享了java实现简易计算器功能,具体内容如下 题目: 编写一个模拟计算器的程序.在面板中添加一个文本框(显示按键及运算结果). 10个数字按钮(0~9).4个运算按钮(加.减.乘.除).一个等号按钮.一个清除按钮, 要求将按键和结果显示在文本框中. 代码过程展示: import java.awt.Container; import java.awt.FlowLayout; import java.awt.GridLayout; import java.awt.event.Action
-
C#实现简易计算器功能(附源码)
本文实例为大家分享了C#实现简易计算器功能的具体代码,供大家参考,具体内容如下 剖析: 1.先设计界面(按钮.文本框(一个显示算式,一个显示结果))布局 2.单击按钮将其对应内容显示在文本框中 3.单击符号(+.-.×.÷.%)时将第一次输入的数储存起来 4.单击等号时将第二次输入的数存储起来并将第一次输入的数与第二次输入的数按照所单击的符号进行运算将结果显示在第一个文本框中 5.单击C时将两个文本框中的内容清空 重点: 1.声明一个bool类型的变量用于实现单击符号再次输入数字时第一次输入的数
-
C语言实现简易计算器功能
本文实例为大家分享了C语言实现简易计算器功能的具体代码,供大家参考,具体内容如下 表达式求值项目(多功能计算器).该项目主要包含了10个模块,10项功能: 1:加法运算:主要进行两个数的加法运算,可进行计算整数和浮点数: 2:减法运算:主要进行两个数的减法运算,可进行计算整数和浮点数: 3:乘法运算:主要进行两个数的乘法运算,可进行计算整数和浮点数: 4:除法运算:主要进行两个数的除法运算,可进行计算整数和浮点数:增加了报错功能,由于除数不可以为0,当用户输入的除数为0的时候,该项目会出提示红色
-
C#实现简易计算器功能(2)(窗体应用)
本文实例为大家分享了C#实现简易计算器功能第二部分的具体代码,供大家参考,具体内容如下 初始化,实现四则运算 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using Sys
-
C#实现简易计算器功能(1)(窗体应用)
本文实例为大家分享了C#实现简易计算器功能的具体代码,供大家参考,具体内容如下 实现页面布局和数值初始化 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using Syste
-
python实现简易计算器功能
本文实例为大家分享了python实现简易计算器功能的具体代码,供大家参考,具体内容如下 一.功能目标 用户输入一个类似 1-2*((60-30+(-40/5)*(9-2*5/3+7/3*99/4*2998+10*568/14))-(-4*3)/(16-3*2)) 这样的表达式,假设表达式里面除了包含空格.'+'.'-'.'*'.'/'和括号再无其他特殊符号,然后自己动手写代码解析其中的表达式,实现加减乘除,最后得出的结果与真实的计算机所算的结果必须一致. 二.解题思路 1.为了分开运算符和数
-
C++实现简易计算器功能
本文实例为大家分享了C++实现简易计算器功能的具体代码,供大家参考,具体内容如下 介绍 介绍:仅支持自然数间的+ - * /操作,并没有括号. 实现:利用栈实现存储运算数以及运算符. 流程 1.输入:string exp 2.对EXP进行处理:数字入数栈,运算符入字符栈. 1)栈空,字符入栈 2)栈非空 栈顶运算级别> =当前字符运算级,取栈顶运算符并出栈两个数,计算,结果入数栈 3)字符入栈 3.对字符栈检测,非空时进行计算 4.输出:结果. 实现 const int MAXSIZE