简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

纯js代码实现简单计算器_javascript技巧

WBOY
发布： 2016-05-16 15:28:20
原创
1270 人浏览过

本文实例分享了纯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程序设计有所帮助。

相关标签：
js 计算器
来源：php.cn
上一篇：日常收藏的jquery技巧_jquery 下一篇：JavaScript使用DeviceOne开发实战（三）仿微信应用_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在多个路由中声明的workerpool是否仍然可以保持其cpu使用率而不关心阈值 我希望找到一个带有workerpool的node.js系统来处理CPU密集型任务，但是对于多条路由中的cpu使用情况，我有些困惑。一个场景是这样的：route1.js:constw...
来自于 2024-04-06 19:54:23
0
1
444
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
显示隐藏的侧面板：选中 我希望在侧面板中有一个导航菜单，可以通过动画汉堡菜单切换到视图。我想仅使用CSS创建它，而不使用任何JS。:checked伪类似乎是可行的方法，但我无法让它工作。到目前为止我拥有的...
来自于 2024-04-06 15:49:33
0
1
319
我们是否应该使用 SSG 来部署使用 Nuxt.js 创建的仪表板？ 我们将使用Nuxt.js开发一个供内部使用的仪表板。由于这将是一个内部仪表板，因此不需要通用模式。一般大部分仪表板都是在SPA中开发的。但是SPA还需要服务器将初始HTML和js包...
来自于 2024-04-06 13:17:44
0
1
493
Electron 在预加载时获取 AppData 如何获取预加载的AppData目录？背景.js[...]asyncfunctioncreateWindow(){constwin=newBrowserWindow({width:8...
来自于 2024-04-06 11:05:31
0
1
417
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！