使用Javascript简单计算器
时间:2018-11-17
这篇文章主要为大家详细介绍了使用Javascript简单计算器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js简单计算器的实现代码,供大家参考,具体内容如下
1.html代码
<input type="text" name="" id="txt-num1">//输入第一个数 <select id="dropdown"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select>//下拉菜单,让用户选择自己需要的运算符 <input type="text" name="" id="txt-num2">//输入第二个数 <button type="" id="btn">=</button>//当点击等于时就会输出结果 <input type="" name="" id="txt-result">//结果存储在这里
2.JS代码
<script type="text/javascript"> var btn_result=document.getElementById('btn');//获取等号的ID var num1=document.getElementById('txt-num1');//获取第一个数的ID var num2=document.getElementById('txt-num2');//获取第二个数的ID var result=document.getElementById('txt-result');//获取结果ID var drop=document.getElementById('dropdown');//获取下拉菜单ID btn_result.onclick=function(){//这句代码的意思是两个数的运算全是等号引起的,当点击等号时就会使两个数值进行运算 var v1=parseFloat(num1.value);//把num转化为数值型 string------>number var v2=parseFloat(num2.value); var v3=drop.value;//用v3 来存储下拉菜单的值 var num;///num用于接收两数的运算结果 switch(v3){//判断用户选的是哪种运算符,并进行运算 case "+": num=v1+v2; break; case "-": num=v1-v2; break; case "*": num=v1*v2; break; case "/": num=v1/v2; break; default: num=v1+v2; break; } result.value=num;//把结果保存到result中 } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 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 数组属性和方法
- CentOS 6.5平台实现快速部署FTP的方法
- Linux系统中sudo命令的十个技巧总结
- 详解linux电源管理驱动编写
- CentOS6.5系统简单安装与配置Nginx服务器的方法
- 详解linux 摄像头驱动编写
- Ubuntu16.04搭建NFS 文件共享服务器的方法
- 详解linux pwm驱动编写
- Ubuntu 16.04 LTS系统里中文txt文件打开的问题解决
- linux nand flash驱动编写
- 在Linux中使用Vundle管理Vim插件的方法
- 详解linux添加硬盘分区挂载教程
- CentoS6.5环境下redis4.0.1(stable)安装和主从复制配置方法
- 详解linux dma驱动编写
- CentOS6.5环境安装nginx服务器及负载均衡配置操作详解
- 详解linux 驱动编写(sd卡驱动)