• 第十四篇 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就又是几行,数学运算符不止这四个,那么我们就再一直无线延伸下去写代码吗?那就太费事了,有办法能做到,直接获取运算符,然后得出结果,老师不吹牛,一行代码直接搞定,那么有兴趣的同学,自己去开发咯!
     
  • 相关阅读:
    从安装、管理到防御_阿里云安骑士全向测评
    云架构师前(钱)景这么好_我们该如何转型?这有两位阿里云云架构总监多年心得
    Infrastructure_as_Code——Kubernetes一键编排实践
    大中华地区(含港澳台)空气质量接口参加阿里云API_as_a_Service_大赛
    E-MapReduce集群启停HDFS/YARN服务
    云服务器ECS还原安全组规则功能介绍_安全组规则的备份与还原
    E-MapReduce集群中HDFS服务集成Kerberos
    FastReport中如何加入自定义函数
    查找算法总结
    八大排序算法总结
  • 原文地址:https://www.cnblogs.com/longfeng995/p/7590412.html
Copyright © 2020-2023  润新知