原生JavaScript+CSS实现计算器（简单的介绍一下eval函数）
原生JavaScript+CSS实现计算器（简单的介绍一下eval函数）
何处锦绣不灰堆
发布于 2020-05-29 12:21:18
发布于 2020-05-29 12:21:18
最近几天家里的事情有点忙，导致一直没有更新博客，但是不代表一直没看技术，学习不能停止，正所谓活到老学到老ok，我们今天简单的介绍一个js里面的不常用到的函数，但是功能确实很强大的，eval（）运算函数
为了看出来他的强大，我写了一个简单的计算器，来说明一下这个函数的巧妙和强大。
效果预览：
不BB，看代码：
css源码：
body{margin-left: 40%;}
div{width: 25rem;height: 40rem;background-color: ;}
input{width: 95%;height: 100%;border-color: #398439;margin-left: 0.6rem;font-size: 3rem;}
button{width: 5.5rem;height: 3.5rem;background-color: #419641;margin-left: 0.5rem;margin-top: 0.5rem;font: "arial black";font-size: 3rem;border-color: #449D44;border-radius: 10%;}
.head{width: 100%;height: 13%;background-color: #31708F;margin-top: 1rem;}
.put{width: 100%;height: 15%;background-color: ;margin-top: 1rem;}
.onnum{width: 100%;height: 64%;margin-bottom: 1rem;margin-top:1rem; background-color: ;}
.onleft{width: 75%;height: 100%;margin-bottom: 1rem;margin-top:1rem; background-color: ;float: left;}
.onright{width: 25%;height: 100%;margin-bottom: 1rem;margin-top:1rem; background-color: ;float: right;}H5源码：
<div>
<div class="put">
<input type="text" id="num" value="" readonly="readonly"/>
</div>
<div class="onnum">
<div class="onleft">
<button value="9" οnclick="count(this.value)">9</button><button value="8" οnclick="count(this.value)">8</button><button value="7" οnclick="count(this.value)">7</button>
<button value="6" οnclick="count(this.value)">6</button><button value="5" οnclick="count(this.value)">5</button><button value="4" οnclick="count(this.value)">4</button>
<button value="3" οnclick="count(this.value)">3</button><button value="2" οnclick="count(this.value)">2</button><button value="1" οnclick="count(this.value)">1</button>
<button value="=" οnclick="count(this.value)">=</button><button value="0" οnclick="count(this.value)">0</button><button value="C" οnclick="count(this.value)">C</button>
</div>
<div class="onright">
<button value="+" οnclick="count(this.value)">+</button>
<button value="-" οnclick="count(this.value)">-</button>
<button value="*" οnclick="count(this.value)">*</button>
<button value="/" οnclick="count(this.value)">/</button>
</div>
</div>
</div>js源码：
function count(val){
var num = document.getElementById("num");
switch(val){
case "=":
num.value = eval(num.value);
break;
case "C":
num.value = "";
break;
default:
num.value = num.value+val;
break;
}
}代码不多，毕竟功能就简单，那么下面我们简单的说一下eval的函数的用法和功能
eval（）这个括号里面不管是什么运算，都是可以直接运算的。举W3Cshool的例子：
<script type="text/javascript">
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10
document.write(eval(x+17))
</script>输出：
200427所以我们做计算器的时候需要做的就是怎么将text框里面的东西格式变成他需要的格式。
常见异常：
如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。
如果非法调用 eval()，则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者
说明：
该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-06-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读