简单快速的实现js计算器功能
时间:2019-03-31
本文章向大家介绍简单快速的实现js计算器功能,主要包括简单快速的实现js计算器功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在js的全局方法中有一个eval()方法,由于平时不怎么用,所以到关键时候就没想起来它
想写一个简易的计算器,本来以为要不了多久就能写出来的,谁知道愣是花费了我近两个小时的时间来写,但结果还是不能令我满意。想找一个更好的方法来写,不想写的那么麻烦,用什么方法呢?想了一个遍,后来猛然看到屏幕上有一个eval(),当时我的电脑正打开着网页。福星来了,对啊,我浪费了这么长时间写出来的东西还不能令我满意,一个eval()不就搞定了么,下面就给大家看一下我写的代码,写的很粗糙,还请大家多多指正。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 400px; height: 450px; margin: 0 auto; background: pink; } .show{ width:100%; height: 100px; line-height: 100px; text-align: right; background: #FFFFFF; border:1px solid #000; } .operate{ width: 100%; height: 250px; margin-top: 50px; } p{ margin-top: 20px; text-align: center; } input{ width: 80px; height: 40px; /*margin-left: 50px;*/ text-align: center; } input:nth-child(5n),input:first-child{ margin-left: 0; } </style> </head> <body> <div class="box"> <div class="show" id="show"></div> <div class="operate"> <p> <input type="button" name="one" id="one" value="1" onclick="num(1)"/> <input type="button" name="two" id="two" value="2" onclick="num(2)"/> <input type="button" name="three" id="three" value="3" onclick="num(3)"/> <input type="button" name="plus" id="plus" value="+" onclick="num('+')"/> </p> <p> <input type="button" name="four" id="four" value="4" onclick="num(4)"/> <input type="button" name="five" id="five" value="5" onclick="num(5)"/> <input type="button" name="six" id="six" value="6" onclick="num(6)"/> <input type="button" name="reduce" id="reduce" value="-" onclick="num('-')"/> </p> <p> <input type="button" name="seven" id="seven" value="7" onclick="num(7)"/> <input type="button" name="eight" id="eight" value="8" onclick="num(8)"/> <input type="button" name="nine" id="nine" value="9" onclick="num(9)"/> <input type="button" name="times" id="times" value="x" onclick="num('*')"/> </p> <p> <input type="button" name="divide" id="divide" value="/" onclick="num(/)"/> <input type="button" name="zero" id="zero" value="0" onclick="num(0)"/> <input type="button" name="equal" id="equal" value="=" onclick="equal()"/> <input type="button" name="mod" id="mod" value="%" onclick="num('%')"/> </p> </div> </div> </body> <script type="text/javascript"> function num(figure){ // var figure = figure.toString(); var show = document.getElementById("show"); showNum = show.innerHTML+figure; show.innerHTML = showNum; } function equal(){ document.getElementById("show").innerHTML = eval(document.getElementById("show").innerHTML); /*var lal = document.getElementById("show").innerHTML; alert(lal);*/ } </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Hbase源码系列之BufferedMutator的Demo和源码解析
- Kafka源码系列之0.10版本的Producer源码解析及性能点讲解
- Spark源码系列之spark2.2的StructuredStreaming使用及源码介绍
- Hbase源码系列之scan源码解析及调优
- spark源码系列之内部通讯的三种机制
- Hbase源码系列之regionserver应答数据请求服务设计
- 大数据基础系列之kafkaConsumer010+的多样demo及注意事项
- 大数据基础系列之kafka011生产者缓存超时,幂等性和事务实现
- 大数据基础系列之提交spark应用及依赖管理
- 大数据集群安全系列之kafka使用SSL加密认证
- 基于zookeeper leader选举方式一
- Spark与mongodb整合完整版本
- spark源码系列之累加器实现机制及自定义累加器
- Scala语法基础之隐式转换
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 写一个函数,2 个参数,1 个字符串,1 个字节数,返回截取的字符串,要 求字符串中的中文不能出现乱码
- Java 编程,打印昨天的当前时刻.
- git merge后 丢失文件 以及 代码
- 树莓派基础实验12:PCF8591模数转换器实验
- spring boot多数据源的代码实现
- 树莓派基础实验13:雨滴探测传感器实验
- Java中的TCP通信程序
- Java实现一个简单的文件上传案例
- 树莓派基础实验14:PS2操纵杆实验
- Java反射
- Java Request(域对象+请求转发+原理)详解
- PHP命令执行学习总结
- win10 专业版 提示开机提示你的windows许可证即将过期
- 浅谈文件上传漏洞(其他方式绕过总结)
- 《sql必知必会》——读书笔记(1)