利用HTML、CSS、JS做一个计算器

最新推荐文章于 2021-09-27 12:04:31 发布

梦nine

最新推荐文章于 2021-09-27 12:04:31 发布

阅读量238

点赞数 2

分类专栏：网络文章标签： web

本文链接：https://blog.csdn.net/qq_54850622/article/details/115347403

版权

网络专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8">
    <title>我的计算器</title>
    <script>
        function myck(type) {
            var inputNum1 = document.getElementById("num1");
            var inputNum2 = document.getElementById("num2");
              if(type==1) {
                // 1.非空判断
                if (inputNum1.value == "") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.value == "") {
                    alert("请先输入数字2");
                    return false;
                }
                // 2.加法操作
                var total = parseInt(inputNum1.value) + parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>最终执行结果：<strong style='color: red;'>" + total + "</strong></h2>";

            }else if(type==2){
                // 1.非空判断
                if (inputNum1.value == "") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.value == "") {
                    alert("请先输入数字2");
                    return false;
                }
                // 2.减法操作
                var sub = parseInt(inputNum1.value) - parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>最终执行结果：<strong style='color: #ff0000;'>" + sub + "</strong></h2>";
            }else if(type==3){
                if (inputNum1.value == "") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.value == "") {
                    alert("请先输入数字2");
                    return false;
                }
                // 2.乘法操作
                var mul = parseInt(inputNum1.value)*parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>最终执行结果：<strong style='color: red;'>" + mul+ "</strong></h2>";
            }
            else if(type==4){
                inputNum1.value="";
                inputNum2.value="";
                document.getElementById("resultDiv").innerHTML ="";
            }
        }
    </script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
    <h1>计算器</h1>
    数字1：<input id="num1" type="number"> <p></p>
    数字2：<input id="num2" type="number"> <p></p>
    <div>
        <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)">
    </div>
    <div id="resultDiv" style="margin-top: 50px;">

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

结果：
在这里插入图片描述

引入外部jQuery

<html>
<head>
    <meta charset="utf-8">
    <title>我的计算器</title>
	<script src="jquery-1.9.1.min.js"> </script>
    <script>
	    
        function myck(type) {
            var num1 = jQuery("#num1");
            var num2 = jQuery("#num2");
            var  resultDiv=jQuery("#resultDiv");
            if(type==1) {
                // 1.非空判断
                if (num1.val() == "") {
                    alert("请先输入数字1");
                    num1.focus();
                    return false;
                }
                if (num2.val() == "") {
                    alert("请先输入数字2");
                   num2.focus();
                    return false;
                }
                // 2.加法操作
                var total = parseInt(num1.val()) + parseInt(num2.val());
                // 3.将结果展现在最下面 div 中
                resultDiv.html(
                    "<h2>最终执行结果：<strong style='color: red;'>" + total + "</strong></h2>");

            }else if(type==2){
                // 1.非空判断
              if (num1.val() == "") {
                    alert("请先输入数字1");
                    num1.focus();
                    return false;
                }
                if (num2.val() == "") {
                    alert("请先输入数字2");
                   num2.focus();
                    return false;
                }
                // 2.减法操作
                var sub = parseInt(num1.val()) - parseInt(num2.val());
                // 3.将结果展现在最下面 div 中
                resultDiv.html(
                    "<h2>最终执行结果：<strong style='color: #ff0000;'>" + sub + "</strong></h2>");
            }else if(type==3){
                 if (num1.val() == "") {
                    alert("请先输入数字1");
                    num1.focus();
                    return false;
                }
                if (num2.val() == "") {
                    alert("请先输入数字2");
                   num2.focus();
                    return false;
                }
                // 2.乘法操作
                var mul = parseInt(num1.val()) * parseInt(num2.val());
                // 3.将结果展现在最下面 div 中
                resultDiv.html("<h2>最终执行结果：<strong style='color: red;'>" + mul+ "</strong></h2>");
            }
            else if(type==4){
			    
                num1.val("");
                num2.val("");
                resultDiv.html("");
            }
        }
    </script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
    <h1>计算器</h1>
    数字1：<input id="num1" type="number"> <p></p>
    数字2：<input id="num2" type="number"> <p></p>
    <div>
        <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)">
    </div>
    <div id="resultDiv" style="margin-top: 50px;">

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

在这里插入图片描述

梦nine

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用HTML、CSS、JS做一个计算器

<html><head> <meta charset="utf-8"> <title>我的计算器</title> <script> function myck(type) { var inputNum1 = document.getElementById("num1"); var inputNum2 = document.getElementByI
复制链接

扫一扫

专栏目录