大学解惑02 - 两个输入框数值相加，结果保留3位小数

最新推荐文章于 2023-03-12 19:37:22 发布

经海路大白狗

最新推荐文章于 2023-03-12 19:37:22 发布

阅读量806

点赞数 2

分类专栏：大学毕业解疑文章标签： 1024程序员节前端 javascript css html

本文链接：https://blog.csdn.net/xingyu_qie/article/details/127500951

版权

大学毕业解疑专栏收录该内容

40 篇文章 23 订阅

订阅专栏

问题背景：页面2个简单的输入框，中间加号，后面是等于号，等于号是个按钮。最后是一个区域，需要显示相加后的结果，并且保留3位小数。

做好的界面就像是这样：

一、html内容

必定包含2个input输入框，这里对iinput数值做了居中处理，最后是一个预留的显示区域，希望做的尽量像是一道题。

<body>
    <div class="box">
       <input type="text" id="num1" />
       <span class="add"> + </span>
       <input type="text" id="num2" />
       <span class="equal"> = </span>
       <span class="add_value"></span>
    </div>
</body>

这里的按钮没有用button,觉得有点丑，所以直接用span标签加css做了一个简易的按钮，其实看上去也不好看。

二、再看一下css内容

<style>
            .box {
                padding: 10px;
                width: 500px;
                height: 200px;
                border: 1px solid red;
            }
            input {
                width: 100px;
                height: 24px;
                line-height: 24px;
                text-align: center;
            }
            span.add {
                display: inline-block;
                height: 24px;
                line-height: 24px;
                font-size: 20px;
                margin: 0 5px;
            }
            span.equal {
                display: inline-block;
                width: 24px;
                line-height: 24px;
                background: #EEE;
                text-align: center;
                font-size: 14px;
                cursor: pointer;
            }
            span.add_value {
                position: relative;
                top: 8px;
                display: inline-block;
                height: 30px;
                width: 80px;
                line-height: 30px;
                text-align: center;
                border-bottom: 1px solid #000;
            }
</style>

三、接下来就是javascript内容

这里区分几点，第一是可操作事件区域，也就是按钮，等号按钮，所以应该想到onclick事件；有2个输入区域，也就是Input输入框；还有输出区域，也就是最后的横线显示区域。

1、首先获取2个输入框内的值

这里先获取到了输入框元素，然后通过Number函数的转换，也可以使用parseInt(num, 10)的方式。

2、给按钮添加点击事件

这里可以给等号按钮标签本身添加onclick事件，也可以在js中获取等号标签，在标签本身添加事件

3、最终值得输出

通过将之前2个值进行相加，最后得到的值进行toFixed(3)处理，然后通过InnerText的方式，即可做到内容显示了

4、最终的代码如下

<script>
    let btnDom = document.querySelector('.equal');
    let valueDom = document.querySelector('.add_value');
    btnDom.onclick = function() {
        let num1Dom = document.querySelector('#num1');
        let numFirst = Number(num1Dom.value);
        let num2Dom = document.querySelector('#num2');
        let numSecond = Number(num2Dom.value);

        console.log(numFirst, numSecond);
                
         let sumNum = (numFirst + numSecond).toFixed(3);
         valueDom.innerText = sumNum;
    }
</script>