Javascript写一个简单的计算器

最新推荐文章于 2022-06-11 19:17:26 发布

lzpwzy

最新推荐文章于 2022-06-11 19:17:26 发布

阅读量335

点赞数

分类专栏： JavaScript笔记

本文链接：https://blog.youkuaiyun.com/lzpzwy/article/details/80072688

版权

JavaScript笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简易网页版计算器。该计算器能够进行基本的数学运算，如加、减、乘、除，并通过前端技术实现了良好的用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的网页</title>
		<style>
		#tab1{
			width: 300px;
			background-color: pink;
			padding: 20px;
			}
		</style>
		<script>
		/*	//var a = new Date();
			//alert(a);
			console.log(typeof a);//判断值的类型
			/*
			 * 定义两数相加的方法
			 * .trim前后两端空格
			 */
			
			//自定义函数传参
		function calculate(op){
			//将传进来的值去空格（是两端空格）；
			var cal=op.value.trim();
			//获取到num1的值并去掉空格
			var num1=document.getElementById("num1").value.trim();
			//获取到num2的值并去掉空格		
			var num2=document.getElementById("num2").value.trim();
				//判断值的长度
				if(num1.length==0||num2.length==0){
					alert("不能为空");
					return;
				}
				//判断是不是数字
				if(isNaN(num1) || isNaN(num2)){
					alert("不是数字");
					return;
				}
				
				var result;
				switch(cal){//将传进来的值进行匹配
					case '+':
					result=parseFloat(num1)+parseFloat(num2);
					break;
					case '-':
					result=parseFloat(num1)-parseFloat(num2);
					break;
					case '×':
					result=parseFloat(num1)*parseFloat(num2);
					break;
					case '÷':
					result=parseFloat(num1)/parseFloat(num2);
					break;
				}
				//将获取到的值赋给result;并将获得的值保留两位小数；
				document.getElementById("result").value=result.toFixed(2);	
		}
			
		</script>
	</head>
	<body>
	<table id="tab1" >
	<tr><th colspan="4">计算器</th></tr>
	<tr>
		<th>第一个数:</th>
		<td colspan="3"><input id="num1" /></td>
	</tr>
	<tr>
		<th>第二个数:</th>
		<td colspan="3"><input id="num2"/></td>
	</tr>
	<tr>
		<td ><input type="button" value="+" οnclick="calculate(this)"/></td>
		<td ><input type="button" value="-" οnclick="calculate(this)"/></td>
		<td ><input type="button" value="×" οnclick="calculate(this)"/></td>
		<td ><input type="button" value="÷" οnclick="calculate(this)"/></td>
	</tr>
	<tr>
		<th>结    果:</th>
		<td colspan="3"><input id="result"/></td>
	</tr>
	</table>
	</body>
</html>