jquery实现简单计算器源码分享

最新推荐文章于 2021-12-31 07:35:07 发布

菜鸟Y

最新推荐文章于 2021-12-31 07:35:07 发布

阅读量872

点赞数 2

分类专栏： jquery 计算器文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_37666531/article/details/105303174

版权

jquery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

计算器

1 篇文章 0 订阅

订阅专栏

注意:需自行引入jquery
在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8" />
		<title>计算器的实现</title>
	</head>
	<style type="text/css"></style>
	<body>
	</body>
	<script src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
	//全局变量

	var jisun=["0"]; //计算的式子组数
		
	//加载函数
	 $(function(){
	 	init();
	 	window.innerHeight="500px";		
	 	window.innerWidth="500px";	
	 	//window.close();
	 });
	//初始化计算器的方法
		function init(){
			
			
			var keys=["CE","C","X","/","7","8","9","*","4","5","6","-","1","2","3","+","-+","0",".","="];
			
			
			var str="<table  style='border:1px red solid;' width='300px' heigth='520px' ></table>"; //创建表格
			$(document.body).append(str);
			//创建第一行
			var tr1= $("<tr align='right'><td colspan='4'></td></tr>");
			var showj=$("<div id='show'></div>");
			showj.css("height","12px").css("font-size","12px");
			//创建输入框
			var inputtext=$("<input type='text' value='0'/>");
			$(inputtext).css("width","98%").css("text-align","right");
			tr1.find("td").append(showj);
			tr1.find("td").append(inputtext);
			$("table").append(tr1);
			
			var tr="<tr>";
			for (var i=0;i<keys.length;i++) {
				
				tr+="<td width='30'><input type='button' value='"+keys[i]+"' οnclick='downKey(this)' style='width:100%'/></td>";
				
				if((i+1)%4==0){
				    tr+="</tr>";
					$("table").append(tr);
					tr='<tr>';
				}
			}
			
			
		}
		
		function downKey(dom){

			var j=$(dom).val();
			switch(j){
				case "CE":nowInit(); break;
				case "C":computeInit();  break;
				case "X": delnumber();  ;break;
				case "/": operator("/"); break;
				case "*": operator("*"); break;
				case "-": operator("-"); break;
				case "+": operator("+"); break;
				case ".": addnumber(j); break;
				case "=": compute();break;
				case "-+": alert("没有写呢!"); break;
				default: addnumber(j);break;
			}
			
			//$("input[type='text']").val(j);
			
		}
		
		
		//加计算符号的函数
		function operator(fu){
			var last=jisun[jisun.length-1];
			if(last=="+"||last=="-"||last=="/"||last=="*"){
				 jisun[jisun.length-1]=fu;
			}else{
				 jisun.push(fu);
			}
			
			$("#show").text(jisun.join().replace(/,/g,""));
				
		
		}
		//添加数字的函数
		function addnumber(num){
		
			var value1=$("input[type='text']").val();
			var last=jisun[jisun.length-1]; //判断最后一个是不是符号
			
			if(last=="+"||last=="-"||last=="/"||last=="*"){
				
				jisun.push("0");
				value1="0";
			}
			
			if(num=="."&&value1.indexOf(".")>0){  //如果有点了则不加入
				return;
			}
			if(value1=="0"&&num!="."){
				jisun[jisun.length-1]=num;
			}
			else{
				jisun[jisun.length-1]=jisun[jisun.length-1]+num;
			}
			
			$("input[type='text']").val(jisun[jisun.length-1]);
			
		}
		
		//计算式初始化的方法
		function computeInit(){
			jisun=["0"];
			$("input[type='text']").val("0");
			$("#show").text("");
		}
		
		//计算的函数
		function compute(){
		   var com=jisun.join();
		   var jieguo=eval(com.replace(/[,]/g,""));
		   $("input[type='text']").val(jieguo);
		   jisun=[jieguo+""];
		   $("#show").text("");
		}
		
		//当前数组归0的函数
		function nowInit(){
			
			jisun[jisun.length-1]="0";
			 $("input[type='text']").val("0");
			
		}
		
		
		//删除数字的函数
		function delnumber(){
			var last=jisun[jisun.length-1];
			if(last=="+"||last=="-"||last=="/"||last=="*"||last=="0"){
				return;	
			}
			if(last.length==1){
				jisun[jisun.length-1]="0";
				$("input[type='text']").val("0");
			}else{
				var ll=last.substring(0,last.length-1);
				jisun[jisun.length-1]=ll;
				$("input[type='text']").val(ll);
			}
			
			
		}
		
		
	</script>
</html>

菜鸟Y

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
jquery实现简单计算器源码分享

注意:需自行引入jquery<html> <head> <meta charset="utf-8" /> <title>计算器的实现</title> </head> <style type="text/css"></style> <body> </body>...
复制链接

扫一扫

专栏目录