使用JS实现简易计算器
更新时间：2021年06月14日 12:00:16 作者：6+3
这篇文章主要为大家详细介绍了使用JS实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用JS完成简易计算器，供大家参考，具体内容如下
要求：输入的值只能是数字，使用正则表达式
onchange():值改变时执行事件
onblur():鼠标移出时执行事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器</title>
</head>
<body>
<div style="text-align: center;">
<input type="text" id="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " >
<select name="select" id="select">
<option value="null">请选择</option>
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="2" onkeyup="this.value=this.value.replace(/[^\d]/g,'') ">
=
<input type="text" id="3" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "><br><br>
</div>
<div style="text-align: center;">
<input type="button" id="button"value="计算">
</div>
<script>
function accAdd(arg1,arg2){
var r1,r2,m;
try{
r1=arg1.toString().split(".")[1].length
}catch(e){
r1=0
}
try{
r2=arg2.toString().split(".")[1].length
}catch(e){
r2=0
}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
Number.prototype.add = function (arg){
return accAdd(arg,this);
}
function Subtr(arg1,arg2){
var r1,r2,m,n;
try{
r1=arg1.toString().split(".")[1].length
}catch(e){
r1=0
}
try{
r2=arg2.toString().split(".")[1].length
}catch(e){
r2=0
}
m=Math.pow(10,Math.max(r1,r2));
// last modify by deeka
// 动态控制精度长度
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
}
function accMul(arg1,arg2) //乘法
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{
m+=s1.split(".")[1].length
}catch(e){}
try{
m+=s2.split(".")[1].length
}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".","")) / Math.pow(10,m)
}
//给Number类型增加一个mul方法，调用起来更加方便。
Number.prototype.mul = function (arg){
return accMul(arg, this);
}
function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{
t1=arg1.toString().split(".")[1].length
}catch(e){}
try{
t2=arg2.toString().split(".")[1].length
}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(".",""))
r2=Number(arg2.toString().replace(".",""))
return (r1/r2)*pow(10,t2-t1);
}
}
Number.prototype.div = function (arg){
return accDiv(this, arg);
}
document.getElementById('button').onclick=function(){
var num1 =document.getElementById('1').value;
var num2 =document.getElementById('2').value;
var num3;
var op =document.getElementById('select').value;
switch(op){
case '0':
num3= accAdd(num1,num2);
break;
case '1':
num3= Subtr(num1,num2) ;
break;
case '2':
num3=accMul(num1,num2) ;
break;
case '3':
num3=accDiv(num1,num2) ;
break;
}
document.getElementById('3').value=num3;
}
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript数组的使用方法，数组（Array）是有序的元素序列。若将有限个类型相同的变量的集合命名，那么这个名称为数组名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
弹出框在网站页面中是必不可少的一部分，今天借助脚本之家平台给大家分享使用js实现简单的弹出框效果，感兴趣的朋友一起学习吧2016-02-02
这篇文章主要介绍了js中如何对json数组进行排序的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了JavaScript 如何计算文本的行数的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
js计算字符串的字节数的代码2009-02-02
由于图片加载慢，导致用户体验特别差，本文将介绍一种图片预加载技术，需要了解的朋友可以参考下2012-12-12
JavaScript 中 this 关键字的作用及改变其上下文的方法
这篇文章主要介绍了JavaScript 中 this 关键字的作用和如何改变其上下文,通过使用 call, apply, bind 方法，可以改变函数中的 this 指向，从而在不同的上下文中使用同一个函数，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了JavaScript电子时钟倒计时的实现代码，具有一定的参考价值，感兴趣的朋友可以参考一下2016-01-01
这篇文章主要为大家详细介绍了js版扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）
PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）...2007-08-08
最新评论