2021.5.8 复习

最新推荐文章于 2024-04-29 08:12:27 发布

景抓马

最新推荐文章于 2024-04-29 08:12:27 发布

阅读量61

点赞数

分类专栏： Java Script

本文链接：https://blog.csdn.net/JINGMaNong/article/details/116544569

版权

Java Script 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

制作一个计算器
功能：简单的运算

html构建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器制作</title>
		<link rel="stylesheet" href="01.jisuanjicss.css"; />
		<script src="03.jisuanji js.js"></script>
	</head>		
	<body>
		<center>
		<table>
			
			<tr>
				<td colspan="4">
					<img src="imgs/tubiao.PNG">
					计算器
					<span>
						<input  type="button" value="-" />
						<input  type="button" value="□" />
						<input  type="button"  value="x" onclick="closeapp()"; />
					</span>
				</td>
			</tr>
			<tr>
				<td colspan="4">

					<a href="#">查看</a>
					<a href="#">编辑</a>
					<a href="#">帮助</a>
				</td>
			</tr>
			<tr>
				<td colspan="4"> <input  id="inp" type="text" value="0" readonly="readonly"/> </td>
			</tr>
			<tr>
				<td><input class="inp" type="button" value="1" onclick="Input('1')"; /></td>
				<td><input  class="inp"  type="button" value="2" onclick="Input('2')"; /></td>
				<td><input  class="inp" type="button" value="3" onclick="Input('3')";/></td>
				<td><input  class="inp" type="button" id="op" value="+" onclick="getop('+')";/></td>
			</tr>
			<tr>
				<td> <input class="inp"  type="button" value="4" onclick="Input('4')";/> </td>
				<td> <input  class="inp" type="button" value="5" onclick="Input('5')";/> </td>
				<td> <input  class="inp" type="button" value="6" onclick="Input('6')";/> </td>
				<td> <input  class="inp" type="button" id="op" value="-" onclick="getop('-')";/> </td>
			</tr>
			<tr>
				<td> <input class="inp"  type="button" value="7" onclick="Input('7')";/> </td>
				<td> <input  class="inp" type="button" value="8" onclick="Input('8')";/> </td>
				<td> <input class="inp"  type="button" value="9" onclick="Input('9')";/> </td>
				<td> <input  class="inp" type="button" id="op" value="*" onclick="getop('*')";/> </td>
			</tr>
			<tr>
				<td> <input  class="inp" type="button" value="0" onclick="Input('0')";/> </td>
				<td> <input  class="inp" type="button" id="src" value="C" onclick="clearnum()"/> </td>
				<td> <input  class="inp" type="button" id="src" value="/" onclick="getop('/')";/> </td>
				<td> <input  class="inp" type="button" id="op" value="=" onclick="getres()";/> </td>
			</tr>
		</table>
		</center>
	</body>
</html>

css修饰

div{
	width: 300px;
	height: 300px;
	text-align: center;
}
			
table{
	width: 280px;
	height: 320px;
	background-color: pink;
	border: 5px solid red
				
}
span{
				
	float: right;
}
a{
	font-size: 15px;
	color: black;
	text-decoration: none;
}
			
#inp{
	width: 260px;
	height: 40px;
	font-size: 30px;
	text-align: right;
}
			
.inp{
	width: 60px;
	height: 50px;
	font-size:30px;
}
#op{
	color: blue;	
}
#src{
	color: red;

java script 实现功能

	var num1=0;  //保存第一个运算数字的变量
	var num2=0;  //保存第二个运算数字的变量
	var oper=null; //保存运算符号的变量
function closeapp(){
	var flag=window.confirm("确定要关闭吗");
	if(flag){
	//关闭页面
	}
	window.close();
}
			
	//输入数字
function Input(num){
	//得到文本框对象
	var insptextobj=document.getElementById("inp");
	//得到文本框中的数据值
	var textvalue=insptextobj.value;
	//判断文本框中的数据值是否为0
	if( textvalue=="0"){
	//输入的数字传给了文本框
		insptextobj.value=num;
	}else{
		//注意：从文本框中得到的是字符串
		insptextobj.value=textvalue+num;
	}
}
	//得到运算符号
function getop(op){
	//得到文本框中的运算数字，并转换成数字类型保存
	var insptextobj=document.getElementById("inp");
	var textvalue=insptextobj.value;
	num1=textvalue*1
	//将文本框中的数字值置为0，方便输入下一个运算数字
	insptextobj.value="0";
	//保存运算符号
	oper=op;
}
	//得到计算结果
function getres(){
	//得到文本框中的运算数字，并转换成数字类型保存
	var insptextobj=document.getElementById("inp");
	var textvalue=insptextobj.value;
	num2=textvalue*1
	//判断运算符号，计算结果保存
	var res=0;  //保存计算结果的变量
	//判断输入的运算符
	switch(oper){
		case"+":res=num1+num2;break;
		case"-":res=num1-num2;break;
		case"*":res=num1*num2;break;
		case"/":if(num2==0){
		alert("除数不能为0，请重新输入")
		insptextobj.value="0";
		}else{
			res=num1/num2;
		}
			break;
	}
		//将计算结果设置到文本框中
			insptextobj.value=res;
}
		//清除
function clearnum(){
	var insptextobj=document.getElementById("inp");
	insptextobj.value="0"; 
	num1=0;
	oper=null;
	num2=0;
}

景抓马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.5.8 复习

制作一个计算器功能：简单的运算html构建<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算器制作</title> <link rel="stylesheet" href="01.jisuanjicss.css"; /> <script src="03.jisuanji js.js"></script>
复制链接

扫一扫

专栏目录