【网页设计】收入支出表

最新推荐文章于 2022-04-05 23:05:44 发布
最新推荐文章于 2022-04-05 23:05:44 发布
阅读量430 收藏 2
点赞数
分类专栏： 网页设计相关 文章标签： css3 html css html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NAN010101/article/details/121195736
版权

网页运行结果：

 

html代码如下：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>收入支出表</title>
    <script src="js/input.js"></script>
    <style type="text/css">

        th{
            width:150px;
            height: 10px;
        }

        input{
            background-color: antiquewhite;/*设置表单的颜色统一*/
            border:3px solid antiquewhite;/*设置表单的边框与背景融为一体*/
        }
        .c1{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .c2{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .c3{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .aside{
            position: relative;
            left: 500px;
        }

    </style>
</head>
<body id="body">
<table align="center" border="1" cellspacing="0" bgcolor="#faebd7">
    <tr>
        <th colspan="6" align="center" bgcolor="blue"><b>收入支出表  先生/女士家庭  日期</b></th>
    </tr>
    <tr bgcolor="#1e90ff">
        <th><b>一、收入</b></th>
        <th>&nbsp</th>
        <th >&nbsp</th>
        <th >金额</th>
        <th >占收入比</th>
        <th >备注</th>
    </tr>
    <tr>
        <td rowspan="3"  bgcolor="#87ceeb"> 工资和薪金</td>
        <td> 姓名</td>
        <td><input type="text"  ></td>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td> 姓名</td>
        <td><input type="text"></td>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td> 姓名</td>
        <td><input type="text"></td>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3" align="center">自雇收入（工资外收入）</td>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3" align="center">奖金和佣金</td>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3" align="center"> 养老金和年金</td>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td rowspan="3" bgcolor="#87ceeb"> 投资收入</td>
        <td colspan="2" rowspan="3">利息和分红资本利得租金收入其他</td>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><input type="text" name="s1"></td>
        <td><input type="text" name="s2"></td>
        <td><input type="text"></td>
    </tr>
    <tr bgcolor="#6495ed">
        <td colspan="3"><b>总收入</b></td>
        <td><input type="text" name="demos1" id="demos1"></td>
        <td><input type="text" name="demos1" id="demos2"></td>
        <td></td>
    </tr>
    <tr bgcolor="#1e90ff">
        <th><b>二、支出</b></th>
        <th colspan="2">&nbsp</th>
        <th align="center">金额</th>
        <th align="center">占总支出比</th>
        <th>&nbsp</th>
    </tr>
    <tr>
        <td rowspan="2" bgcolor="#87ceeb"> 住房</td>
        <td colspan="2">租金，维护和装修</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">房贷</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td rowspan="3" bgcolor="#87ceeb"> 家电，家具大件消费</td>
        <td colspan="2">贷款支付</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">保险费</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">过路停车费</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td rowspan="6" bgcolor="#87ceeb"> 日常生活开支</td>
        <td colspan="2">水电暖</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">通讯</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">交通</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">日常生活用品</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">外出就餐</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">其他</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3">购买衣物支出</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3">个人护理指出</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3">休闲娱乐</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3">商业保险费用</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3">医疗费用</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3">其他项目</td>
        <td><input type="text" name="z1"></td>
        <td><input type="text" name="z2"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td colspan="3">总支出</td>
        <td><input type="text" name="demoz1" id="demoz1"></td>
        <td><input type="text" name="demoz1" id="demoz2"></td>
        <td>&nbsp</td>
    </tr>
    <tr bgcolor="#6495ed">
        <td colspan="3">现金结余（收入-支出）</td>
        <td><input type="text" name="demox1"></td>
        <td><input type="text" name="demox2"></td>
        <td><input type="text"></td>
    </tr>
    <tr bgcolor="#1e90ff">
        <td colspan="3" align="center"><b>比率指标</b></td>
        <td  align="center"><b>比率值</b></td>
        <td align="center"><b>公式</b></td>
        <td align="center"><b>参考范围</b></td>
    </tr>
    <tr>
        <td colspan="3" >结余比率</td>
        <td><input type="text"  name="b1"></td>
        <td>结余/税后收入</td>
        <td>0.3</td>
    </tr>
    <tr>
        <td colspan="3">投资和净资产比率</td>
        <td><input type="text" name="b1"></td>
        <td>投资资产/总资产</td>
        <td>0.2</td>
    </tr>
    <tr>
        <td colspan="3">清偿比率</td>
        <td><input type="text" name="b1"></td>
        <td>净资产/总资产</td>
        <td>0.6-0.7</td>
    </tr>
    <tr>
        <td colspan="3">负债比率</td>
        <td><input type="text" name="b1"></td>
        <td>负债总额/总资产</td>
        <td>0.0-0.4</td>
    </tr>
    <tr>
        <td colspan="3">财务负担比率</td>
        <td><input type="text" name="b1"></td>
        <td>债务支出/税后收入</td>
        <td>0.4</td>
    </tr>
    <tr>
        <td colspan="3">流动性比率</td>
        <td><input type="text" name="b1"></td>
        <td>流动性资产/月收入</td>
        <td>3</td>
    </tr>

    <div class="aside">
        <input type="button" class="c1" onclick="sum_proportion('s1','s2','demos1','demos2')" value="总收入">
        <input type="button" class="c2" onclick="sum_proportion('z1','z2','demoz1','demoz2')" value="总支出">
        <input type="button" class="c3" onclick="jieyu('demos1','demoz1','demox1')" value="现金结余">
    </div>

</table>

</body>
</html>

其中调用的js脚本有：

function sum_proportion(n,k,m,l) {
    var summary = 0;
    var ss1 = document.getElementsByName(n);
    var ss2 = document.getElementsByName(k);

    for (var i = 0; i < ss1.length; i++) {
        summary = summary + Number(ss1[i].value);
    }
    for(var j = 0; j < ss2.length; j++)
    {
        ss2[j].value = (Number(ss1[j].value)/summary)*100+"%";
    }

    var f = document.getElementById(m);
    f.value = summary;
    var ff = document.getElementById(l);
    ff.value = '100%';
}
function jieyu(n,k,m) {
    var summary = 0;
    var ss1 = document.getElementsByName(n);
    var ss2 = document.getElementsByName(k);

    summary = Number(ss1[0].value) - Number(ss2[0].value);

    var f = document.getElementsByName(m);
    f[0].value = summary;
}

Chen NAN1024
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML资产负债表和收入支出表（可动态更新）
猪萌萌的博客
12-22 1853
资产负债表和收入支出表（可动态更新） HTML期末大作业是自己设计网页，要求有：主页、个人CSDN主页、登录、注册、资产负债表、收入支出表。我设计了属于自己的网页，整个大作业的难点就在于两个表格，两个表格的后台计算是重点，所以我把我自己的两个表格分享给大家。 先来看看我的两个表格效果截图： 咋们先看看第一个表格的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
用html写消费记录页面,收支明细查询.html
weixin_42620913的博客
06-03 1348
收支明细查询$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPa...
echarts.js销售收入图表实例
ICode联盟
10-26 424
下载地址 echarts.js销售收入图表实例是一款常用的销售统计图表实例代码。 dd:
用html写消费记录页面,支付流水记录.html
weixin_39645041的博客
06-03 349
支付流水记录$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPa...
如何在纯HTML的静态网页中添加一段统计网页访问量的JAVA Script代码？
InfiniteCreator
03-20 1万+
复制到body中即可<script language=JavaScript> <!-- var caution = false function setCookie(name, value, expires, path, domain, secure) { var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" +
财务数据信息网页模板
01-20
模板可能包括饼图、柱状图、线图等图表，以帮助用户直观地了解收入、支出、利润、现金流等关键指标。 3. **HTML与CSS**：HTML（超文本标记语言）是网页内容的基础，而CSS（层叠样式表）负责控制网页的样式和布局。...
商业财务项目网页模板
01-20
这可能涉及到各种图表（如柱状图、饼图、线图）来可视化收入、支出、利润、预算等数据，使非财务背景的人也能快速理解。模版应支持导入和更新数据，确保实时反映财务状况。此外，可能还包括关键性能指标（KPIs）的...
毕业设计：基于jsp家庭理财管理系统
06-15
数据库设计通常包括表结构的设计，如收入表、支出表、用户信息表等，以及关联这些表的适当索引和约束，以确保数据的一致性和完整性。 MyEclipse是集成开发环境（IDE），为Java EE应用提供了丰富的开发工具和支持。...
jsp个人理财系统(设计说明书).zip
最新发布
05-03
JSP个人理财系统是一个基于Web的平台，旨在帮助用户管理他们的财务状况，包括收入、支出、储蓄和投资等方面，提供方便的数据统计和分析功能。 一、JSP技术基础 JSP是Java平台上的动态网页技术，它将HTML代码与Java...
毕业设计家庭理财系统(java+applet).zip
04-12
这个项目的核心目标是为用户提供一个方便、易用的平台，以便记录收入、支出，跟踪财务状况，并进行预算规划。 【描述】中的“java+applet”表明该系统利用了Java编程语言来开发，并且可能包含Applet技术，Applet是...
IDEA+Java+JSP+Mysql+Tomcat实现Web教师信息管理系统
热门推荐
水坚石青的博客
01-14 1万+
Java+Jsp+Mysql实现教师信息管理系统，系统实现管理员登录系统，管理员对教师信息的增删改查。
HTML表格：日常消费账单表格展示网页
qq_45823118的博客
03-15 5379
HTML表格：日常消费账单表格展示网页任务描述相关知识最基本的表格带边框的表格带表头的表格scope属性结构更清晰的表格单元格跨越多行多列的表格编程要求测试说明 任务描述 本关任务是编写一个日常消费账单表格展示网页，你将通过本关学习如何使用HTML编写出简洁清晰的表格。 本关网页显示效果如下图所示： 相关知识 在日常生活中财务报表、日历等，都常使用表格展示。通常，表格数据都由行和列组成。 最基本的表格 在HTML表中，一个表格(table)由行(tr)组成，每一行由单元格组成，单元格有标题单元格(th)和
html工资计算页面模板,工资计算.html
weixin_39968592的博客
06-09 773
Vue计算器p{font-size: 30px;color: red;line-height: 50px;width: 300px;}input{display: block;width: 300px;height: 50px;font-size: 20px;padding-left: 10px;}div{position: absolute;left: 50%;top: 50%;transfor...
asp html 实现商店（书店）购物结算
qq_52510306的博客
04-05 959
话不多说 先上效果图： 功能： 1.每一个更新按钮对应着所更新的书籍定价数量，并将结果输出至消费总金额处 2.提交对应着所有书籍对应价格数量的总和，同样输出至总金额处 3.重置既刷新页面 实列： 1.整体是居中的，效果图存在位置偏差 2.数量和消费总金额的默认值是0，如果将0删除会出现报错，所以请小心 OK 上代码 .aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="lo
用html做工资查询登陆页面,薪资筛选页面.html
weixin_33171271的博客
06-03 640
薪资筛选页面$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPa...
自适应个人收款页HTML源码
字节网盘SEO工具
09-30 656
介绍： 适合站长，或者个人经常要收款的。 网盘下载地址： http://kekewl.cc/TtnuQ89LTMS0 图片：
html表格制作
少油少盐不要辣
07-06 6977
利用table、tr、td等标签，来制作常见的表格。 <!--先写出表格的规格（多少*多少），再根据具体的表格样式，进行单元格的合并和删除--> <table border="1" cellspacing="0" style="text-align: center;width: 100%"> <tr> <td colspan="3"...
工资条代码...
weixin_33736832的博客
06-04 414
Excel VBA实现工资条打印效果..网上找的一些不好用,让朋友给写的...好简化一下我们人事的工作,记录一下,随用随取...VBA的强悍,不用我多说做这方面的工作流的开发应用等,前途还是"靓靓的",.... Private Sub CopyHead_Click()Sub CopyHead_Click()        endRows_Num = InputBox("请输入工资条结束行:" +...
html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码
weixin_36259655的博客
06-15 790
一款JS+CSS3交互式拖动滑块选择工资条代码，可以托工工资下面的滑块来实时改变工资的数值大小，除了数字变化的同时还有一个颜色的平滑变化，当数值到最大值时，有一个文字的摆动动画特效。查看演示下载资源：9次 下载资源下载积分：20积分页面的head部分，需设置好页面元素的样式，代码如下： body {background: #eee;tex...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值