js加减乘除的简单运算

js加减乘除的简单运算一直忙于vue项目，很久没碰js的一些操作了，今天稍微有空看了看js代码当作复习，也供初学者学习。本人一直坚持的初衷将复杂逻辑简化，方便于学习，当然有不足之处，还请各位多多指教。如图所示，根据输入框输入的值进行简单的加减运算代码如下HTML<body><h1>请输入两个参加运算的整数</h1><div><span>操

不安于命

4824人浏览 · 2020-06-17 11:54:54

不安于命 · 2020-06-17 11:54:54 发布

js加减乘除的简单运算

一直忙于vue项目，很久没碰js的一些操作了，今天稍微有空看了看js代码当作复习，也供初学者学习。本人一直坚持的初衷将复杂逻辑简化，方便于学习，当然有不足之处，还请各位多多指教。如图所示，根据输入框输入的值进行简单的加减运算

代码如下

HTML

<body>
<h1>请输入两个参加运算的整数</h1>
<div>
    <span>操作数1：</span>
    <input type="text" class="value1">
</div>
<div>
    <span>操作数2：</span>
    <input type="text" class="value2">
</div>
<div style="margin-top: 20px" class="operation">
    <button onclick="operationFn('+')">加法</button>
    <button onclick="operationFn('-')">减法</button>
    <button onclick="operationFn('*')">乘法</button>
    <button onclick="operationFn('/')">除法</button>
</div>
<div class="result">
</div>
</body>

js

<script>
    var x=document.getElementsByClassName("value1")[0];
    var y=document.getElementsByClassName("value2")[0];
    var result=document.getElementsByClassName("result")[0];
    var all=null;
    function operationFn(type){
        if(type==='+'){
            all=parseFloat(x.value)+parseFloat(y.value)
        }else if(type==='-'){
            all=parseFloat(x.value)-parseFloat(y.value)
        }else if(type==='*'){
            all=parseFloat(x.value)*parseFloat(y.value)
        }else if(type==='/'){
            all=parseFloat(x.value)/parseFloat(y.value)
        }
        console.log(all);
        result.innerHTML=x.value+type+y.value+'='+all
    }
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^