JavaScript实现计算器

最新推荐文章于 2021-04-26 22:00:10 发布
最新推荐文章于 2021-04-26 22:00:10 发布
阅读量188 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MAX_YanBangbang/article/details/99782214
版权

计算器原理

首先需要将计算器的框架搭出来

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin-top: 60px;
			}

			input {
				width: 300px;
				height: 40px;
				font-size: 30px;
			}

			input:disabled {
				background: plum;
				border-style: none;
				height: 90px;
				font-size: 80px;
				font-weight: bold;
			}

			td {
				width: 75px;
				height: 80px;
				font-size: 40px;
				font-weight: 600;
				text-align: center;
			}

			td:hover {
				background: paleturquoise;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<center>
			<input type="text" name="" id="show" value="0" disabled="disabled" />
		</center>
		<table border="1" cellspacing="0" cellpadding="" width="300px" height="400px" align="center">
			<tr>
				<td id="clear">C</td>
				<td id="del" style="font-size:25px ;">退格</td>
				<td>%</td>
				<td class="ysf">/</td>
			</tr>
			<tr>
				<td class="num">7</td>
				<td class="num">8</td>
				<td class="num">9</td>
				<td class="ysf">*</td>
			</tr>
			<tr>
				<td class="num">4</td>
				<td class="num">5</td>
				<td class="num">6</td>
				<td class="ysf">+</td>
			</tr>
			<tr>
				<td class="num">1</td>
				<td class="num">2</td>
				<td class="num">3</td>
				<td class="ysf">-</td>
			</tr>
			<tr>
				<td colspan="2" class="num">0</td>

				<td class="num">.</td>
				<td id="result">=</td>
			</tr>
		</table>
	</body>

实现基本的运算

<script type="text/javascript">
		//获取显示框
		var show_value = document.getElementById("show");
		//获取归零键
		var clear = document.getElementById("clear");
		var del = document.getElementById("del");
		var result = document.getElementById("result")
		var nums = document.getElementsByClassName("num");
		//定义三个变量来保存连个运算数和一个运算符
		var numValue1 = '';
		var numValue2 = '';
		var ysf = '';
		//给所有的数字绑定点击事件
		for (var i = 0; i < nums.length; i++) {
			nums[i].onclick = function() {
				numValue1 += this.innerText;
				// if(numValue1.contains('.')&&this.innerText.contains('.')){
				// 	show_value.value = numValue1;
				// }else{
				// 	numValue1 += this.innerText;
				// 	show_value.value = numValue1;
				// }
				
				//实现小数点只能出现一次
				if(numValue1.contains('.')&&this.innerText.contains('.')){
					show_value.value = numValue1;
				}else{
					numValue1 += this.innerText;
					show_value.value = numValue1;
				}
			}
		}
		//获取所有的操作符
		var operate = document.getElementsByClassName("ysf");
		//给所有的运算符绑定点击事件
		for (var i = 0; i < operate.length; i++) {
			operate[i].onclick = function() {
				if (numValue2 == '') {
					numValue2 = numValue1;
					numValue1 = '';
					//保存运算符
					ysf = this.innerText;
				}else{
					// show_value.value=numValue2;
					numValue2=numValue2.toString();

					//numValue1=numValue1.toString();
					
					showFun();
					ysf = this.innerText;
					
				}

			}
		}
		//给等号绑定点击事件
		result.onclick = function() {

			showFun();
		}

		function showFun() {
			//数据类型转换
			var one = new Number(numValue2);
			var two = new Number(numValue1);
			var r = null;
			switch (ysf) {
				case '+':
					r = one + two;
					break;
				case '-':
					r = one - two;
					break;
				case '*':
					r = one * two;
					break;
				case '/':
					if (two == 0) {
						alert("除数不能为0")
						numValue1 = '';
						numValue2 = '';
						ysf = '';
						r = 0;

					} else {
						r = one / two;
					}
					break;
			}
			//完成四则运算
			
			numValue2 = new Number(r).toFixed(5);
			numValue1 = '';
			show_value.value = numValue2;
		}
		//归零
		clear.onclick = function() {
			numValue1 = '';
			numValue2 = '';
			ysf = '';
			show_value.value = 0;
		}
		//退格
		del.onclick = function() {
			if (numValue1.length > 1) {
				numValue1 = numValue1.substring(0, numValue1.length - 1);
			} else if (numValue1.length == 1) {
				numValue1 = '0';
				show_value.value = numValue1;
			}

		}
	</script>
</html>
棒棒奥特曼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现计算器功能
11-21
本文实例为大家分享了javascript实现计算器功能的具体代码，供大家参考，具体内容如下 问题描述： 1、除法操作时，如果被除数为0，则结果为0 2、结果如果为小数，最多保留小数点后两位，如2 / 3 =0.67（显示0.67），1 / 2 = 0.5（显示0.5） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度笔试0329</title> <style type="text/css"> body, ul, li,select { margin: 0; padding: 0; box-si
javascript实现计算器
anan的博客
01-05 9339
       首先说明一下为什么发这篇文章，因为今天早晨看到一篇类似的文章，我看了他的源码，发现实在太啰嗦了，于是便准备把这篇文章发出来！        其实使用javascript的函数来实现计算器可以说是练习javascript的一个好方法，虽然我的代码可...
结合 HTML、CSS，基于原生 JavaScript 实现计算器
01-06
结合 HTML、CSS，基于原生 JavaScript 实现计算器 要求界面、按键设计合理、 美观，除基本计算功能外，需实现进制转换、结果存储、取存计算的功能。实现长度转换。实现时间计算
纯JavaScript实现计算器
11-15
用JavaScript实现一个运算式的计算 a. 支持加，减，乘，除（+, -, *, /) b. 支持输入合法的数字，包括小数，不考虑非法输入和数字越界（0-9, .） sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 ...
用HTML CSS JavaScript实现计算器的设计.pdf
最新发布
01-03
总的来说，这个HTML+CSS+JavaScript实现的计算器是一个典型的前端开发实例，它结合了网页的结构、样式和动态功能，展示了Web开发中的基础知识和技术。通过这种方式，用户可以在浏览器中直接使用一个功能完备的计算器...
JavaScript实现的简单的计算器（web）
04-29
JavaScript实现的简单的计算器，这是参考我同学的代码实现，希望能够帮助到你
javascript计算器
01-03
需要用 JavaScript 编写一个简单的计算器。•实现一个类似Windows附件中的标准型计算器的基本功能； •实现加，减，乘，除，取余，开平方，求倒数这七种基本运算（可以自行决定支持更多的运算类型）； •支持正负号，小数点输入；实现Backspace, CE, C键的功能； •要求实现行为与结构的分离，页面的XHTML文件中不要出现事件响应句柄（即onclick等），全部计算在JavaScript文件(.js)中完成； •要求该 JavaScript 程序在IE6/8，Firefox下测试通过，运行中没有错误/警告/异常；老规矩，程序的各个文件同样要通过各种认证； •需用到的技术有：事件与事件响应，DOM 操作
基于javascript实现简单计算器功能
11-22
本文实例为大家介绍javascript实现简单计算器功能的详细代码，分享给大家供大家参考，具体内容如下 效果图： 实现代码： <html> <head> [removed] function calc(event){ // test //window.alert(event.value); var val = new String(event.value); // clear space val = val.trim(); var res = document.getEle
使用HTML+JavaScript实现的网页计算器
11-12
使用html，JavaScript和css制作的简单科学计算器，无明显bug
javascript 实现简单计算器
weixin_51008360的博客
04-15 1370
文章目录css代码html代码js代码 效果图： css代码 <style type="text/css"> div{ margin: auto; border: 1px solid orange; overflow: hidden; font-size: 30px; } div:active{ background-color: pink; } #div1{ width: 700px; } #div2{
JavaScript编写实现简单的计算器
weixin_45738756的博客
11-22 1507
JS/jQuery编写一个简单的计算器 HTML <div class="box"> <input type="text" id="ipt" value="" maxlength="20" placeholder="请输入...ヾ(o◕∀◕)ﾉヾ"> <input type="button" value="0" onclick="inpt('0')"> <input type="button" value="1" onclick="inpt('1')"&
javascript实现简单计算器
SHINE_SUNNY1的博客
08-09 2147
javascript实现简单计算器这个计算机主要通过二维数组将其存在一个数组中，再通过函数控制显示出的效果，有些键位占着两列，通过colspan函数合并两列，先将整个计算机的外部样式设计出来，主要实现代码以及效果图如下所示：var btns=[ [ {text:"AC",id:"btn_C",value:"c",col:1},
用javascript实现简单计算器
LittleTreeX的博客
12-09 3710
这是一个简单计算器的实现。可以实现简单的加，减，乘，除功能，用户按下“←”按钮，删除当前算术表达式最后一个字符，并更新显示,用户按下“CE”按钮，清除当前算术表达式,如果算术表达式非法，弹出警告框提醒用户，并终止计算. 这是HTML代码：     Calculator                             简单计算器              
用JavaScript实现一个简单的计算器
zysp158的博客
04-26 278
Html文件的代码 <!DOCTYPE html> <html> <head> <title>Welcome Online Calculator!</title> <link rel="stylesheet" type="text/css" href="calculator.css"> <script type="text/javascript" src="calculator.js"></script&g
JavaScript实现计算器运算网页
05-30
可以使用HTML、CSS和JavaScript来创建一个计算器运算网页。以下是一个简单的实现： HTML代码： ``` ()">C ()">← ('+')">+ ('-')">- ('*')">* ('/')">/ ()">= ('7')">7 ('8')">8 ('9')">9 ('4')">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值