WEB2.0 homework04实现简单计算器

.ZZZ.

于 2020-10-10 21:36:05 发布

阅读量134

点赞数

分类专栏： web 文章标签： Javascript

本文链接：https://blog.csdn.net/weixin_43948896/article/details/102630369

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现简单计算器

- 说明
HTML
css
JavaScript

说明

最近上课老师开始讲JavaScript了，然后第一个作业就是用JavaScript实现一个简单的计算器；我做的这个计算器有一点瑕疵，不能在计算一个等式之后自行清零，不知怎么更改，就是这个版本了。直接贴代码了，会稍稍做一下解释。

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="Calculator.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="Calculator.css">
	<title>Calculator</title>
</head>
<body>    
	<h1>简单计算器</h1>
	<div id="all_block">
		<div id="calculate_area">
			<div id="block"></div>
		</div>    
		<table width="90%" height="75%"  align="center" cellspacing="10">        
			<tr>           
				<td>7</td>           
				<td>8</td>           
				<td>9</td>           
				<td>/</td>        
			</tr>        
			<tr>           
				<td>4</td>           
				<td>5</td>           
				<td>6</td>           
				<td>*</td>        
			</tr>       
			<tr>           
				<td>1</td>           
				<td>2</td>           
				<td>3</td>           
				<td>-</td>        
			</tr>        
			<tr>           
				<td>0</td>           
				<td>.</td>           
				<td id="back">←</td>           
				<td>+</td>        
			</tr>        
			<tr>            
				<td>(</td>            
				<td>)</td>            
				<td id="clear">CE</td>            
				<td id="equal">=</td>        
			</tr>            
		</table>
	</div>
</body>
</html>

注：

table中的cellspacing属性用来规定td之间的距离；
我是把css文件，html文件，JavaScript文件分开写的，所以开头用<script src="Calculator.js" type="text/javascript"></script>链接到JavaScript文件，用<link rel="stylesheet" type="text/css" href="Calculator.css">链接到css文件；
另外，将每一个操作对象看成是表格中的一个小块；

css

h1{    
	text-align: center;    
	color: rgb(54, 63,63);    
	letter-spacing: 0.5em;
}

#all_block{    
	border:3px solid#20ffff;    
	border-radius:30px;    
	width: 300px;    
	height: 450px;    
	background:#b7ffe1;    
	margin: auto;
}

#calculate_area{    
	width: 270px;    
	height: 80px;    
	margin: 0 auto;    
	position: relative;
}

#block{    
	border:2px solid darkslategray;    
	border-radius:15px;    
	width: 270px;    h
	eight: 60px;    
	background: #ffffff;    
	position: absolute;    
	top: 10px;    
	text-align: right;    
	font-size:20px;
}
	
td{    
	border:1px solid darkslategray;    
	border-radius:20px;    
	background-color: rgb(120, 243, 255);    
	width: 50px;    
	height: 50px;    
	text-align: center;
}

注：

border:3px solid #20ffff;和border-radius:30px;语句使得边框呈现圆角；

JavaScript

var str=null;
var block=null;
var equal=null;
var clear=null;
var back=null;

window.onload=function(){    
	str=document.getElementsByTagName("td");    
	block=document.getElementById("block");    
	equal=document.getElementById("equal");    
	back=document.getElementById("back");    
	clear=document.getElementById("clear");    
	read_data();
}

function read_data(){    
	for(var i=0;i<str.length;i++){        
		var is_ID=str[i].getAttribute("id");//判断元素是不是id类型        
		if(is_ID){            
			continue;        
		}
		        
		str[i].onclick=function(){        
			block.innerHTML+=this.innerHTML;//将点击的内容显示在屏幕上    
		}
	}
	
    	clear.onclick=function(){        
  		block.innerHTML="";//清空屏幕   
  	}        

	back.onclick=function(){        
		var str=block.innerHTML;        
		block.innerHTML=str.substr(0,str.length-1);//回退    
	}        

	equal.onclick=function(){        
		block.innerHTML=eval(block.innerHTML);//进行计算    
	}
}}

注:

使用getElementsByTagName()得到HTML中标记为TagName的元素；
使用getElementById()得到HTML中标记为 id 的元素；
使用getAttribute()方法把参数的各种属性的值查询出来；
使用 innerHTML 写入 HTML 元素；
使用substr()函数提取字符串片段，其中第二个参数规定被提取部分的长度；
使用eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

.ZZZ.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB2.0 homework04实现简单计算器

实现简单计算器说明HTMLcssJavaScript说明最近上课老师开始讲JavaScript了，然后第一个作业就是用JavaScript实现一个简单的计算器；我做的这个计算器有一点瑕疵，不能在计算一个等式之后自行清零，不知怎么更改，就是这个版本了。直接贴代码了，会稍稍做一下解释。HTML<!DOCTYPE html><html><head> &l...
复制链接

扫一扫