原生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 异常




相关文章
|
4月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
154 19
|
4月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录

热门文章

最新文章