纯js代码实现简单计算器


Posted in Javascript onDecember 02, 2015

本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢。具体如下:
运行效果截图如下:

纯js代码实现简单计算器

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <title> new document </title> 
 <script type="text/javascript">
  function count(){
    var txt1  = parseInt( document.getElementById('txt1').value);//获取第一个输入框的值
    var txt2  = parseInt( document.getElementById('txt2').value);//获取第二个输入框的值
    var select = document.getElementById('select').value;//获取选择框的值
    var result = '';
    switch (select)
     {
      case '+':
        result = txt1 + txt2;
        break;
      case '-':
        result = txt1 - txt2;
        break;
      case '*':
        result = txt1 * txt2;
        break;
      case '/':
        result = txt1 / txt2;
        break; 
     }
     document.getElementById('fruit').value = result;//设置结果输入框的值 
  }
 </script> 
 </head> 
 <body>
  <input type='text' id='txt1' /> 
  <select id='select'>
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type='text' id='txt2' /> 
  <input type='button' value=' = ' onclick = "count()" /> <!--通过 = 按钮来调用创建的函数,得到结果--> 
  <input type='text' id='fruit' />  
 </body>
</html>

复制粘贴上方代码即可实现简单的计算器功能,希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
js创建对象的区别示例介绍
Jul 24 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
MVVM框架下实现分页功能示例
Jun 14 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
jquery判断输入密码两次是否相等
Apr 22 #Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 #Javascript
Jqgrid之强大的表格插件应用
Dec 02 #Javascript
整理Javascript事件响应学习笔记
Dec 02 #Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 #Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 #Javascript
原生JavaScript实现异步多文件上传
Dec 02 #Javascript
You might like
FleaPHP的安全设置方法
2008/09/15 PHP
PHP开发负载均衡指南
2010/07/17 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
分享php多功能图片处理类
2016/05/15 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python生成密码库功能示例
2017/05/23 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
《湘夫人》教学反思
2014/02/21 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
护林员个人总结
2015/03/04 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
新学期开学标语2015
2015/07/16 职场文书