jQuery_计算器实例

知识点：

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;
	}

});

posted @ 2017-11-10 16:45 soulsjie 阅读(438) 评论(0) 收藏举报

刷新页面返回顶部

soulsjie

jQuery_计算器实例

公告