html+css+js实现简易计算器

飞翔的牛仔

已于 2022-05-29 16:25:11 修改

阅读量1.3w

点赞数 36

文章标签： js css javascript

于 2021-05-02 14:59:22 首次发布

本文链接：https://blog.csdn.net/weixin_45118138/article/details/116353666

版权

使用JavaScript制作一个简单的计算器

直接看效果，这个计算器可以实现简单的加减乘除

1、首先编辑HTML样式，把计算机上的按键全部打印出来

可以显示出以下结果

2、添加css样式

先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值

3、编写js代码

写一个for循环，不断接收a点击事件。
编写点击result，点击清零。

3. 点击数字，获取num1和num2的值。

4.获取按键加减乘除，记录下符号

5.点击 “=” ，计算结果

4、最后，附上完整源码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>计算器</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: #333;
		}
		
		.box{
			width: 300px;
			height: 440px;
			background-color: yellow;
			margin: 100px auto;
		}
		.box h2{
			line-height: 80px;
			height: 80px;
			background-color: #000000;
			color: #FFFFFF;
			text-align: center;
		}
		.box a{
			display: block;
			width: 73px;
			height: 73px;
			line-height: 73px;
			text-align: center;
			background-color: #111;
			color: #FFFFFF;
			border: 1px solid #F0F8FF;
			float: left;
			cursor:pointer;
		}
		.box a:hover{
			background-color:#333333;
			color: #FFFF00;
		}
		.box .sp{
			width: 148px;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2 id="result">结果</h2>
		<a class="sp">AC</a>
		<a class="sp">/</a>
		<a>7</a>
		<a>8</a>
		<a>9</a>
		<a>X</a>
		
		<a>4</a>
		<a>5</a>
		<a>6</a>
		<a>-</a>
		
		<a>1</a>
		<a>2</a>
		<a>3</a>
		<a>+</a>
		
		<a>0</a>
		<a>.</a>
		<a class="sp">=</a>
		
	</div>
	
	<script type="text/javascript">
		window.onload = function(){
			var a_list = document.getElementsByTagName("a");
			var result = document.getElementById("result");
			var fu = "";
			var num1 = "";
			var num2 = "";
			for(var i=0; i<a_list.length; i++){
				a_list[i].onclick = function(){
					// alert(this.innerHTML);
					var key_value = this.innerHTML;
					switch(key_value){
						case "+":
							fu = "+";
							break;
						case "-":
							fu = "-";
							break;
						case "X":
							fu = "X";
							break;
						case "/":
							fu = "/"
							break;
						case "=":
							var n1 = parseFloat(num1);
							var n2 = parseFloat(num2);
							switch(fu){
								case "+":
									result.innerHTML = n1 + n2;
									break;
								case "-":
									result.innerHTML = n1 - n2;
									break;
								case "X":
									result.innerHTML = n1 * n2;
									break;
								case "/":
									result.innerHTML = n1 / n2;
									break;
							}
							break;
						case "AC":
							result.innerHTML = "0";
							fu = "";
							num1 = "";
							num2 = "";
							break;
						default:
							if (fu == "") {
								num1 = num1 += this.innerHTML;
								result.innerHTML = num1;
							} else{
								num2 = num2 += this.innerHTML;
								result.innerHTML = num2;
							}
							break;
					}
				}
			}
		}
	</script>
</body>
</html>

结语：创作不易，麻烦收藏和关注一下！！&( ^___^ )

（即是对作者的支持，也方便自己以后查找，感谢收藏和关注）

以后也会持续更新工作学习中的技术、经验

其它相关文章：

ajxs实现移动端聊天机器人

飞翔的牛仔

关注

36
点赞
踩
207

收藏

觉得还不错? 一键收藏
3
评论
html+css+js实现简易计算器

使用JavaScript制作一个简单的计算器直接看效果，这个计算器可以实现简单的加减乘除1、首先编辑HTML样式，把计算机上的按键全部打印出来可以显示出以下结果2、添加css样式先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值3、编写js代码写一个for循环，不断接收a点击事件。编写点击result，点击清零。 3. 点击数字，获取num1和num2的值。 4.获取按键加减乘除，记录下符号 5....
复制链接

扫一扫