JavaWeb之计算器--jquery版(详解)和js版

最新推荐文章于 2023-03-15 09:13:35 发布

满眼*星辰

最新推荐文章于 2023-03-15 09:13:35 发布

阅读量280

点赞数 2

分类专栏： JavaWeb 文章标签： js java jquery html css

本文链接：https://blog.csdn.net/starry1441/article/details/115088251

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这是一个使用jQuery和JavaScript编写的简单计算器示例。页面包含两个数字输入框和四个运算按钮（加、减、乘、除），以及一个显示计算结果的区域。当用户点击按钮时，会触发相应的计算操作，同时进行非空检查，确保输入有效。此外，还提供了一个清空按钮用于重置输入和结果。

摘要由CSDN通过智能技术生成

网页显示

在这里插入图片描述

jquery版本

<!DOCTYPE html>
<html lang="en">
<head>
    <!--编码格式-->
    <meta charset="UTF-8">
    <title>计算器</title>
    <!--导入jquery-->
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        //编写函数来对按钮点击事件相应
        function myck(type) {
            var num1 = jQuery("#num1"); //获取到id为“num1”的值
            var num2 = jQuery("#num2"); //获取到id为“num2”的值
            if(type == 1) { //如果为类型1：+
                //调用非空检验函数，若为空，程序停止
                if(!check(num1,num2)) return false;
                //把num1和num2的值转为int类型后相加
                var result = parseInt(num1.val())+parseInt(num2.val());
                //id为"result"的div显示
                jQuery("#result").text("最终计算结果："+result);
            }else if(type == 2) {   //如果为类型2：-
                if(!check(num1,num2)) return false;
                //相减
                var result = parseInt(num1.val())-parseInt(num2.val());
                jQuery("#result").text("最终计算结果："+result);
            }else if(type == 3) {   //如果为类型3：*
                if(!check(num1,num2)) return false;
                //相乘
                var result = parseInt(num1.val())*parseInt(num2.val());
                jQuery("#result").text("最终计算结果："+result);
            }else if(type == 4) {   //如果为类型4：/
                if (!check(num1, num2)) return false;
                //相除
                var result = parseInt(num1.val()) / parseInt(num2.val());
                jQuery("#result").text("最终计算结果：" + result);
            }else {
                //数字1清空
                num1.val("");
                //数字2清空
                num2.val("");
                //结果清空
                jQuery("#result").text("");
            }
        }

        //非空校验函数
        function check(num1,num2) {
            //若去掉空格后的值为空
            if(num1.val().trim() == "") {
                //则显示
                alert("请先输入数字1");
                return false;   //终止
            }
            if(num2.val().trim() == "") {
                alert("请先输入数字2");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<!--设置格式style：居中（text-align: center），距顶部（margin-top: 100px）-->
<div style="text-align: center;margin-top: 100px">
<!--    设置字体格式大小（font-size: 50px;）-->
    <span style="font-size: 50px;">简单计算器</span>
</div>
<div style="text-align: center;margin-top: 50px">
<!--    给数字1数字2对应id，为找到里面内容，类型为数字（type="number"）-->
    数字1：<input id="num1" type="number" ><p></p>
    数字2：<input id="num2" type="number" >
</div>
<div style="text-align: center;margin-top: 20px">
<!--    每个按钮触发myck函数-->
    <input type="button" value="相加" onclick="myck(1)">
    <input type="button" value="相减" onclick="myck(2)">
    <input type="button" value="相乘" onclick="myck(3)">
    <input type="button" value="相除" onclick="myck(4)">
    <input type="button" value="清空" onclick="myck(5)">
</div>
<!--最后一块区域显示结果-->
<div id="result" style="text-align: center; margin-top: 20px">

</div>
</body>
</html>

js版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        function myck(type) {
            var num1 = document.getElementById("num1");

            var num2 = document.getElementById("num2");

            if(type == 1) {
                if(!check(num1,num2)) return false;
                var result = parseInt(num1.value)-parseInt(num2.value);

                document.getElementById("result").innerText="最终计算结果："+result;

            }else if(type == 2) {
                if(!check(num1,num2)) return false;
                var result = parseInt(num1.value)-parseInt(num2.value);

                document.getElementById("result").innerText="最终计算结果："+result;

            }else if(type == 3) {
                if(!check(num1,num2)) return false;
                var result = parseInt(num1.value)*parseInt(num2.value);

                document.getElementById("result").innerText="最终计算结果："+result;

            }else if(type == 4) {
                if(!check(num1,num2)) return false;
                var result = parseInt(num1.value)/parseInt(num2.value);

                document.getElementById("result").innerText="最终计算结果："+result;

            }else {
                num1.value = "";

                num2.value = "";

                document.getElementById("result").innerText="";

            }
        }
        function check(num1,num2) {
            if(num1.value == "") {
                alert("请先输入数字1");
                return false;
            }
            if(num2.value == "") {
                alert("请先输入数字2");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<div style="text-align: center;margin-top: 100px">
    <span style="font-size: 50px;">简单计算器</span>
</div>
<div style="text-align: center;margin-top: 50px">
    数字1：<input id="num1" type="number" ><p></p>
    数字2：<input id="num2" type="number" >
</div>
<div style="text-align: center;margin-top: 20px">
    <input type="button" value="相加" onclick="myck(1)">
    <input type="button" value="相减" onclick="myck(2)">
    <input type="button" value="相乘" onclick="myck(3)">
    <input type="button" value="相除" onclick="myck(4)">
    <input type="button" value="清空" onclick="myck(5)">
</div>
<div id="result" style="text-align: center; margin-top: 20px">

</div>
</body>
</html>

满眼*星辰

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之计算器--jquery版(详解)和js版

网页显示jquery版本<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> <title>计算器</title>  <script src="jquery-1.9.1.min.js"></script> &lt
复制链接

扫一扫

专栏目录