最近几天家里的事情有点忙,导致一直没有更新博客,但是不代表一直没看技术,学习不能停止,正所谓活到老学到老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>
输出:
200
4
27
所以我们做计算器的时候需要做的就是怎么将text框里面的东西格式变成他需要的格式。
常见异常:
如果参数中没有合法的表达式和语句,则抛出 SyntaxError 异常。
如果非法调用 eval(),则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常,eval() 将把该异常传递给调用者
说明:
该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 EvalError 异常