javascript计算器的实现，暂时不支持小数点

最新推荐文章于 2022-07-25 22:38:41 发布
最新推荐文章于 2022-07-25 22:38:41 发布
阅读量797 收藏 1
点赞数
分类专栏： java script
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gfdonx/article/details/49511403
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="calculator.css">

<script language="javascript">

var count = 0;//总值
var operType = "";//操作符
var num = 0;//第二个计算数
var jilu = "";//保存显示的文本;

/* 传入按钮的id属性
*/
function view(operationid){
	
	/* 初始值 */
	var result = 0;
	
	/* 得到id的Element */
	var type = getE(operationid);
	/*判断按钮类型，这里分为三类,数字及小数点等运算符清零*/
	if(type.value == "清零"){
		count = 0;
		num = 0;
		jilu = "";
		showText(0);
		return;
	}
	
	if(type.value == "\/"){
		if(operType == 1){
		count = count + num;
		}else if(operType == 2){
		count = count - num;
		}else if(operType == 3){
		count = count * num;
		}else if(operType == 4){
		count = count / num;
		}else{
		count = num;
		}
		operType = 4;
		jilu = jilu + num + "\/";
		showText(jilu);
		num = 0;
		return;
	}
	if(type.value == "*"){
		if(operType == 1){
		count = count + num;
		}else if(operType == 2){
		count = count - num;
		}else if(operType == 3){
		count = count * num;
		}else if(operType == 4){
		count = count / num;
		}else{
		count = num;
		}
		operType = 3;
		
		jilu = jilu  + num + "*";
		showText(jilu);
		num = 0;
		return;
	}
	if(type.value == "+"){
		if(operType == 1){
		count = count + num;
		}else if(operType == 2){
		count = count - num;
		}else if(operType == 3){
		count = count * num;
		}else if(operType == 4){
		count = count / num;
		}else{
		count = num;
		}
		/*  测试断点用*/
		var test = count;
		test = num
		operType = 1;
		
		
		jilu = jilu  + num + "+";
		showText(jilu);
		num = 0;
		return;
	}
	if(type.value == "-"){
		if(operType == 1){
		count = count + num;
		}else if(operType == 2){
		count = count - num;
		}else if(operType == 3){
		count = count * num;
		}else if(operType == 4){
		count = count / num;
		}else{
		count = num;
		}
		operType = 2;
		jilu = jilu  + num + "-";
		showText(jilu);
		num = 0;
		return;
	}
	
	if(type.value == "="){
		if(operType == 1){
		count = count + num;
		}else if(operType == 2){
		count = count - num;
		}else if(operType == 3){
		count = count * num;
		}else if(operType == 4){
		count = count / num;
		}
		num = 0;
		jilu = count;
		showText(count);
		return;
		//alert(count);
	}
	var element = getE(operationid);
	var str = element.value;
	if(result != 0){
	
		 alert(0);
	}
	num = num * 10 + parseInt(str);
	showText(jilu + num);
}

/*根据id返回Element*/
function getE(id){
	return document.getElementById(id);
}

function showText(result){
	getE('result').value = result;
}



</script>
<title>无标题文档</title>
</head>

<body>
<!-- 主要div的实现 -->
<div id = main>
<!-- 页头div的实现 -->
<div id = "top">

</div>

<!-- 左侧div -->
<div id="left">

</div>

<!--中间大的div-->
<div id="center">

<!-- 中间计算器div -->
<div id="calculator">

<div class="input">
<input type="text" size="36" class="text" id="result" value="0">
</div>

<!-- 数据按钮整块的DIV -->
<div class="numberdiv">

<!-- 中间c/*7894561230.按钮的div -->
<div class="numberbtncenter">

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="清零" onClick="view('zero')" id="zero">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="/" onClick="view('chu')" id="chu">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="*" onClick="view('cheng')" id="cheng">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="7" onClick="view('seven')" id="seven">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="8" onClick="view('eight')" id="eight">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="9" onClick="view('nine')" id="nine">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="4" onClick="view('four')" id="four">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="5" onClick="view('five')" id="five">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="6" onClick="view('six')" id="six">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="1" onClick="view('one')" id="one">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="2" onClick="view('two')" id="two">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="3" onClick="view('three')" id="three">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtncols2">
<input type="button" value="0" onClick="view('num0')" id="num0">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value=".">
</div>

</div>

<!--右侧—+enter -->
<div class="numberbtnright">

<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="-" onClick="view('sub')" id="sub">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtnrow2">
<input type="button" value="+" onClick="view('add')" id="add">
</div>

<!-- 单个数字按钮div -->
<div class="numberbtnrow2">
<input type="button" value="=" onClick="view('deng')" id="deng">
</div>

</div>



</div>
</div>
</div>
</div>
</body>
</html>



body{
margin:0px;
padding:0px;
}

/* 主要的大的DIV */
#main{
margin:0 auto;
padding:0px;
width:960px;
height:800px;
border:solid 1px red;

}

/* 顶部DIV */
#main #top{
margin:20px auto 0px;
width:98%;
height:10%;
border:solid 1px red;
}

/* 左侧div */
#main #left{
margin-top:10px;
margin-left:10px;
width:10%;
height:75%;
border:solid 1px red;
float:left;
}

/* 中间大的DIV */
#main #center{
margin-top:10px;
margin-left:15px;
width:86%;
height:75%;
border:solid 1px red;
float:left;
text-align:center;
}

/*计算器主DIV*/
#main #center #calculator{
margin:50px auto;
width:300px;
height:400px;
border:1px solid red;
}

/*输入框DIV*/
#calculator .input{
margin-top:10px;
height:40px;
padding:0px;
border:1px solid red;
}

/*输入框DIV*/
#calculator .input .text{
text-align:right;
height:36px;
padding:0px;
line-height:36px;
font-size:14px;
//border:1px solid red;
}

/* 全部按钮的DIV */
#calculator .numberdiv{
margin:20px auto 0px;
width:80%;
height:78%;
padding:0px;
border:1px solid red;
}

/* 左侧div */
.numberbtncenter{
margin-top:0px;
margin-left:5px;
width:174px;
height:300px;
//border:1px solid red;
float:left;
}

/*左侧div单个数字按钮div*/
.numberbtncenter .numberbtn{
width:50px;
height:50px;
//border:1px solid red;
margin-left:6px;
margin-top:6px;
float:left;
}

/* 左侧div单个数字按钮div下面的按钮 */
.numberbtncenter .numberbtn input{
width:100%;
height:100%;
float:left;
}

/* 左侧div下面的两列的0的div */
.numberbtncenter .numberbtncols2{
width:106px;
height:50px;
//border:1px solid red;
margin-left:6px;
margin-top:6px;
float:left;
}

/* 左侧div，0div 下的0按钮 */
.numberbtncenter .numberbtncols2 input{
width:100%;
height:100%;
float:left;
}

/* 右侧div */
.numberbtnright{
margin-top:0px;
width:58px;
height:300px;
//border:1px solid red;
float:left;
}

/* 右侧div下的单个按钮div */
.numberbtnright .numberbtn{
width:50px;
height:50px;
//border:1px solid red;
margin-left:0px;
margin-top:6px;
float:left;
}

/* 右侧div下的单个按钮div 下的 input*/
.numberbtnright .numberbtn input{
width:100%;
height:100%;
float:left;
}

/* 右侧div下的单个按钮div */
.numberbtnright .numberbtnrow2{
width:50px;
height:106px;
//border:1px solid red;
margin-left:0px;
margin-top:6px;
float:left;
}

/* 右侧div下的单个按钮div 下的input*/
.numberbtnright .numberbtnrow2 input{
width:100%;
height:100%;
float:left;
}


功能还不完善，就当学习笔记了

gfdonx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 小数点计算 BUG 解决办法
冷凝的专栏
09-04 4361
js解决浮点计算BUG终极解决办法  之前在网上看到这种解决办法 问题这样的： 　　37.5*5.5=206.08 (JS算出来是这样的一个结果，我四舍五入取两位小数) 　　我先怀疑是四舍五入的问题，就直接用JS算了一个结果为：206.08499999999998 　　怎么会这样，两个只有一位小数的数字相乘，怎么可能多出这么小数点出来。 　　我Google了一下，发现原来这是Java
javascript实现简易计算器功能
10-14
在本教程中，我们将探讨如何使用JavaScript实现一个简易计算器，涵盖基本的四则运算、小数点、回退、清零等核心功能。这个项目旨在帮助开发者熟练掌握JavaScript编程技巧，包括事件处理、异常处理以及页面元素交互。...
纯JavaScript实现计算器
11-15
用JavaScript实现一个运算式的计算 a. 支持加，减，乘，除（+, -, *, /) b. 支持输入合法的数字，包括小数，不考虑非法输入和数字越界（0-9, .） sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 附加题：在运算式计算中支持括号: ”(“, ”)”.
js实现简单的计算器
赵佳敏的博客
09-14 573
<script> //接收所有按钮的变量 var btnlist=null; //接收所有屏幕上的值 var screenIpt=null; //接收用户的屏幕值和符号值 var result=""; //设置一个Boolean类型的值 var ischange=null; //浏览器加载完成事件 window.onload=function(){ //获取元素 btnlist=doc
js处理小数运算
盛夏高歌的蝉
07-25 545
js小数运算
js小数运算出现的问题(精度丢失)及解决办法
kukulei2211的博客
07-23 3万+
以下是在项目中遇到的问题 购物车结算时，商品价格(33.01)-优惠券价格(5)，本应该是28.01，但是实际的结果是28.009999999999998 之前真没遇到过这种问题，查了很多资料才了解到js 小数相加减是会出现精度丢失的问题 案例 本案例是在浏览器控制台里打印 出现这种问题的原因，查看详细原因(链接) 原因其实就是js number类型运算都需要先将十进制转二进制 但小数点后的位数转二进制会出现无限循环的问题，只能舍0入1，所以会出现小数点丢失问题，感兴趣的可以自己研究，链接在上面。 解决
javascript实现简易计算器的代码
10-22
在本文中，我们将深入探讨如何使用JavaScript实现一个简易计算器。这个计算器可以进行基本的加、减、乘、除运算，并具备清零、退格和等于功能。以下是对代码的详细解释： 首先，我们需要一个HTML结构来展示计算器的...
JavaScript计算器网页版实现代码分享
12-10
JavaScript网页计算器的实现涉及到多个方面的Web开发技术，包括HTML、CSS和JavaScript。在这个案例中，我们看到一个简单的计算器设计，用户界面由HTML表格构建，样式通过CSS定义，而功能则是通过JavaScript来实现。 ...
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
js小数点处理
catherine的博客
06-01 2058
现实开发当中，我们总是会遇到金额计算问题，我们本以为js中0.1+0.2=0.3,结果0.300000000000000004，所以我们显示金额数值的时候，经常会不准，测试经常会提这样有多个小数点的bug，遇到这样的问题我们该怎么办？ 解决办法：把小数先装成整数计算。比如（0.1*100+0.2*100）/100 = 0.3  ，正确 ✔。原因：为什么0.1+0.2！=0.3？这是因为计算机的计算...
js小数计算
publicman_的博客
07-20 2550
问题： js在处理小数时存在精度问题 在js 的计算中如果涉及到小数的运算，那结果可不要想当然了，比如 1.1+1.2 的计算 var num1 = 0.1; var num2 = 0.2; var add = num1 + num2 console.log(add)//0.3 //正常答案应该是0.3 //实际上的结果是0.30000000000000004 原因 首先，能被计算机读懂的是二进制，而不是十进制，所以我们先把 0.1 和 0.2 转换成二进制 0.1==>0.
网页版计算器的实现(js实现计算功能)
热门推荐
小金子的专栏
01-26 4万+
今天带大家做一个网页版的计算器,页面使用js完成计算,界面的效果如下:
asp.net 弹出式日历控件 选择日期 Calendar控件
weixin_30673715的博客
09-07 854
原文地址：asp.net 弹出式日历控件 选择日期 Calendar控件 作者：逸苡 html代码： <%@ Page Language="C#" CodeFile="calendar.aspx.cs" Inherits="calendar" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi...
Win10系统下安装经典计算器
无标题
03-26 1万+
Win10默认的计算器启动非常慢。怀念曾经的计算器吗？在这里下载安装即可，点击下载https://winaero.com/download.php?view.1795安装后运行如下，找回曾经熟悉的样子了。...
JS计算小数加减乘除精确算法
caiminiu的博客
02-12 7046
js 两个小数相加，返回精确值 accAdd(data1, data2) { var r1, r2, m, c; try { r1 = data1.toString().split(".")[1].length;}catch (e) { r1 = 0; } try { r2 = data2.toString().split(".")[1].length; } cat...
JavaScript实现计算器运算网页
最新发布
05-30
可以使用HTML、CSS和JavaScript来创建一个计算器...这个计算器运算网页支持加、减、乘、除、小数点和清空操作，并且使用了eval()函数来进行计算。需要注意的是，eval()函数可能存在安全隐患，不建议在生产环境中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值