【网页设计】本利和

最新推荐文章于 2024-08-14 09:04:24 发布

Chen NAN1024

最新推荐文章于 2024-08-14 09:04:24 发布

阅读量104

点赞数

分类专栏：网页设计相关文章标签： javascript css css3

本文链接：https://blog.csdn.net/NAN010101/article/details/121198842

版权

网页设计相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个简单的本利和的计算小网页：

>>在表单输入框中设置id=“benjin”

就可以在<script>中定义var benjin=ParseFloat(document.getElementById("benjin“）.value);

则调取body中的id=”benjin“,然后定义一个benjin，用以调用其函数。

>>在输出结果的表单中设置id="total”，然后在<script>中设置henlihe=document.getElenmentById("total").value=total；就可以将的出来的结果输出在其表单中。

>>在<button>中调用<script>函数。即οnclick="jisuan()"，然后再<script>中设置function jisuan（）{}即可调用该函数。

<html>
<head>
    <title>本利和</title>
    <script>
        function jisuan()
        {
            var benjin=parseFloat(document.getElementById("benjin").value);
            var rate=parseFloat(document.getElementById("rate").value);
            var year=parseInt(document.getElementById("year").value);

            var total=benjin;
            for  (i=0;i<year;i++)
            {
                total=total*(1+rate);
            }
            benlihe=document.getElementById("total").value=total;
        }
    </script>
    <style>

        caption{/*设置表格的标题*/
            caption-side: top;
            -moz-text-size-adjust: auto;
            color: gainsboro;
        }
        table{
            background: gainsboro;/*table的背景颜色*/
            background-size: 420px 320px;/*背景的尺寸*/
            border:1px solid black;/*边框*/
            width: 400px;
            height: 310px;
            position: fixed;
            top: 250px;/*距离页面顶端的距离*/
            left: 500px;/*处于画面的有段*/
            box-shadow:10px 10px 2px #888888 ;/*设置阴影*/
            border-radius: 25px/*设置圆角    */
        }
        body{
            background-size: 100%;
            background-image: url("imges/6.jpg") ;
        }
        div{
            background-image: url("imges/7.jpg");
            filter:alpha(opacity=20);
            height: 600px;
            width: 900px;
            border-radius: 50px;
            box-shadow: 5px 5px 2px ;
            position: fixed;
            top:100px;
            left: 300px;
        }
        .class{
            left: 800px;
        }
    </style>
</head>
<body>
<div>
<table>
    <caption><b>本利和</b></caption>
    <tr>
        <td>本金</td>
        <td><input type="text" id="benjin"/></td>
    </tr>
    <tr>
        <td>本金收益率</td>
        <td><input type="text" id="rate"/></td>
    </tr>
    <tr>
        <td>年数</td>
        <td><input type="text" id="year"/></td>
    </tr>
    <tr>
        <td>本利和</td>
        <td><input type="text" id="total"/></td>
    </tr>
    <tr class="class">
        <td rowspan="2"><input type="button"  onclick="jisuan()" value="计算"/></td>
    </tr>
</table>

</div>

</body>
</html>

Chen NAN1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【网页设计】本利和

一个简单的本利和的计算小网页：>>在表单输入框中设置id=“benjin”就可以在<script>中定义var benjin=ParseFloat(document.getElementById("benjin“）.value);则调取body中的id=”benjin“,然后定义一个benjin，用以调用其函数。>>在输出结果的表单中设置id="total”，然后在<script>中设置henlihe=document.getElenmentB
复制链接

扫一扫