编程 Javascript

js实现简易计算器功能

Posted in Javascript onOctober 18, 2019

制作能进行加减乘除的简易计算器，主要是练习动态注册事件。因以练习为主，所以包含了较多基础方法。

效果图

js实现简易计算器功能

代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>简易计算器</title>
 <script type="text/javascript">
 window.onload = function(){
 document.onclick = function(){
  var ipts = document.getElementsByTagName("input");
  for (var i = 0; i < ipts.length; i++) {//得到值和符号
  if (ipts[i].type == "text") {
  switch (i){
  case 0:
   num1 = ipts[i].value;
   num1 = Number(num1);
   break;
  case 1:
   opt = ipts[i].value;
   break;
  case 2:
   num2 = ipts[i].value;
   num2 = Number(num2);
   break;
  }
  }
  }
  var res;//结果
  switch (opt){//通过得到的值和符号进行计算
  case "+":
  res = num1 + num2;
  break;
  case "-":
  res = num1 - num2;
  break;
  case "*":
  res = num1 * num2;
  break;
  case "/":
  res = num1 / num2;
  break;
  }
  
  var r = document.getElementById("result");
  r.value = res;
 } 
 }
 </script>
 </head>
 <body>
 <input type="text">
 <input type="text">
 <input type="text">=
 <input type="text" id="result">
 <input type="button" value="计算" id="btn">
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现简易计算器功能

- Author -

whr瑞

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

IE6下出现JavaScript未结束的字符串常量错误的解决方法

Nov 21 Javascript

下拉菜单点击实现连接跳转功能的js代码

May 19 Javascript

JQuery-tableDnD 拖拽的基本使用介绍

Jul 04 Javascript

常见表单重复提交问题整理及解决方法

Nov 13 Javascript

javascript模拟枚举的简单实例

Mar 06 Javascript

javascript设计模式之解释器模式详解

Jun 05 Javascript

微信小程序页面传值详解

Mar 10 Javascript

js实现日期显示的一些操作(实例讲解)

Jul 27 Javascript

ztree实现左边动态生成树右边为内容详情功能

Nov 03 Javascript

Vue组件通信之Bus的具体使用

Dec 28 Javascript

JavaScript实现读取与输出XML文件数据的方法示例

Jun 05 Javascript

解决layer弹出层自适应页面大小的问题

Sep 16 Javascript

JavaScript实现更换背景图片

Oct 18 #Javascript

jquery轻量级数字动画插件countUp.js使用详解

Oct 17 #jQuery

CountUp.js数字滚动插件使用方法详解

Oct 17 #Javascript

CountUp.js实现数字滚动增值效果

Oct 17 #Javascript

countUp.js实现数字动态变化效果

Oct 17 #Javascript

jQuery/JS监听input输入框值变化实例

Oct 17 #jQuery

countup.js实现数字动态叠加效果

Oct 17 #Javascript