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>

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

Javascript 相关文章推荐
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
浅谈JS的原型和继承
May 08 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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
You might like
请php正则走开
2008/03/15 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
js实现二级导航功能
2017/03/03 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
简述JS控制台的使用
2018/07/15 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
laravel使用redis队列实例讲解
2021/03/23 PHP
标准自荐信范文
2014/01/29 职场文书
县级文明单位申报材料
2014/05/23 职场文书
英语复习计划
2015/01/19 职场文书
实施意见格式范本
2015/06/05 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书