两款简易计算器纯js版附源码下载
来源:互联网 发布:windows ssh使用 编辑:程序博客网 时间:2024/05/16 05:52
效果如图:
js代码如下,
<!DOCTYPE html><html><head><link rel="stylesheet" href="style.css"></head><body><input type="text" class="" id="res" readonly value=""><br><input type="text" class="" id="input" readonly value=""><table><tr><td><button id="+" onclick="operate(this)">+</button></td><td><button id="-" onclick="operate(this)">-</button></td><td><button id="*" onclick="operate(this)">*</button></td><td><button id="/" onclick="operate(this)">/</button></td></tr><tr><td><button id="" onclick="getNum(this)">7</button></td><td><button id="" onclick="getNum(this)">8</button></td><td><button id="" onclick="getNum(this)">9</button></td><td><button id="" onclick="backspace()"><-</button></td></tr><tr><td><button id="" onclick="getNum(this)">4</button></td><td><button id="" onclick="getNum(this)">5</button></td><td><button id="" onclick="getNum(this)">6</button></td><td><button id="" onclick="clearInput()">C</button></td></tr><tr><td><button id="" onclick="getNum(this)">3</button></td><td><button id="" onclick="getNum(this)">2</button></td><td><button id="" onclick="getNum(this)">1</button></td><td rowspan="2"><button id="equ" onclick="calculator()">=</button></td></tr><tr><td colspan="2"><button id="zero" onclick="getNum(this)">0</button></td><td><button id="" onclick="getNum(this)">.</button></td></tr></table></body><script type="text/javascript">var num_a = null;var num_b = null;var op = null;var init = false;//清空function clearInput() {init = false;document.getElementById("res").value = "";document.getElementById("input").value = "";}//退格function backspace() {//计算出来的结果不能退格if (init) return;var value = document.getElementById("input").value;document.getElementById("input").value = value.substring(0, value.length-1);}//显示点击的数字function getNum(obj) {//计算出结果后继续点数字则自动清空前一个算式if (init) clearInput();var Num = obj.innerHTML;var value = document.getElementById("input").value;if (Num == ".") {if (value == null || value == "") return;//开头不能是小数点if (value.indexOf(".") >= 0) return;//不能有多个小数点}document.getElementById("input").value += Num;}//+-*/ 操作function operate(obj){var value = document.getElementById("input").value;if (!cofrim(value)) {return;}document.getElementById("input").value = "";value = parseFloat(value);num_a = value;op = obj.id;document.getElementById("res").value = num_a + op;}//验证function cofrim(value) {if (value == null || value == "") {alert("您还没有输入数值,请输入");return false;}value = parseFloat(value);if (isNaN(value)) {alert("您输入有误,请输入数值");return false;}return true;}//计算function calculator() {var value = document.getElementById("input").value;if (!cofrim(value)) {return;}value = parseFloat(value);document.getElementById("input").value = "";if (op == "+") {num_b = value + num_a;} else if (op == "-") {num_b = num_a - value;} else if (op == "*") {num_b = value * num_a;} else if (op == "/") {num_b = num_a / value;}document.getElementById("res").value += value + "=";document.getElementById("input").value = num_b;init = true;}</script></html>
还有一款更简易的
链接:http://pan.baidu.com/s/1o8MEQwE 密码:3ssf
阅读全文
0 0
- 两款简易计算器纯js版附源码下载
- 在线简易计算器源码[html+css+js]
- JS版简易网页计算器
- iOS 简易计算器 纯代码
- 【源码】Android简易计算器
- 简易计算器源码
- 纯js写计算器
- 简易版网页计算器js代码页面
- js实现简易计算器
- 简易的JS计算器
- Js简易计算器
- js实现简易计算器
- 简易js计算器
- js制作简易计算器
- js之简易计算器
- js网页简易计算器
- C#简易版Socket聊天室 附源码
- 用js实现简易计算器
- WebStorm的配置和运行项目
- 基于Prometheus,Alermanager实现Kubernetes自动伸缩
- 公司应用日志收集架构进化过程
- ios 奔溃堆栈写入文件
- 基于阿里云构建可靠懒猪行IT运维平台
- 两款简易计算器纯js版附源码下载
- Codeforces Round #434 div2 A, B , C,D 题 题解
- HDU
- 处理注册时的生日日期格式问题
- 阿里云数据库推出SQL Server 2016 单机基础版本
- Xtrabackup定时备份数据库脚本
- spring boot项目通过外置tomcat运行
- 科三考试---专为denny而写
- Pig Latin 常用指令