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




相关文章
|
6天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
15天前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
62 32
|
29天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
116 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
29天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
77 33
|
26天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
2月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
59 3
|
3月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    52
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62