第十四篇 JS实现加减乘除 正则表达式

JS实现加减乘除

这节课，将会继续使用到if判断，会让同学们再看到一个新的，else if判断语句，意思是：否则如果，是基于if下的判断语句，就是说，if不成立则再来判断else if，可以这样，假如a=1,if(a=2){我是2}else if(a=1){我是1}else{我是3}，就是这样的关联，但有的同学问，直接用if一直判断就好了，不需要用else if，是这样的，程序运行，else if是基于if的对吧，那么它就是一条语句，如果相同的判断语句多了，全用if，程序就会一个一个去执行，量就会加大，就会影响程序速度。
这节课其实最难的是，“正则表达式”，它特别厉害哦，它可以很简单的来做，手机、IP、验证码、密码、用户名、地址等操作，可以节省更多的代码和思维，它的特点就是，开头和结尾都是用一根 / 斜杠的，里面则是正则内容，用做判断特别给力。
 
上代码，老师做一个初学者能看到的加减乘除法：
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS实现一个加减乘除</title>
</head>
<body>
<h3>加减乘除法</h3>
<input placeholder="第一个数字" id="num1" type="text"/>
<select name="fuhao" id="fuhao">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input placeholder="第二个数字" id="num2" type="text"/>
<button onclick="yunsuan()">运算</button>
<input placeholder="得出结果" id="num3" type="text"/>

<script>
function yunsuan(){
    //点击事件运行后，获取相关的所有元素id
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    var num3 = document.getElementById("num3");
    var fuhao = document.getElementById("fuhao");
    // 下面这个是正则表达式，下面这个意思则是，只能输入数字，字数必须有一个及以上
    var zhengze = /^[0-9]{1,}$/;
    //这里面则是用判断，使用正则的格式，来判断 num1 和num2格式是否正确
    if(!zhengze.test(num1.value)){
        //老师判断力用了一个 !(叹号)，意思是取相反，它本身成立则会变成不成立
        alert('只能输入整数,数字哟');
        //判断如果不成立，弹出提示并让代码停止运行，就不往下面走了
        return false;
    }else if(!zhengze.test(num2.value)){
        //else if意思是 否则如果，是在if下面使用的一个判断语句
        alert('只能输入整数,数字哟');
        return false;
    }
    //先用判断，判断它的运算符号
    //value 是获取它的文本框里的值 select是下拉列表，也可以当做是文本框哦
    if(fuhao.value == '+'){
        //一个等号是赋值，两个等号才是平常我们作比较说的“等于”
        //在JS里，+号不是两个数字相加，而是‘拼接’，将两个数字或者字符串拼接在一起
        //这里我们做数字运算，就要用到parseInt方法，就它转化成数字才能相加得出结果
        num3.value = parseInt(num1.value)+parseInt(num2.value);
    }else if(fuhao.value == '-'){
        num3.value = parseInt(num1.value)-parseInt(num2.value);
    }else if(fuhao.value == '*'){
        num3.value = parseInt(num1.value)*parseInt(num2.value);
    }else if(fuhao.value == '/'){
        num3.value = parseInt(num1.value)/parseInt(num2.value);
    }
}
</body>
</html>

 

这里面的代码还可以再节省一点，但老师先做出这样，让入门的同学更加看得懂。那么怎么节省呢，有兴趣的同学自己去想一下咯！
这里老师只用了支持整数，还有小数呢...
这里老师每一个运算符一行代码，就是4行，再加上判断if就又是几行，数学运算符不止这四个，那么我们就再一直无线延伸下去写代码吗？那就太费事了，有办法能做到，直接获取运算符，然后得出结果，老师不吹牛，一行代码直接搞定，那么有兴趣的同学，自己去开发咯！
 

posted on 2017-09-25 09:24  幸享龙枫  阅读(3212)  评论(0)  编辑  收藏  举报

导航