jQuery实现简易的计算器

更新时间：2022年07月21日 12:06:03 作者：Miguel_6

这篇文章主要为大家详细介绍了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: 宋体;
?? ?text-align: center;
?? ?line-height: 70px;
?? ?background:url(?article/"../img/1 (20).jpg");
?? ?background-repeat:no-repeat;
?? ?background-size:400px 500px;
}

#d2{
?? ?width: 100%;
?? ?height: 4%;
?? ?color: aqua;
?? ?float: left;
?? ?border:0px red solid;
?? ?text-align: left;
?? ?line-height: 18px;
?? ?font-size: 20px;
?? ?font-family: "微软雅黑";
?? ?
}

#d3{
?? ?width: 100%;
?? ?height: 10%;
?? ?color: aqua;
?? ?float: left;
?? ?border:0px red solid;
?? ?text-align: left;
?? ?line-height: 18px;
?? ?margin-top: 3px;
?? ?margin-bottom: 9px;
?? ?opacity: 0.8;
}

.c1{
?? ?width: 22.1%;
?? ?height: 15%;
?? ?background-color: #FFC0CB;
?? ?cursor: pointer;
?? ?float: left;
?? ?border-radius: 12px;
?? ?margin: 0px 0px 9px 9px;
?? ?opacity: 0.8;
}

.c1:hover{
?? ?background-color: aqua;
}

布局+jQuery：

<!DOCTYPE html>
<html>

?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>计算器</title>
?? ??? ?<link href="计算器.css" rel="external nofollow"  rel="stylesheet">
?? ?</head>

?? ?<body>
?? ??? ?<div id=d1>

?? ??? ??? ?<div id=d2>● ● ●</div>
?? ??? ??? ?<div id=d3>
?? ??? ??? ??? ?<input type="text" id="t" style="border:1px bisque solid;width: 394px;height:48px;background-color:#FF6600;font-size: 25px;" />
?? ??? ??? ?</div>

?? ??? ??? ?<div class=c1 value="AC">AC</div>
?? ??? ??? ?<div class=c1 value="+/-">+/-</div>
?? ??? ??? ?<div class=c1 value="%">%</div>
?? ??? ??? ?<div class=c1 value="/">÷</div>
?? ??? ??? ?<div class=c1 value="7">7</div>
?? ??? ??? ?<div class=c1 value="8">8</div>
?? ??? ??? ?<div class=c1 value="9">9</div>
?? ??? ??? ?<div class=c1 value="*">×</div>
?? ??? ??? ?<div class=c1 value="4">4</div>
?? ??? ??? ?<div class=c1 value="5">5</div>
?? ??? ??? ?<div class=c1 value="6">6</div>
?? ??? ??? ?<div class=c1 value="-">-</div>
?? ??? ??? ?<div class=c1 value="1">1</div>
?? ??? ??? ?<div class=c1 value="2">2</div>
?? ??? ??? ?<div class=c1 value="3">3</div>
?? ??? ??? ?<div class=c1 value="+">+</div>
?? ??? ??? ?<div class=c1 value="0">0</div>
?? ??? ??? ?<div class=c1 value="保留">保留</div>
?? ??? ??? ?<div class=c1 value=".">.</div>
?? ??? ??? ?<div class=c1 onclick="answer()">=</div>
?? ??? ??? ?
?? ??? ??? ?<script src="http://9i0i.com/pic.php?p=../JQuery/jquery-3.4.1.js" ></script>
?? ??? ??? ?<script>
?? ??? ??? ??? ?var store = '';
?? ??? ??? ??? ?var bo1 = false; //是否 按了 = 的变量
?? ??? ??? ??? ?$(".c1:lt(19)").click(function(){
?? ??? ??? ??? ??? ?var x1=$(this).attr("value");
?? ??? ??? ??? ??? ?get(x1);
?? ??? ??? ??? ?});

?? ??? ??? ??? ?function get(x) {
?? ??? ??? ??? ??? ?var a = $("*:text");
?? ??? ??? ??? ??? ?if(x == "保留") {
?? ??? ??? ??? ??? ??? ?bo1 = false;
?? ??? ??? ??? ??? ?} else if(x == "AC") {
?? ??? ??? ??? ??? ??? ?a.val("0");
?? ??? ??? ??? ??? ??? ?bo1 = true;
?? ??? ??? ??? ??? ?} else if(x == "+/-") {
?? ??? ??? ??? ??? ??? ?a.val(0 - a.val());
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?store = x;
?? ??? ??? ??? ??? ??? ?var v = a.val();
?? ??? ??? ??? ??? ??? ?if(bo1 == true) {
?? ??? ??? ??? ??? ??? ??? ?a.val(x);
?? ??? ??? ??? ??? ??? ??? ?bo1 = false;
?? ??? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ??? ?a.val(v + x);
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}

?? ??? ??? ??? ?function answer() {
?? ??? ??? ??? ??? ?var a = $("*:text");
?? ??? ??? ??? ??? ?var x = a.val();
?? ??? ??? ??? ??? ?var y = eval(x);
?? ??? ??? ??? ??? ?a.val(y);
?? ??? ??? ??? ??? ?bo1 = true;
?? ??? ??? ??? ?}
?? ??? ??? ?</script>

?? ??? ?</div>
?? ?</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

jquery删除数组中重复元素
本文主要讲解jquery删除数组中重复元素的具体思路与示例代码，有助于理解与学习，希望对大家有所帮助
2016-12-12
jquery 简单图片导航插件jquery.imgNav.js
前几天某MM要偶帮忙实现栗子汀首页的图片导航效果，很简单而且具有通用性的一个需求，点图片A切换图片A相关的内容，点图片B切换图片B相关的内容，仅此而已。
2010-03-03
网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现，附注释说明，最简单的静态返回顶部，点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部
2013-04-04
jQuery插件zTree实现的基本树与节点获取操作示例
这篇文章主要介绍了jQuery插件zTree实现的基本树与节点获取操作,结合实例形式分析了jQuery树形插件zTree构造基本树与针对节点的获取操作相关实现技巧,需要的朋友可以参考下
2017-03-03
jQuery Ajax之$.get()方法和$.post()方法
load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或者是后面要讲解到的$.ajax方法）。
2009-10-10
jQuery实现的类flash菜单效果代码
这里要说的就是一个菜单的hover的效果，一般我们通过CSS的伪类:hover实现的菜单切换都比较单调，因为仅仅是一个简单的图片的变化，不像很多flash菜单一样变化非常的平滑，但是这里我们就是要用非flash的技术实现一个平滑的hover效果。
2010-05-05
利用jQuery实现CheckBox全选/全不选/反选的简单代码
下面小编就为大家带来一篇利用jQuery实现CheckBox全选/全不选/反选的简单代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
实测jquery data()如何存值
jQuery的数据框架没有将元素数据当作元素属性来存储，我记得是可以通过jQuery的data("xxx")方法取HTML标签上的data-xxx属性的值的
2013-08-08
jQuery实现QQ空间汉字转拼音功能示例
这篇文章主要介绍了jQuery实现QQ空间汉字转拼音功能,结合具体实例形式分析了jQuery实现拼音与中文汉字的转换操作实现技巧,需要的朋友可以参考下
2017-07-07
深入理解jQuery之防止冒泡事件
下面小编就为大家带来一篇深入理解jQuery之防止冒泡事件。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05