js实现简易计算器功能
更新时间：2019年10月18日 08:56:42 作者：whr瑞
这篇文章主要为大家详细介绍了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实现鼠标框选...2007-05-05
这篇文章主要介绍了PHP中CURL的几个经典应用实例,本文讲解了cURL请求的基本步骤、在cURL中用POST方法发送数据、用cURL上传文件等内容,需要的朋友可以参考下2015-01-01
基于Bootstrap table组件实现多层表头的实例代码
Bootstrap table还有一个很多强大的功能，下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码，需要的朋友参考下吧2017-09-09
基于javascript实现漂亮的页面过渡动画效果附源码下载
本文通过javascript实现漂亮的页面过滤动画效果，用户通过点击页面左侧的菜单，对应的页面加载时伴随着滑动过滤动画，并带有进度条效果。用户体验度非常好，感兴趣的朋友一起看看吧2015-10-10
JavaScript+HTML5 canvas实现放大镜效果完整示例
这篇文章主要介绍了JavaScript+HTML5 canvas实现放大镜效果,结合完整实例形式分析了javascript+HTML5 canvas针对图片元素的获取、响应鼠标事件变换元素属性相关操作技巧,需要的朋友可以参考下2019-05-05
webpack-url-loader 解决项目中图片打包路径问题
这篇文章主要介绍了webpack-url-loader 解决项目中图片打包路径问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单，不刷新的联动，感兴趣的小伙伴们可以参考一下2016-04-04
uniapp跨页面传值uni.$emit和uni.$on的使用及踩坑实战
使用uni.$emit触发事件后,对应的uni.$on就会监听到事件触发,在回调中去执行相关的逻辑,下面这篇文章主要给大家介绍了关于uniapp跨页面传值uni.$emit和uni.$on的使用及踩坑实战的相关资料,需要的朋友可以参考下2023-04-04
今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交，所以想到的实现方法就是 使用button实现,怎么实现呢？下面小编给大家分享JS button按钮实现submit按钮提交效果，感兴趣的朋友参考下吧2016-11-11
javascript document.compatMode兼容性
文档模式在开发中貌似很少用到，最常见的是就是在获取页面宽高的时候，比如文档宽高，可见区域宽高等。2010-02-02
最新评论