javascript开发之简单计算器

最新推荐文章于 2024-08-22 14:32:34 发布

FJSAY

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量235

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_15715889/article/details/125459078

版权

javascript 前端服务器

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

下载地址https://download.csdn.net/download/qq_15715889/85772461

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单计算器</title>
		<link rel="stylesheet" type="text/css" href="css/calcdemo.css"/>
		<!--引入脚本-->
		<script src="js/calcdemo.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<script>
		function a1(){
			var ja1=document.getElementById("sz1").value;
			var ja2=document.getElementById("sz2").value;
			ja1=parseFloat(ja1);ja2=parseFloat(ja2);
			var ja=ja1+ja2;
			document.getElementById("j").value=ja;
		}
		function a2(){
			var ja1=document.getElementById("sz1").value;
			var ja2=document.getElementById("sz2").value;
			ja1=parseFloat(ja1);ja2=parseFloat(ja2);
			var ja=ja1-ja2;
			document.getElementById("j").value=ja;
		}
		function a3(){
			var ja1=document.getElementById("sz1").value;
			var ja2=document.getElementById("sz2").value;
			ja1=parseFloat(ja1);ja2=parseFloat(ja2);
			var ja=ja1*ja2;
			document.getElementById("j").value=ja;
		}
		function a4(){
			var ja1=document.getElementById("sz1").value;
			var ja2=document.getElementById("sz2").value;
			ja1=parseFloat(ja1);ja2=parseFloat(ja2);
			var ja=ja1/ja2;
			document.getElementById("j").value=ja;
		}
	</script>
	<body>
		
		<form action="" method="post">
			<table id="tab" border="1" >
				<tr>
					<td >请输入第一个数：</td>
					<td><input id="sz1" type="text" name="num1" id="num1"/></td>
				</tr>
				<tr>
					<td>请输入第二个数：</td>
					<td><input id="sz2" type="text" name="num2" id="num2"/></td>
				</tr>
				<tr>
					
					<td colspan="2" align="center">
						<input type="button" value="+" onClick="a1()">
						<input type="button" value="-" onClick="a2()">
						<input type="button" value="*" onClick="a3()">
						<input type="button" value="/" onClick="a4()">
					</td>
				</tr>
				
				<tr>
					<td align="right">结果：</td>
					<td><input type="text" id="j" name="result" id="result"/></td>
				</tr>
			</table>
			
		</form>
		
		
	</body>
</html>