房贷计算器。在左侧输入数据，点击“开始计算”后，右侧右侧计算出结果后直接显示出来。

最新推荐文章于 2024-07-25 21:27:06 发布

m0_52803264

最新推荐文章于 2024-07-25 21:27:06 发布

阅读量462

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_52803264/article/details/125191467

版权

该博客展示了一个简单的房贷计算器，用户在左侧输入房屋面积和单价，点击计算后，右侧会实时显示计算结果。计算器功能目前仅限于根据面积和单价进行初步计算。

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

这是代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="vue.js"></script>
<style>
#bian{
    width: 620px;
    margin: 0 auto 7px;
    height: 865px;
    background-color: rgb(179, 237, 255);
}    
#top{
    height: 86px;
    width: 580px;
   
    margin: 0 auto 7px;
    text-align:center;
}
#zong{
    height: 450px;
    width: 580px;
    margin: 0 auto ;
    font-size: small;
    
    border-bottom:1px solid rgb(92, 173, 240);
    border-left:1px solid rgb(92, 173, 240);
    border-right:1px solid rgb(92, 173, 240);
    border-top:1px solid rgb(92, 173, 240);
}
#app{
    float: left;
    width: 330px;
    height: 100%;
    background-color:rgb(230, 255, 230);
}    
#daikuanleibie{
    border-bottom:1px dotted #999;
}
#two{
    margin-top: 2px;
    border-top:1px dotted #999;
    border-bottom:1px dotted #999;
}
#three{
    margin-top: 2px;
    border-top:1px dotted #999;
    border-bottom:1px dotted #999;
}
#four{
    margin-top: 2px;
    border-top:1px dotted #999;
    border-bottom:1px dotted #999;
}
#five{
    margin-top: 2px;
    border-top:1px dotted #999;
    border-bottom:1px dotted #999;
}
#six{
    margin-top: 2px;
    border-top:1px dotted #999;
}
#you{
    float:left;
    background-color: rgb(242, 253, 242);
    width: 250px;   
    height: 100%; 
}
#xia{
    width: 580px;
    margin: 0 auto ;
    font-size: small;
    border-bottom:1px solid rgb(92, 173, 240);
    border-left:1px solid rgb(92, 173, 240);
    border-right:1px solid rgb(92, 173, 240);
    background-color: rgb(198, 226, 250);
}
</style>    
</head>

<body>
<di