原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)

简介: 原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)

最近几天家里的事情有点忙,导致一直没有更新博客,但是不代表一直没看技术,学习不能停止,正所谓活到老学到老(行啦,别装逼了)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 异常




相关文章
|
19天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
24天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
24天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
11 0
|
19天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
2天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
7 1
|
4天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield &#39;Hello&#39;; yield &#39;World&#39;; } ``` 创建实例后,通过`.next()`逐次输出&quot;Hello&quot;和&quot;World&quot;,展示其暂停和恢复的特性。
15 0
|
5天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
11天前
|
缓存 JavaScript 前端开发
js的入口函数,入口函数的作用
js的入口函数,入口函数的作用
15 4
|
19天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
29 0