用HTML,CSS,JS实现简单的计算器网页

最新推荐文章于 2022-02-19 13:47:46 发布

不学没工作了

最新推荐文章于 2022-02-19 13:47:46 发布

阅读量5.3k

点赞数 17

分类专栏：笔记文章标签： js html css javascript

本文链接：https://blog.csdn.net/qq_45852612/article/details/115118766

版权

笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

这篇博客通过对比展示了使用jQuery和原生DOM实现一个简单计算器的过程。HTML用于页面结构，CSS负责样式，JS处理交互逻辑。代码示例详细解释了每个部分的功能，强调了jQuery在简化操作上的便利性。同时，博客鼓励读者通过实践理解这两种方法的差异。

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

爷爷！！！你关注的UP主终于更新了！！！

首先来简单解释一下什么是HTML,CSS,JS
1.HTML
HTML 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。
2.CSS
中文翻译为“层叠样式表”,主要功能是定义网页数据的编排、显示、格式化及特殊效果，它扩展了HTML的功能。
3.JS
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

计算器
下面是代码展示,一些需要注意的地方会进行注释供大家更好地理解

这部分是引用jQuery实现的代码

<html>
<head>
<meta charset="utf-8">
<title>计算器</title>//网页标题
<script src="jquery-1.9.1.min.js"></script>//导入jQuery
    <script>
        function MCK(number) {
        //jQuery("#num1")等效于原生代码中的document.getElementById("num2")
        //这就是导入jQuery的优点之一
           var inputnum1 = jQuery("#num1");
           var inputnum2 = jQuery("#num2");
            //直接调用val()
            if(inputnum1.val()==""){
                alert("第一个数字没输入呢!");
                return false;
            }
            if(inputnum2.val()==""){
                alert("第二个数字没输入呢!");
                return false;
            }
            var total=0;
            //加
            if(number==1){
                total=parseInt(inputnum1.val())+parseInt(inputnum2.val());
            }
            //减
            else if(number==2){
                total=parseInt(inputnum1.val())-parseInt(inputnum2.val());
            }
            //乘
            else if(number==3){
                total=parseInt(inputnum1.val())*parseInt(inputnum2.val());
            }
            //除
            else if(number==4){
                total=parseInt(inputnum1.val())/parseInt(inputnum2.val());
            }
            //直接调用html给result赋值
            jQuery("#result").html( "<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>");
            //清空
            if(number==5){
                if(confirm("确定清空吗?")){
                //直接调用赋值
                    inputnum1.val("");
                    inputnum2.val("");
                    jQuery("#result").html("");
                }
                return false;
            }
        }
    </script>
</head>
<body>
//用一个大div包住,给居中效果
<div style="text-align: center">
<h1>计算器</h1>
<!--输入框-->
<div>
第一个数字:<input id="num1" type="number" ><p></p>
第二个数字:<input id="num2" type="number"><p></p>
</div>
<!--五个按钮-->
<div>
    <input type="button" value="相加" style="color: red" onclick="MCK(1)">
    <input type="button" value="相减" style="color: purple" onclick="MCK(2)">
    <input type="button" value="相乘" style="color: green" onclick="MCK(3)">
    <input type="button" value="相除" style="color: yellow" onclick="MCK(4)">
    <input type="button" value="清空" style="color: blue" onclick="MCK(5)">

    <!--结果显示-->
    <div id="result" style="font-size: 20px">
    </div>
</div>
</div>
</body>
</html>

展示效果
在这里插入图片描述

下面是DOM原码实现

<html>
<head>
    <meta charset="utf-8">
    <title>简易计算器</title>
    <script>
        function MCK(type) {
            var inputnum1=document.getElementById("num1");
            var inputnum2=document.getElementById("num2");
            if(inputnum1.value==""){
                alert("数字1没输入");
                return false;
            }
            if(inputnum2.value==""){
                alert("数字2没输入");
                return false;
            }
            //加
            if(type==1){

                var total=parseInt(inputnum1.value)+parseInt(inputnum2.value);
                document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"
            }
            //减
            if(type==2){

                var total=parseInt(inputnum1.value)-parseInt(inputnum2.value);
                document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"
            }
            //乘
            if(type==3){
                var total=parseInt(inputnum1.value)*parseInt(inputnum2.value);
                document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"
            }
            //除
            if(type==4){
                var total=parseInt(inputnum1.value)/parseInt(inputnum2.value);
                document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"
            }
            if(type==5){
                if(confirm("确认清空吗?")){
                    inputnum1.value="";
                    inputnum2.value="";
                    document.getElementById("result").innerHTML="";
                }
                return false;
            }
        }
    </script>
</head>
<body>
<div style="text-align: center">
    <div style="margin-top: 100px;font-size: 30px">
    <h1>计算器</h1>
<!-- 输入框   -->
        数字1:<input id="num1" type="number"><p></p>
        数字2:<input id="num2" type="number"><p></p>
    </div>
<!--  按钮-->
    <div>
    <input type="button" value="加" style="color: deeppink;font-size: 20px" onclick="MCK(1)">
    <input type="button" value="减" style="color: blue;font-size: 20px" onclick="MCK(2)">
    <input type="button" value="乘" style="color: red;font-size: 20px" onclick="MCK(3)">
    <input type="button" value="除" style="color: purple;font-size: 20px" onclick="MCK(4)">
    <input type="button" value="清" style="color: cyan;font-size: 20px" onclick="MCK(5)">
    </div>
<!--    结果显示-->
    <div id="result" style="margin-top: 50px">
    </div>

</div>

</body>
</html>