javascript编写简易计算器
时间:2019-03-30
本文章向大家介绍javascript编写简易计算器,主要包括javascript编写简易计算器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了js简易计算器的具体代码,供大家参考,具体内容如下
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style type="text/css"> *{ margin:0; padding: 0; } .content{ width: 300px; height: 400px; margin: 50px auto; background: #CBC6C6; border:1px solid #139EB7; box-shadow: -5px -5px 5px #565454; border-radius: 15px; } #toptext{ width: 280px; height: 50px; margin: 10px auto; margin-left: 9px; line-height: 50px; border-radius: 15px; text-align: right; font-size: 24px; border: 1px #F0D711 solid; } .btns{ width: 280px; height: 300px; margin: 10px auto; } .btns input{ width: 50px; margin: 10px; height: 60px; float: left; font-size: 24px; line-height: 60px; border-radius: 10px; transform-origin: left top; background: linear-gradient(to right,#0df60d,red); } .btns input:hover{ background: linear-gradient(to left,#0df60d,red); transform: rotate(15deg); } </style> </head> <body> <div class="content"> <input type="text" id="toptext"> <div class="btns"> <input type="button" value="1" class="num"> <input type="button" value="2" class="num"> <input type="button" value="3" class="num"> <input type="button" value="+" class="jisuan"> <input type="button" value="4" class="num"> <input type="button" value="5" class="num"> <input type="button" value="6" class="num"> <input type="button" value="-" class="jisuan"> <input type="button" value="7" class="num"> <input type="button" value="8" class="num"> <input type="button" value="9" class="num"> <input type="button" value="*" class="jisuan"> <input type="button" value="0" class="num"> <input type="button" value="C" id="clear"> <input type="button" value="=" id="equals"> <input type="button" value="/" class="jisuan"> </div> </div> <script type="text/javascript"> var text = document.getElementsByTagName('input')[0]; var clear = document.getElementById('clear'); var equals = document.getElementById('equals'); var js = document.getElementsByClassName('jisuan'); var num = document.getElementsByClassName('num'); text.value = 0; var tex = ""; var fuhao = ""; var firstNum = ""; var secondNum = ""; for(var i=0 ; i<num.length; i++){ num[i].onclick = function (){ if(fuhao){ text.value += this.value; secondNum = this.value; }else{ tex = tex+this.value; firstNum = tex; text.value = tex; } }; } for(var j=0; j<js.length; j++){ js[j].onclick = function(){ fuhao = this.value; text.value += this.value; }; } equals.onclick=function(){ switch (fuhao) { case '+': var res = firstNum*1 + secondNum*1; break; case '-': var res = firstNum - secondNum; break; case '*': var res = firstNum * secondNum; break; case '/': var res = firstNum / secondNum; break; default: break; } text.value = res; tex = ""; fuhao = ""; firstNum = ""; secondNum = ""; } clear.onclick = function(){ text.value = ""; } </script> </body> </html>
界面:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Django ORM模型:想说爱你不容易
- IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
- IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
- ARM处理器:开放者的逆袭
- 从5个方面对比微信小程序和App
- ActiveMQ笔记(7):如何清理无效的延时消息?
- JS魔法堂:再识Bitwise Operation & Bitwise Shift
- Hadoop(十三)分析MapReduce程序
- mac机上搭建php56/nginx 1.8.x/thinkphp 3.2.x/gearman扩展/seaslog扩展/redis扩展环境
- 基础野:细说无符号整数
- Ubuntu12.04安装QQ for Linux
- 树莓派:最好的安排
- idea 高级调试技巧
- JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后
- 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 数组属性和方法
- Python 基础(三):我是一个数字
- 【译】Flutter架构综述
- 【tcl学习】vivado write_project_tcl
- 你不知道的LinkedList(一):基于jdk1.8的LinkdeList源码分析
- SAP CRM Application Extension Tool(AET)扩展字段的渲染原理
- 使用nodejs将SAP Fiori应用置于本地Launchpad运行
- 使用nodejs运行SAP Fiori应用
- JUnit 注解@Category的工作原理
- JUnit 注解@RunWith的工作原理
- Java|快速掌握java判断语句的用法
- Oh!老伙计,提高自己的并发技能,先从锁优化开始吧
- iOS开发之WidgetKit
- 六、玩转Git三剑客-初识GitHub
- Python|自制二维码生成器
- HBase豆知识