javascript 实现简单计算器

已于 2022-05-26 11:28:00 修改
阅读量1.3k 收藏 32
点赞数 4
分类专栏： 前端 文章标签： javascript css css3
于 2021-04-15 15:18:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51008360/article/details/115716072
版权

文章目录

效果图：

在这里插入图片描述

css代码

	body {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #dcf3f3;
	}
	div{
		margin: auto;
		border: 1px solid orange;
		overflow: hidden;
		font-size: 30px;
		border-radius: 10px;
	}
	.div4:active{
		background-color: pink;
	}
	#div1{
		width: 540px;
	}
	#div2{
		width: 100%;
		height: 90px;
	}
	.div3{
		width: 268px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		float: left;
		background-color: #e5eaff;
		
	}
	.div4{
		width: 113px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		float: left;
		margin: 10px;
		border-radius: 50%;
		background-color: #F0FFFF;
	}
	#txt{
		width: 535px;
		height: 60px;
		border: 1px #E5EAFF;
		text-align: right;
		font-size: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f6fffb;
	}
	#txtresult{
		width: 535px;
		height: 30px;
		border: 1px #E5EAFF;
		text-align: right;
		font-size: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f6fffb;
	}
	span{
		display: inline-block;
		width: 100%;
		height: 100%;
        cursor: pointer;
	}

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<link rel="stylesheet" type="text/css" href="./css/Mystyle.css"/>
		<script src="./js/MyStyle.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<input type="text" readonly="readonly" id="txt"  />
				<input type="text" readonly="readonly" name="" id="txtresult"  />
			</div>
			<div class="div3">
				<span id='del'>
					del
				</span>
			</div>
			<div class="div3">
				<span id='clear'>clear</span>
			</div>
			<div class="div4">
				<span id='7'>7</span>
			</div>
			<div class="div4">
				<span id='8'>8</span>
			</div>
			<div class="div4">
				<span id='9'>9</span>
			</div>
			<div class="div4">
				<span id='/'>/</span>
			</div>
			<div class="div4">
				<span id='4'>4</span>
			</div>
			<div class="div4">
				<span id='5'>5</span>
			</div>
			<div class="div4">
				<span id='6'>6</span>
			</div>
			<div class="div4">
				<span id='*'>*</span>
			</div>
			<div class="div4">
				<span id='1'>1</span>
			</div>
			<div class="div4">
				<span id='2'>2</span>
			</div>
			<div class="div4">
				<span id='3'>3</span>
			</div>
			<div class="div4">
				<span id='-'>-</span>
			</div>
			<div class="div4">
				<span id='0'>0</span>
			</div>
			<div class="div4">
				<span id='.'>.</span>
			</div>
			<div class="div4">
				<span id='='>=</span>
			</div>
			<div class="div4">
				<span id='+'>+</span>
			</div>
		</div>
	</body>
</html>

js代码

window.onload = function(){
	var one = document.getElementById('1');
	var two = document.getElementById('2');
	var there = document.getElementById('3');
	var four = document.getElementById('4');
	var fives = document.getElementById('5');
	var six = document.getElementById('6');
	var Seven = document.getElementById('7');
	var eight = document.getElementById('8');
	var nine = document.getElementById('9');
	var zero = document.getElementById('0');
	var point = document.getElementById('.');
	var chu = document.getElementById('/');
	var cheng = document.getElementById('*');
	var jian = document.getElementById('-');
	var jia = document.getElementById('+');
	var del = document.getElementById('del');
	var clear = document.getElementById('clear');
	var result = document.getElementById('txt');
	var denyu = document.getElementById('=');
	var results = document.getElementById('txtresult');
	one.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+1;
	}
	two.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+2;
	}
	there.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+3;
	}
	four.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+4;
	}
	fives.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+5;
	}
	six.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+6;
	}
	Seven.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+7;
	}
	eight.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+8;
	}
	nine.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+9;
	}
	zero.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		result.value = result.value+0;
	}
	point.onclick = function(){
		if(results.value != ''){
			results.value = '';
		}
		//如果用户连续点击运算符，则以最后的为准
		if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){
			result.value = result.value.substring(0,result.value.length-1)+'.';
			return;
		}
		result.value = result.value+'.';
	}
	chu.onclick = function(){
		if(result.value == ''){
			alert('错误！');
			return;
		}
		if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){
			result.value = result.value.substring(0,result.value.length-1)+'/';
			return;
		}
		result.value = result.value+'/';
	}
	cheng.onclick = function(){
		if(result.value == ''){
			alert('错误！');
			return;
		}
		if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){
			result.value = result.value.substring(0,result.value.length-1)+'*';
			return;
		}
		result.value = result.value+'*';
	}
	jian.onclick = function(){
		if(result.value == ''){
			alert('错误！');
			return;
		}
		if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){
			result.value = result.value.substring(0,result.value.length-1)+'-';
			return;
		}
		result.value = result.value+'-';
	}
	jia.onclick = function(){
		if(result.value == ''){
			alert('错误！');
			return;
		}
		if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){
			result.value = result.value.substring(0,result.value.length-1)+'+';
			return;
		}
		result.value = result.value+'+';
	}
	clear.onclick = function(){
		result.value = '';
		results.value = '';
	}
	del.onclick = function(){
		result.value = result.value.substring(0,result.value.length-1);
	}
	denyu.onclick = function(){
		if(result.value == ''){
			alert("温馨提示：请输入操作数！！");
			result.focus();
			return;
		}
		//定义一个变量存储最终结果
		var answer = '';
		//判断
		if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){
			result.focus();
			alert("温馨提示：请输入完整的表达式！！");
			return;
		}
		
		//计算
		var answer = eval(result.value);
		results.value = answer;
		result.value = '';
	}
	
}
努力的xiaotao
关注
  • 4
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript实现的简单的计算器（web）
04-29
JavaScript实现的简单的计算器，这是参考我同学的代码实现，希望能够帮助到你
javascript实现计算器
Pluto.的博客
12-05 296
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .con {
JavaScript实现一个简易的计算器实例代码
05-14
JavaScript实现一个简易的计算器实例代码 JavaScript实现一个简易的计算器实例代码
javascript实现简单计算器
SHINE_SUNNY1的博客
08-09 2130
javascript实现简单计算器这个计算机主要通过二维数组将其存在一个数组中，再通过函数控制显示出的效果，有些键位占着两列，通过colspan函数合并两列，先将整个计算机的外部样式设计出来，主要实现代码以及效果图如下所示：var btns=[ [ {text:"AC",id:"btn_C",value:"c",col:1},
JavaScript版简易计算器
KimSoft's Blog
03-05 3645
在JavaScript版搜索了一下“计算器”，只搜索到三条记录。所以发出来，今天没事写着玩儿的。比较简单，没有什么技术含量和实用价值，只供新手学习，高手看看有没问题，再完善一下。测试环境：IE6 + FireFox1.5下测试通过技术说明：1、documnet.getElementsByTagName的用法2、给HTML对象绑定事件：element.事件名 = 函数名3、eval的用法
JavaScript实现简易计算器小功能
01-21
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> &...
javascript实现简易计算器的代码
10-22
下面小编就为大家带来一篇javascript实现简易计算器的代码小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript实现简易计算器功能
10-14
主要为大家详细介绍了javascript实现简易计算器功能，实现四则运算，小数点，回退，归0等功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现简易计算器
12-11
简易加减乘除计算器，利用表单的value值取值，用原生js实现.可直接复制到编辑器，打开即可运行. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>加减乘除计算器</...
纯JavaScript实现计算器
11-15
用JavaScript实现一个运算式的计算 a. 支持加，减，乘，除（+, -, *, /) b. 支持输入合法的数字，包括小数，不考虑非法输入和数字越界（0-9, .） sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 附加题：在运算式计算中支持括号: ”(“, ”)”.
JavaScript编写简单的计算器
10-23
主要介绍了JavaScript如何编写简单的计算器，功能很简单，可以实现加减乘除功能，感兴趣的小伙伴们可以参考一下
Javascript编写的计算器
12-18
参考博客：http://blog.csdn.net/xiaowei_cqu/article/details/7081348
JavaScript实现简单计算器
qq_39299605的博客
12-23 439
JavaScript实现简单的计算器（一） 效果图 在输入框中分别输入整数后点击下方的按钮就可以将结果显示在下方的结果框中 html部分 <span>整数1：</span> <input type="text" id="number1"/><br /> <span>整数2：</span> <input type="text" id="number2"/> <div style="margin:
JS简易计算器功能代码
enenaha的博客
05-11 5223
HTML代码： <!DOCTYPE html> <html> <head> <meta contentS="text/html; charset=utf-8" /> <script type="text/javascript" src="test.js"></script> <title>test</...
js代码做计算器
Anansoul的博客
01-07 2116
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;script type="text/javascript"&gt; window.on
用JavaScript实现一个简单的计算器
zysp158的博客
04-26 271
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
(36行代码)javascript实现简单的计算器
赵同学的博客
01-11 247
话不多说我们上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> input[type='button']{width: 50px;height: 50px;} //设置输入框的宽高都为50px .mydiv{width: 215px;height: 250px;border: 1px solid black;margin: 0 auto;}
javascript实现计算器功能
oneFT的博客
11-23 2706
javascript计算器：顾名思义，就是在javascript中实现各种计算功能。 主要分为三个部分： （1）HTML代码，设计页面框架。将目标放入在容器中，设置ID！ javascript仿windows计算器 7 8 9 + 4 5 6 - 1 2 3 × 0

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值