仿计算器笔记

weixin_45318105

于 2020-05-29 22:07:48 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/weixin_45318105/article/details/106392190

版权

计算器面板的实现

index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="calc.css">
	<script type="text/javascript" src="calc.js"></script>
</head>
<body>
	<div id="div1">
		<div id="div2">
			<input type="text" name="" id=""/>
		</div>
		<div id="div3">
			<input type="button" value="c" name="" id=""/>
			<input type="button" value="←" name="" id=""/>
			<input type="button" value="+/-" name="" id=""/>
			<input type="button" value="/" name="" id=""/>
			<input type="button" value="1" name="" id=""/>
			<input type="button" value="2" name="" id=""/>
			<input type="button" value="3" name="" id=""/>
			<input type="button" value="*" name="" id=""/>
			<input type="button" value="4" name="" id=""/>
			<input type="button" value="5" name="" id=""/>
			<input type="button" value="6" name="" id=""/>
			<input type="button" value="-" name="" id=""/>
			<input type="button" value="7" name="" id=""/>
			<input type="button" value="8" name="" id=""/>
			<input type="button" value="9" name="" id=""/>
			<input type="button" value="+" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="." name="" id=""/>
			<input type="button" value="=" name="" id=""/>
			<input type="button" value="m" name="" id=""/>
		</div>
	</div>
</body>
</html>

calc.css

*{
	margin:0px;
	padding: 0px;
}
div{
	width: 170px;
}
#div1{
	top:60px;
	left:100px;
	position: absolute;
}
input[type="button"]{
	width: 30px;
	margin-right:5px;
}
input[type="text"]{
	width: 148px;
}

面板效果

计算器输入框

输入框初始化(初始化数字为0，禁用键盘输入）

calc.js

function init(){
	var num=document.getElementById("num");
	num.value=0;
	num.disabled="disabled"
}

设置输入框的样式(数字右对齐，背景颜色白色，细边框)

calc.css

input[type="text"]{
	width: 148px;
	text-align:right;
	background-color: #fff;
	border: 1px solid;
}

页面刷新时载入初始化函数

<body onload="init()">

实现文本框中数字1的输入

calc.js

function num_1_click(){
	var num=document.getElementById("num");
	var n=num.value
	n=n+"1";
	document.getElementById("num").value=n*1;
}

引入onclick事件

index.html

<input type="button" value="1" onclick="num_1_click()" name="" id=""/>

对文本框输入实现进行优化，判断点击的按钮是否为数字，实现对应功能模块。

function init(){
	var num=document.getElementById("num");
	num.value=0;
	num.disabled="disabled"
	// var n1=document.getElementById("n1");
	// n1.onclick=function(){

	// }
	// oButton为数组对象
	var oButton=document.getElementsByTagName("input");
	for(var i=0;i<oButton.length;i++){
		oButton[i].onclick=function(){
			if(isNumber(this.value)){
				alert("shuzi");
			}else{
				alert("fei1");
			}
		}
	}
}
function isNumber(n){
	return !isNaN(n);
}

进一步优化，输入前判断文本框内容是否为空或者为“0”，自定义isNull()

function init(){
	var num=document.getElementById("num");
	num.value=0;
	num.disabled="disabled"
	// var n1=document.getElementById("n1");
	// n1.onclick=function(){

	// }
	// oButton为数组对象
	var oButton=document.getElementsByTagName("input");
	for(var i=0;i<oButton.length;i++){
		oButton[i].onclick=function(){
			if(isNumber(this.value)){
				//num.value=(num.value+this.value)*1;
				if(isNull(num.value)){
					num.value=this.value;
				}else{
					num.value=num.value+this.value;
				}
			}else{
				alert("fei1");
			}
		}
	}
}


// 验证文本框是否为空或者0
function isNull(n){
	if(n=="0" || n.length==0){
		return true;
	}else{
		return false;
	}
}

用switch语句对单机非数字的情况进行判断并执行相应功能

function init(){
	var num=document.getElementById("num");
	num.value=0;
	num.disabled="disabled"
	// var n1=document.getElementById("n1");
	// n1.onclick=function(){

	// }
	// oButton为数组对象
	var oButton=document.getElementsByTagName("input");
	for(var i=0;i<oButton.length;i++){
		oButton[i].onclick=function(){
			if(isNumber(this.value)){
				//num.value=(num.value+this.value)*1;
				if(isNull(num.value)){
					num.value=this.value;
				}else{
					num.value=num.value+this.value;
				}
			}else{
				// alert("fei1");
				var btn_num=this.value;
				switch(btn_num){
					case "+":
						alert("+");
						break;
					case "-":
						alert("-");
						break;
					case "*":
						alert("*");
						break;
					case "/":
						alert("/");
						break;
					case ".":
						alert(".");
						break;
					case "←":
						alert("←");
						break;
					case "c":
						alert("c");
						break;
					case "+/-":
						alert("+/-");
						break;
					case "=":
						alert("=");
						break;
					case "m":
						alert("m");
						break;
				}
			}
		}
	}
}

实现加减乘除按键的功能

function init(){
	var num=document.getElementById("num");
	num.value=0;
	num.disabled="disabled"
	// var n1=document.getElementById("n1");
	// n1.onclick=function(){

	// }
	// oButton为数组对象
	var oButton=document.getElementsByTagName("input");
	var btn_num1; //注意定义为全局变量，保存文本框的值
	var fh;// 单击'='时根据fh的值执行不同的运算规则
	for(var i=0;i<oButton.length;i++){
		oButton[i].onclick=function(){
			if(isNumber(this.value)){
				//num.value=(num.value+this.value)*1;
				if(isNull(num.value)){
					num.value=this.value;
				}else{
					num.value=num.value+this.value;
				}
			}else{
				// alert("fei1");
				var btn_num=this.value;
				
				switch(btn_num){
					case "+":
						btn_num1=parseInt(num.value);
						num.value=0;
						fh="+";
						break;
					case "-":
						btn_num1=parseInt(num.value);
						num.value=0;
						fh="-";
						break;
					case "*":
						btn_num1=parseInt(num.value);
						num.value=0;
						fh="*";
						break;
					case "/":
						btn_num1=parseInt(num.value);
						num.value=0;
						fh="/";
						break;
					case ".":
						alert(".");
						break;
					case "←":
						alert("←");
						break;
					case "c":
						alert("c");
						break;
					case "+/-":
						alert("+/-");
						break;
					case "=":
						switch(fh){
							case "+":
								num.value=btn_num1+parseInt(num.value);
								break;
							case "-":
								num.value=btn_num1-parseInt(num.value);
								break;
							case "*":
								num.value=btn_num1*parseInt(num.value);
								break;
							case "/":
							if(parseInt(num.value)==0){
								alert("除数不能为0")
								num.value=0;
							}else{
								num.value=btn_num1/parseInt(num.value);
							}
								break;
						}
						break;
					case "m":
						alert("m");
						break;
				}
			}
		}
	}
}

小数点功能实现

case ".":
	num.value=dec_number(num.value);
	break;

/*小数点*/
function dec_number(n){
	if(n.indexOf(".")==-1){
		n=n+".";
	}
	return n;
}

退位键功能的实现

case "←":
	num.value=back(num.value);

/*退位键*/
function back(n){
	n=n.substr(0,n.length-1);
	if(isNull(n)){
		n="0";
	}
	return n;
}

清屏和正负号

case "c":
    num.value="0";
    break;

case "+/-":
    num.value=sign(num.value);
    break;

/*正负号*/
function sign(n){
	// if(n.indexOf("-")==-1){
	// 	n="-"+n;
	// }else{
	// 	n=n.substr(1,n.length);
	// }
	n=Number(n)*(-1);
	return n;
}

按钮悬浮效果以及文本框内边距

calc.css

input[type="text"]{
	width: 148px;
	text-align:right;
	background-color: #fff;
	border: 1px solid;
	padding-right: 5px;
	box-sizing: border-box;
}

input[type="button"]:hover{
	background-color: yellow;
	border: 1px solid;
}

m键链接效果

新建js/mooc.js

function init_mooc(){
	document.getElementById("imooc").onclick=function(){
		window.location.href="http://www.imooc.com";
	}
}

引入js/mooc.js

<script type="text/javascript" src="js/mooc.js"></script>

初始化引入mooc()

<body onload="init(),init_mooc()">

最终效果

计算器_实现效果

weixin_45318105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿计算器笔记

1.计算器面板的实现index.html<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="calc.css"> <script type="text/javascript" src="calc.js"></script></head><body&
复制链接

扫一扫