知识点：

fadeIn（）---计算器界面载入淡入效果

hover（）---鼠标移入移出某个元素时触发的事件

click（）---鼠标单击事件

css（）---对元素样式的操作

val（）---获取表单元素的值

text（）---对元素div内容的处理

substring（start,end）---从start到end截取字符串的子串

indexOf（）--字符串索引函数（在字符串中查找指定字符串，返回值是目标字符串在字符串的开始位置，返回-1表示没找到）

.length --- 获取字符串的长度

var $temp1 = parseFloat(str);---字符类型的转换

html:

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8"/>

	<title>soulsjie jQuery制作计算器</title>

	<script src="libs/jquery-1.8.3.js"></script>

	<link rel="stylesheet" href="css/soulsjie.css" type="text/css" />

</head>

<body>

	<div class="content">

		<div class="write_diban">

			<input type="text" value="0" class="view"/>

			<div class="opp">

				<div class="bk">bk</div>

				<div class="cl">C</div>

			</div>

			<div class="key">

				<div class="bt7">7</div>

				<div class="bt8">8</div>

				<div class="bt9">9</div>

				<div class="chu">/</div>

				<div class="bt4">4</div>

				<div class="bt5">5</div>

				<div class="bt6">6</div>

				<div class="chen">*</div>

				<div class="bt1">1</div>

				<div class="bt2">2</div>

				<div class="bt3">3</div>

				<div class="chen">-</div>

				<div class="bt0">0</div>

				<div class="dian">.</div>

				<div class="jia">+</div>

				<div class="deng">=</div>

			</div>

			<div class="massage"></div>

		</div>

	</div>

	<!--soulsjie 2017.11.10-->

</body>

<script src="js/soulsjie.js"></script>

</html>

css:

.content{

	margin:100px auto;

	background:#2b3037;

	height:500px;

	width:300px;

	box-shadow: 10px 10px 5px #888888;

	padding:5px;

	display:none;

}

.write_diban{

	height:100%;

	width:100%;

	margin:0 auto;

	background:#d9e4f1;

	border:1px solid #f00;

	border-radius:10px;

	text-align:center;

}

.write_diban > input{

	margin-top:10px;

	height:50px;

	width:285px;

	background:#d9e4f1;

	border:1px solid #8898ab;

	border-radius:5px;

	font-size:20px;

	font-weight:bold;

	text-align:right;

}

.key div ,.opp div{

	float:left;

	background:#f00;

	margin-left:8px;

	margin-top:8px;

	cursor:pointer;

	clolr:#1e395b;

	font-size:16px;

	background:#d9e4f1;

	border:1px solid #8898ab;

	border-radius:10px;

	line-height: 45px;

}

.opp div{

	width:45%;

	height:45px;

}

.key div {

	width:63px;

	height:45px;

}

js:

$(document).ready(function(){

	 $(".content").fadeIn(2000);

});

$(".key div,.opp div").hover(function(){

	$(this).css({"background":"#f00","color":"#fff","fontSize":"26px"});

},function(){

	$(this).css({"background":"#d9e4f1","color":"#000","fontSize":"16px"});

});

var $num="";

var $app_num=0;//运算符操作标记0表示无运算1加法。2减法。3乘法。4除法

//数字键被按下时向显示框中添加内容

$(".key div").click(function(){

	$num+=$(this).text();

	//将输入追加到显示框

	$(".view").val($num);

});

//退格键处理

$(".bk").click(function(){

	var $aa=$(".view").val().substring(0, $(".view").val().length-1)

	$(".view").val($aa);

});

//清空显示框

$(".cl").click(function(){

	$num="";

	$(".view").val($num);

});

//等号被按下时

$(".deng").click(function(){

	//错误

	//用户的操作执行响应的计算

	if($num.indexOf("+")!=-1){	//用户的操作是计算加法

		$app_num=1;

	}

	if($num.indexOf("-")!=-1){	//用户的操作是计算加法

		$app_num=2;

	}

	if($num.indexOf("*")!=-1){	//用户的操作是计算加法

		$app_num=3;

	}

	if($num.indexOf("/")!=-1){	//用户的操作是计算加法

		$app_num=4;

	}

	switch($app_num)

	{

	case 0:

	  $num="";

	  $(".view").val($num);

	  alert("输入有误");

	  break;

	case 1:	//执行加法操作

		//在字符串中将多余的=号截取

		var $aa=$(".view").val().substring(0, $(".view").val().length-1)

		num_arr=$aa.split("+");

		//将分割后的两个字符串进行类型转换

		var $temp1 = parseFloat(num_arr[0]);

		var $temp2 = parseFloat(num_arr[1]);

		//计算结果

		var $resout=$temp1+$temp2;

		$num+=$resout;

		//输出结果

		$(".massage").html($num);

		$num="";

		$(".view").val($num);

	  break;

	case 2:	//执行减法操作

		//在字符串中将多余的=号截取

		var $aa=$(".view").val().substring(0, $(".view").val().length-1)

		num_arr=$aa.split("-");

		//将分割后的两个字符串进行类型转换

		var $temp1 = parseFloat(num_arr[0]);

		var $temp2 = parseFloat(num_arr[1]);

		//计算结果

		var $resout=$temp1-$temp2;

		$num+=$resout;

		//输出结果

		$(".massage").html($num);

		$num="";

		$(".view").val($num);

	  break;

	case 3:	//执行乘法操作

		//在字符串中将多余的=号截取

		var $aa=$(".view").val().substring(0, $(".view").val().length-1)

		num_arr=$aa.split("*");

		//将分割后的两个字符串进行类型转换

		var $temp1 = parseFloat(num_arr[0]);

		var $temp2 = parseFloat(num_arr[1]);

		//计算结果

		var $resout=$temp1*$temp2;

		$num+=$resout;

		//输出结果

		$(".massage").html($num);

		$num="";

		$(".view").val($num);

	  break;

	case 4:	//执行除法操作

		//在字符串中将多余的=号截取

		var $aa=$(".view").val().substring(0, $(".view").val().length-1)

		num_arr=$aa.split("/");

		//将分割后的两个字符串进行类型转换

		var $temp1 = parseFloat(num_arr[0]);

		var $temp2 = parseFloat(num_arr[1]);

		//计算结果

		var $resout=$temp1/$temp2;

		$num+=$resout;

		//输出结果

		$(".massage").html($num);

		$num="";

		$(".view").val($num);

	  break;

	}

});

jQuery_计算器实例的更多相关文章

  1. JavaScript实例技巧精选(10)—计算器实例2

    >>点击这里下载完整html源码<< 这是截图: 利用Javascript和html实现的另一个计算器实例,核心代码如下: <script language=" ...

  2. JavaScript实例技巧精选(9)—计算器实例1

    >>点击这里下载完整html源码<< 这是截图: 利用Javascript和html实现的一个计算器实例,核心代码如下: <script language="J ...

  3. Python全栈--6.1-match-search-findall-group(s)的区别以及计算器实例

    match.search.findall.group(s) 区别 import re # match findall经常用 # re.match() #从开头匹配,没有匹配到对象就返回NONE # r ...

  4. 原生javascript开发计算器实例

    计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力. 本实例详细分析一个js计算器的开发步骤,学习本教程时最好先具备一些基础的js知识. 计算器包括 ...

  5. php简易计算器实例

    <html> <head> <title>PHP实现简单计算器</title> <meta http-equiv="Content-Ty ...

  6. Java实例---计算器实例

    1.计算器上的键的显示名字 1.0 继承JFrame类 public class Calculate extends JFrame { } 1.1定义常量 /** 计算器上的键的显示名字 */ pub ...

  7. jsp+javaBean 计算器实例

    package com.wzh.test.domain; import java.math.BigDecimal; public class CalculatorBean { private Stri ...

  8. JavaScript实例技巧精选(11)—计算器实例3

    >>点击这里下载完整html源码<< 界面如下 将以下代码插入<body></body>中 <FORM NAME="Calc" ...

  9. vue实现网页简单计算器实例代码

    效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

随机推荐

  1. poj 1258 Agri-Net prim模板 prim与dijkstra的区别

    很裸地求最小生成树的题目.题意就不多说了,最重要的就是记录一下学会了prim算法. 初学prim,给我的第一感觉就是和dijkstra好像啊,感觉两者的区别还是有的: 1:prim是求最小生成树的算法 ...

  2. vijos P1629八 容斥原理

    https://vijos.org/p/1629 注意lcm要用LL 先给一个样例 1 2 1 10 思路.其实这题就是问,给定一堆数,要求不能整除其任意一个的数字有多少个. 容辞 + lcm dfs ...

  3. 1354 选数字 DP背包 + 数学剪枝

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1354&judgeId=187448 其实这题和在若干个数字中,选 ...

  4. AngularJS ng-repeat下使用ng-model

    1 2 3 blue:<input type="radio" value="1" ng-model="selectValue"/> ...

  5. 移动端如何定义字体font-family

    移动端如何定义字体font-family 中文字体使用系统默认即可,英文用Helvetica /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 参考<移 ...

  6. [SPOJ1811]Longest Common Substring 后缀自动机 最长公共子串

    题目链接:http://www.spoj.com/problems/LCS/ 题意如题目,求两个串的最大公共子串LCS. 首先对其中一个字符串A建立SAM,然后用另一个字符串B在上面跑. 用一个变量L ...

  7. Android Studio 导入新工程项目

    1 导入之前先修改工程下相关文件 1.1 只需修改如下三个地方1.2 修改build.gradle文件 1.3 修改gradle/wrapper/gradle-wrapper.properties 1 ...

  8. R in action 读书笔记（1）--第五章：高级数据管理

    5.2.1数学函数 函数 描述 abs(x) 绝对值 sqrt(x) 平方根 ceiling(x) 不小于x的最小整数 floor(x) 不大于x的最大整数 trunc(x) 向0的方向截取的X中的整 ...

  9. Linux修改ssh端口，减少暴力破解

    版本centos7   注意:操作时请勿断开当前的ssh连接,以免发生情况登陆不了.   1.修改的是 /etc/ssh/sshd_config 文件 打开文件之后会发现Port是注释掉的,默认为22 ...

  10. jQuery addClass removeClass toggleClass方法概述

    通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...