【JavaScript】javascript的eval函数实现的一个简单计算器

最新推荐文章于 2022-11-13 19:25:30 发布
最新推荐文章于 2022-11-13 19:25:30 发布
阅读量2k 收藏 5
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34880701/article/details/79044603
版权


初学H5，不知道做什么来练手，就做些小工具吧

今天知道一个函数eval()，感觉是神器，不过官方说这个已经很少用到了

用它来做个计算器还是可以的吧~

几个点：

1、画圆圈，border-radius:100%;

2、点击时改变CSS效果，.btnItem:active{}

3、内容换行，word-wrap:break-word;

4、字符串删除，inputtext.substring( 0 , inputtext.length-1 )

5、字符串转数字，parseFloat(textresult)

代码如下，复制粘贴就可以用啦：

<!DOCTYPE html>
<html>
<head>
	<title>计算器！</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
</head>
<style>
html,body{
    width:100%;
    margin:0;
    padding:0;
    font-family:"微软雅黑";
}
.inputShow{
	width:100%;
	height:6rem;
	background-color:#222222;
	color:#FFFFFF;
	word-wrap:break-word;
	overflow-y:scroll;
	font-size:21px;
	letter-spacing:2px;
	margin-top:0.5rem;
}
#ResultShow{
	padding-top:1.5rem;
	margin-right:0.5rem;
	margin-left:0.5rem;
	height:2rem;
	line-height:2rem;
	font-size: 26px;
	font-weight:bold;
	color:#EE9A00;
	overflow:hidden;
}
.btnItem{
	width:60px;
	height:60px;
	line-height:60px;
	border-radius:100%;
	background-color:#222222;
	text-align:center;
	font-size:21px;
	color:#FFFFFF;
	margin:5px;
}
.btnItem:active{
	opacity:0.7;
}
.numItem{
	margin-top:30px;
	padding-bottom:25px;
	width:100%;
	max-width:280px;
	display:flex;
	flex-wrap:wrap;
}
</style>
<body>
<div style="width:95%;max-width: 360px;background-color:#EAEAEA;margin:auto;">
	<div class="inputShow"><div id="inputtext" style="padding:1rem;">0</div></div>
	<center>
		<div id="ResultShow"></div>
		<div class="numItem">
			<div class="btnItem" οnclick="clearinput()">AC</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">(</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">)</div>
			<div class="btnItem" style="background-color:#EE9A00" οnclick="addinput(this.innerHTML)">+</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">1</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">2</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">3</div>
			<div class="btnItem" style="background-color:#EE9A00" οnclick="addinput(this.innerHTML)">-</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">4</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">5</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">6</div>
			<div class="btnItem" style="background-color:#EE9A00" οnclick="addinput(this.innerHTML)">×</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">7</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">8</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">9</div>
			<div class="btnItem" style="background-color:#EE9A00" οnclick="addinput(this.innerHTML)">÷</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">0</div>
			<div class="btnItem" οnclick="addinput(this.innerHTML)">.</div>
			<div class="btnItem" style="background-color:#CD3333;" οnclick="deleteinput()">←</div>	
			<div class="btnItem" style="background-color:#008B45;" οnclick="showresult()">=</div>
		</div>
	</center>
<div>
</body>
<script>
	var inputtext = "";
	var textresult = "";

	function addinput(e){
		if(e == "÷"){e = "/"}else if(e == "×"){e = "*"}
		if(textresult == ""){
			if(e == "." && inputtext == ""){
				inputtext = "0."
			}else{
				inputtext += e;
			}
		}else{
			if( e=="+"||e=="-"||e=="*"||e=="/" && e!="." ){	//如果输入的是运算符,取之前的运算结果,继续计算
				//var text = textresult
				inputtext = textresult + e;
				textresult = "";
			}else{	//如果不是运算符,结果置空,重新输入
				textresult = "";
				if(e == "."){
					inputtext = "0."
				}else{
					inputtext = e;
				}
			}
		}
		document.getElementById("inputtext").innerHTML = inputtext;
	};

	function deleteinput(){
		if(inputtext == ""){
			document.getElementById("inputtext").innerHTML = "0";
		}else{
			inputtext = inputtext.substring( 0,inputtext.length-1 )
			document.getElementById("inputtext").innerHTML = inputtext;
		}
	};

	function showresult(){
		if(inputtext == ""){
			document.getElementById("ResultShow").innerHTML = "0";
		}else{
			try{
				textresult = eval(inputtext);
				if(textresult == "Infinity"){
					document.getElementById("ResultShow").innerHTML = "输入有误";
					textresult = "";
				}else{
					textresult = parseFloat(textresult);
					document.getElementById("ResultShow").innerHTML = textresult;	//超大数字使用科学计数法
				};
			}catch(err){
				document.getElementById("ResultShow").innerHTML = "输入有误";
				textresult = "";
			}
		}
	};

	function clearinput(){
		inputtext = "";
		textresult = "";
		document.getElementById("inputtext").innerHTML="0";
		document.getElementById("ResultShow").innerHTML =textresult;
	};

</script>
</html>


刺猬学会了
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Javascript使用Eval实现基本运算
南 墙
06-03 1867
效果图： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="num" type="text" /> <button onclick="eval1()">运算</button> <label i
js eval()函数使用解析
最新发布
七月
03-26 682
总的来说，尽管 eval() 提供了执行动态代码的能力，但由于其潜在的安全风险，你应该尽量避免使用它。如果你确实需要使用 eval()，请确保你完全理解其风险，并采取适当的安全措施来防止恶意代码的执行。使用模板字符串和函数：对于动态生成代码的情况，你可以使用模板字符串和函数来组合字符串和变量，而不是使用 eval()。使用函数和对象：如果你需要动态地调用函数或访问对象的属性，你可以直接使用函数和对象，而不是使用 eval()。在这个例子中，eval() 执行了传递给它的字符串中的代码。
Python初级教程-eval( )函数和变量做简易计算器
xiaozhao_666的博客
05-06 965
eval函数和变量知识做一条有意义的程序 大家好，今天我们接着学习Python初级知识教程第三课 变量知识 ​ #Python变量教学代码 a = 0#定义变量a a -= 1#将变量a-1 print(a)#打印变量a查看其中数据 a += 1#将变量a+1 print(a)#打印变量a查看其中数据 b = 10 a,b = b,a#双变量转换 print(a,b)#查看变量是否转换 ​c = input(a)#打印变量a并让用户输入然后将输入内容存入变量c 这些就是变量的基本知识了，
JavaScript eval() 函数
Developer of XingKong22star
07-27 2295
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
html中函数eval,js代码借助函数eval制作简易计算器
weixin_29785723的博客
06-17 724
之前我们实现一些简易的计算器功能，是通过判断运算符来实现简单的一元运算，但是eval这个函数可以将包含数字和运算符的字符串进行计算，得出运算结果。1.先写html+css代码，做出一个计算器样子。CSS样式代码：//计算器样式table {border-collapse: collapse;font-size: 20px;margin: 50px auto;}td {text-align: cen...
利用eval函数实现简单的计算器
weixin_30662109的博客
02-20 1223
""" description : use python eval() function implement a simple calculator functions can be used as follow： ---------------------------------------- + : addition - : minus * : multiplicat...
Javascript 实现简单计算器实例代码
10-21
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的计算器实例。这个计算器的代码涉及到HTML、CSS和JavaScript的交互，提供基本的数学运算功能，包括加、减、乘、除，并包含清零和退格功能。 首先，我们来...
JavaScript中的eval()函数使用介绍
10-24
JavaScript中的eval()函数是一个强大的工具，它允许将字符串当作JavaScript代码执行。然而，这个功能也带来了潜在的安全风险和性能问题，因此在实际编程中应当谨慎使用。以下是对eval()函数的详细说明： **eval()的...
JavaScript实现简单计算器功能
11-27
在本实例中，我们讨论如何使用JavaScript来实现一个简单的计算器功能。这个计算器的基本操作包括数字输入、运算符选择以及计算结果的显示。以下是对代码的详细解析： 首先，HTML部分创建了一个基本的用户界面，包括...
calculadora:一个简单但惊人的计算器，无需使用 Javascript 中的 eval() 函数
05-30
标题中的"calculadora"是一个计算器应用，其设计目标是实现计算功能，同时避免使用`eval()`函数。这样的设计可以使程序更安全，因为不依赖于执行动态生成的代码。下面我们将深入探讨如何在JavaScript中创建一个...
java实现js中eval功能
11-06
使用java来实现js中eval的功能，包括字符串的计算，判断真假等功能
javascript 自定义eval函数实现
04-04
NULL 博文链接：https://javasam.iteye.com/blog/1461999
768eval科学计算器
10-26
768eval科学计算器,很好用的工具软件,已经经过wince测试.
JavaScript制作简易计算器（不用eval）
10-20
主要为大家详细介绍了JavaScript制作简易计算器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript——eval全局作用域的两种实现方式
Searchin_R的博客
10-04 1418
先认识一下eval(): eval() 函数执行表示为字符串形式的JavaScript代码。 语法 eval(string)   参数 string 一个字符串表示了一个JavaScript运算式，语句， 或者是一系列语句。运算式可以包括变量和已存在对象的属性。 返回值 执行指定的代码之后的完整值。如果完整值为空，返回undefined eval在JavaScript中有两种...
js中关于eval（）方法，写了一个计算器小例子
赫兹焦耳的博客
05-10 2885
    有的时候获取到的数值是 string 类型可以转换为number 但有时会得到string类型的表达式，然后发现了eval（）这个函数很方便啊===================================================引用定义和用法eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。...
javaScript函数--eval()的用法
weixin_30654583的博客
05-07 90
eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。 需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号括起来才会返回值，简单示例如下： 复制代码 代码如下:var code1='"a" + 2'; //表达式 varcode2='{a:2}'; //语句 alert(eval(code1))...
使用v-model和eval函数实现我的计算器
weixin_43803985的博客
07-29 493
在实现我的计算器小程序中，需要注意以下几个细节 v-model：使用的格式为 v-model=" "。使用等于号 在下拉列表中option要写上 value=" " 在script中的methods方法中，使用data中的数据，要使用this关键字，否则不能识别 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。虽然可以简化代码，但不支持多次使用 实例，使用sw...
做一个简易计算器 Python
weixin_53312151的博客
11-13 2209
简易计算器
用JavaScript中的函数实现一个简易计算器，实现加减乘除等操作显示在HTML文件中
05-22
可以使用 JavaScript 中的 eval() 函数实现一个简单的计算器，同时使用 HTML 和 CSS 来设计界面。 HTML 代码： ``` <!DOCTYPE html> 简易计算器 ()">C ()"> ('/')">÷ ('*')">x...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值