网页版简易计算器

最新推荐文章于 2021-08-04 02:10:26 发布
最新推荐文章于 2021-08-04 02:10:26 发布
阅读量1.6k 收藏
点赞数
分类专栏： Java基础 分享 JavaScript 文章标签： 网页版简易计算器 html、css、js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_Engineer/article/details/100605644
版权
分享 同时被 3 个专栏收录
56 篇文章 0 订阅
订阅专栏
Java基础
55 篇文章 0 订阅
订阅专栏
JavaScript
3 篇文章 0 订阅
订阅专栏

网页版简易计算器

所用知识：html、css、js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			input {
				width: 500px;
				height: 100px;
				font-size: 80px;
				background-color: aliceblue;
			}

			td {
				font-size: 40px;
				text-align: center;
			}

			td:hover {
				background-color: chartreuse;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<center>
			<input type="text" id="show" value="0" disabled="disabled" />
		</center>

		<table border="1" cellspacing="0" cellpadding="" width="500px" height="400px" align="center">
			<tr>
				<td id="guiling">C</td>
				<td width="30%" id="tuige">退格</td>
				<td class="ysf">%</td>
				<td class="ysf">/</td>
			</tr>
			<tr>
				<td class="nums">7</td>
				<td class="nums">8</td>
				<td class="nums">9</td>
				<td class="ysf">*</td>
			</tr>
			<tr>
				<td class="nums">4</td>
				<td class="nums">5</td>
				<td class="nums">6</td>
				<td class="ysf">-</td>
			</tr>
			<tr>
				<td class="nums">1</td>
				<td class="nums">2</td>
				<td class="nums">3</td>
				<td class="ysf">+</td>
			</tr>
			<tr>
				<td colspan="2" class="nums">0</td>
				<td class="nums">.</td>
				<td id="denghao">=</td>

			</tr>
		</table>
	</body>
	<script type="text/javascript">
		var numValue1 = '';
		var numValue2 = '';
		var ysfValue = '';
		var flag = false;

		var show = document.getElementById("show");
		var tuige = document.getElementById("tuige");
		var guiling = document.getElementById("guiling");
		var denghao = document.getElementById("denghao");
		var nums = document.getElementsByClassName("nums");
		var ysfs = document.getElementsByClassName("ysf")
		for (var i = 0; i < nums.length; i++) {
			nums[i].onclick = function() {
				if (flag) {
					numValue1 = '';
					numValue2 = '';
					ysfValue = '';
					flag = false;
				}
				var num = this.innerText;
				if ((num == '.') && (numValue1.indexOf('.') == -1)) {
					numValue1 += num;
					show.value = numValue1;
				} else if ((num == '0') && (numValue1.indexOf('.') != -1)) {
					numValue1 = show.value;
					numValue1 += num;
					show.value = numValue1;
				} else if (num != '.') {
					numValue1 += num;
					show.value = numValue1 * 1;
				}
			}
		}
		for (var i = 0; i < ysfs.length; i++) {
			ysfs[i].onclick = function() {
				if(show.value.substring(1).indexOf("+")!=-1||show.value.substring(1).indexOf("-")!=-1||show.value.substring(1).indexOf("*")!=-1||show.value.substring(1).indexOf("/")!=-1||show.value.substring(1).indexOf("%")!=-1&&this.innerText=='%'){
					return;
				}
				if (flag) {
					if(this.innerText=='%'){
						numValue1=numValue2;
						numValue2='';
					}
					flag = false;
				}
				if(numValue1==''){
					numValue1='0';
				}
				if (numValue2 == '') {
					if(this.innerText=='%'){
						numValue1 = numValue1/100;
					}
					numValue2 = numValue1;
					numValue1 = '';
					ysfValue = this.innerText;
					show.value += ysfValue;
				}else{
					if(this.innerText=='%'){
						numValue1 = numValue1/100;
					}else{
						yunsuan();
						numValue1 = '';
						ysfValue = this.innerText;
					}
					show.value += this.innerText;
				}
			}
		}
		denghao.onclick = function() {
			if(numValue1!=''&&numValue2!=''||ysfValue=='%'){
				yunsuan();
				flag = true;
			}
		}

		function yunsuan() {
			var num1 = Number(numValue2);
			var num2 = Number(numValue1);
			var r = '';
			numValue1 = '0';
			switch (ysfValue) {
				case '+':
					r = num1 + num2;
					break;
				case '-':
					r = num1 - num2;
					break;
				case '*':
					r = num1 * num2;
					numValue1 = '1';
					break;
				case '/':
					if (num2 != 0) {
						r = num1 / num2;
					} else {
						numValue1 = '';
						numValue2 = '';
						ysfValue = '';
						alert("除数不能为0！");
						r = '0';
					}
					numValue1 = '1';
					break;
				case '%':
					r = num1;
					break;
			}
			numValue2 = Number(r).toFixed(9) * 1;
			show.value = numValue2;
		}
		guiling.onclick = function() {
			numValue1 = '';
			numValue2 = '';
			ysfValue = '';
			show.value = '0';
		}
		tuige.onclick = function() {
			if(!flag){
				if(show.value.substring(1).indexOf("+")!=-1||show.value.substring(1).indexOf("-")!=-1||show.value.substring(1).indexOf("*")!=-1||show.value.substring(1).indexOf("/")!=-1||show.value.substring(1).indexOf("%")!=-1){
					numValue1 = numValue2;
					numValue2 = '';
					ysfValue='';
					show.value=numValue1;
				}else{
					if (numValue1.length > 1) {
						numValue1 = numValue1.substring(0, numValue1.length - 1);
						show.value = numValue1;
					} else {
						numValue1 = '0';
						show.value = numValue1;
					}
				}
			}
		}
	</script>
</html>

效果图

在这里插入图片描述

y_Engineer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易版网页计算器
笑语轻柔
09-11 1536
需求： 通过用鼠标点击数字按钮和运算符按钮，实现现实中计算器的功能，能够做加减乘除及取余运算。并能够清零和取消上一次错误输入。 1、简单界面的实现：            首先建一个表单，在表单里插入一个表格。此界面的实现可以通过代码框中通过用表单与表格各标签功能实现，也可以在设计框中通过插入的方式实现。 2、鼠标点击数字键在窗口中相应数字显现的实现：          在每一
网页版简易计算器，仅用用js基础（do-while、switch等）实现
小伟的博客
03-04 478
目的： 可以实现简单的加减乘除操作，当选择退出的时候可以退出，否则不退出。 思路： 1、用户首先需要输入要进行的操作，并对操作进行判断； 2、使用if，当判断不等于“退出”的时候，用户才可以输入数据； 3、因为主要针对已设置的一系列特定值的选项时，故使用switch； 4、当实现以上情况后，发现无法重复操作，每进行一次操作后，便直接退出。故使用do-while 进行2次判断。 代码实现： <!DOCTYPE html> <html lang="en"> <head>
简易网页版计算器
weixin_43854413的博客
06-24 107
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
javaEE网页版简易计算器（源码）
06-29
在本项目中，"javaEE网页版简易计算器（源码）"是一个基于JavaEE平台的Web应用程序，旨在实现一个简单的在线计算器，支持2位数之间的基本数学运算，包括加法、减法、乘法和除法。这个项目利用了MyEclipse作为开发...
js网页版计算器的简单实现
10-27
### JS网页版计算器的简单实现 #### 一、概述 本文档将详细介绍一个简单的JS网页版计算器的实现方法。此计算器能够完成基本的数学运算，包括加法、减法、乘法、除法以及数字输入等功能。对于学习前端开发尤其是...
简易计算器源码.zip
01-06
【简易计算器源码.zip】这个压缩包文件包含了一个新手友好的简易计算器的Web前端源代码。这个项目非常适合初学者去了解和学习Web前端开发的基本原理和实践操作。下面，我们将详细探讨这个计算器项目的相关知识点。 ...
简易版计算器.zip
04-17
在这个简易计算器项目中，JavaScript代码将负责处理用户的输入、执行计算逻辑以及更新显示结果。 在实现计算器的过程中，开发者通常会创建一个HTML结构来模拟计算器的界面，包括数字按钮、运算符按钮、清除按钮和...
Y加计算器 Y＋求解器 雷诺数计算器
04-27
用于计算雷诺数，网格边界第一层高度
y+和湍流计算器
06-06
流体计算，湍流和第一层网格高度计算器。绝对好用，是科研流体计算的一把利器
yplus快速计算
03-07
fluent设计必备软件，快速计算y+，能够很方便的进行数值模拟计算。
网页计算器
03-18
这是个用html5 + css3 + js写的网页计算器，支持括号运算，支持键盘输入、删除键删除输入，按键盘时计算器按键发亮
计算器Calculate
11-28
Android计算器源代码，可供学习交流，可直接用到工程中，高质量代码封装，工程完整。
fluent计算 简易时间步长计算器
06-11
fluent计算中，尤其是vof等多相流计算中，需要用到的建议时间不长计算器
css做计算器,CSS3 纯CSS计算器
weixin_36269334的博客
08-04 442
CSS语言：CSSSCSS确定:root {--step: 14px;--bg: #666;--color: #fff;--color-scale: #fff;--bg-scale: #111;--bg-checked: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7));--bg-unche...
html css制作计算器,使用html+css+js实现简易计算器
weixin_34708196的博客
06-09 1111
使用html+css+js实现简易计算器，效果图如下：html代码如下：1 2 3 4 5 6 7 calculator8 9 10 document11 12 13 14 15 16 17 18 19 20 21 ...
计算器完整版html+css+js
潮客
10-31 1528
jisuanqi.html                 #text1{ border-radius:10px; border-right:3px solid darkviolet; border-bottom:5px solid royalblue; width:413px;  text-align:center; margin:0 auto;  h
web网页设计简易计算器
最新发布
05-31
好的，以下是一个简易的 web 网页设计计算器的示例代码： ```html <!DOCTYPE html> <html> <head> <title>简易计算器</title> <style> input[type="button"] { width: 50px; height: 50px; font-size: 20px; margin: 5px; } </style> </head> <body> <h1>简易计算器</h1> <input type="text" id="display" disabled /><br /> <input type="button" value="1" onclick="addToDisplay('1')" /> <input type="button" value="2" onclick="addToDisplay('2')" /> <input type="button" value="3" onclick="addToDisplay('3')" /> <input type="button" value="+" onclick="addToDisplay('+')" /><br /> <input type="button" value="4" onclick="addToDisplay('4')" /> <input type="button" value="5" onclick="addToDisplay('5')" /> <input type="button" value="6" onclick="addToDisplay('6')" /> <input type="button" value="-" onclick="addToDisplay('-')" /><br /> <input type="button" value="7" onclick="addToDisplay('7')" /> <input type="button" value="8" onclick="addToDisplay('8')" /> <input type="button" value="9" onclick="addToDisplay('9')" /> <input type="button" value="*" onclick="addToDisplay('*')" /><br /> <input type="button" value="0" onclick="addToDisplay('0')" /> <input type="button" value="." onclick="addToDisplay('.')" /> <input type="button" value="=" onclick="calculate()" /> <input type="button" value="/" onclick="addToDisplay('/')" /><br /> <input type="button" value="C" onclick="clearDisplay()" /> <script> function addToDisplay(value) { document.getElementById("display").value += value; } function clearDisplay() { document.getElementById("display").value = ""; } function calculate() { var expression = document.getElementById("display").value; var result = eval(expression); document.getElementById("display").value = result; } </script> </body> </html> ``` 这是一个简单的 HTML 页面，其中包含一个输入框和一些按钮用于输入数字和操作符。JavaScript 代码实现了将按钮的值添加到输入框的功能，以及计算表达式并在输入框中显示结果的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值