HTML期末大作业是自己设计网页,要求有:主页、个人CSDN主页、登录、注册、资产负债表、收入支出表。我设计了属于自己的网页,整个大作业的难点就在于两个表格,两个表格的后台计算是重点,所以我把我自己的两个表格分享给大家。
先来看看我的两个表格效果截图:
咋们先看看第一个表格的html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table,td {
margin: 0px auto;
text-align: center;
vertical-align:middle;
border-style: solid
}
</style>
</head>
<body style=" background-color:#ffffff;">
<script src="js01.js"></script>
</script>
<table border="1" cellspacing="0">
<tr>
<th colspan="5">资产负债表</th>
</tr>
<tr>
<td rowspan="20" style="font-weight:bold">金融资产 </td>
<td rowspan="6"> 现金与现金等价物</td>
<td> 现金</td>
<td>金额</td>
<td> 备注</td>
</tr>
<tr>
<td>活期存款</td>
<td> <input id = '1-00' type="text" onchange="fun('1-00'),output('g1')"></td>
<td> </td>
</tr>
<tr>
<td>定期存款</td>
<td><input id ='1-01' type="text" onchange="fun('1-01'),output('g1')"></td>
<td></td>
</tr>
<tr>
<td>其他类型银行存款</td>
<td ><input id="1-02" type="text" onchange="fun('1-02'),output('g1')"></td>
<td> </td>
</tr>
<tr>
<td>货币市场基金</td>
<td ><input id="1-03" type="text" onchange="fun('1-03'),output('g1')"></td>
<td> </td>
</tr>
<tr>
<td>人寿保险收入</td>
<td ><input id="1-04" type="text" onchange="fun('1-04'),output('g1')"></td>
<td> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#B7E7FB" style="font-weight:bold">现金与现金等价物小计</td>
<td id="g1"></td>
<td> </td>
</tr>
<tr>
<td rowspan="12">其他金融资产</td>
<td>债卷</td>
<td ><input id="2-01" type="text" onchange="fun('2-01'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>股票</td>
<td ><input id="2-02" type="text" onchange="fun('2-02'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>权证</td>
<td ><input id="2-03" type="text" onchange="fun('2-03'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>基金(不含货币基金)</td>
<td ><input id="2-04" type="text" onchange="fun('2-04'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>期货</td>
<td ><input id="2-05" type="text" onchange="fun('2-05'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>外汇实盘</td>
<td ><input id="2-06" type="text" onchange="fun('2-06'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>人民币理财产品</td>
<td ><input id="2-07" type="text" onchange="fun('2-07'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>外币理财产品</td>
<td ><input id="2-08" type="text" onchange="fun('2-08'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>保险理财产品</td>
<td ><input id="2-09" type="text" onchange="fun('2-09'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>证券理财产品</td>
<td ><input id="2-10" type="text" onchange="fun('2-10'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>信托理财产品</td>
<td ><input id="2-11" type="text" onchange="fun('2-11'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td>其他</td>
<td ><input id="2-12" type="text" onchange="fun('2-12'),output('g2')"></td>
<td> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#B7E7FB" style="font-weight:bold">其他金融资产小计</td>
<td id="g2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold">金融资产小计</td>
<td id="g12"></td>
<td></td>
</tr>
<tr>
<td rowspan="6" style="font-weight:bold"> 实物资产</td>
<td colspan="2">自住房</td>
<td ><input id="3-01" type="text" v onchange="fun('3-01'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">投资房地产</td>
<td><input id="3-02" type="text" onchange="fun('3-02'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">机动车</td>
<td><input id="3-03" type="text" onchange="fun('3-03'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">家具及家用电器</td>
<td><input id="3-04" type="text" onchange="fun('3-04'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">珠宝和收藏品</td>
<td><input id="3-05" type="text" onchange="fun('3-05'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">其他个人资产</td>
<td><input id="3-06" type="text" onchange="fun('3-06'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="3" bgcolor="#F6C2A7" style="font-weight:bold">实物资产小计</td>
<td id="g3"></td>
<td></td>
</tr>
<tr>
<td colspan="3" bgcolor="#9FCB69" style="font-weight:bold">资产总计</td>
<td id="sum"></td>
<td></td>
</tr>
<tr>
<td rowspan="6" style="font-weight:bold">负债</td>
<td colspan="2">信用卡透支</td>
<td><input id="4-01" type="text" onchange="fun('4-01'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">消费贷款</td>
<td><input id="4-02" type="text" onchange="fun('4-02'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">创业贷款</td>
<td><input id="4-03" type="text" onchange="fun('4-03'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">汽车贷款</td>
<td><input id="4-04" type="text" onchange="fun('4-04'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">住房贷款</td>
<td><input id="4-05" type="text" onchange="fun('4-05'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="2">其他贷款</td>
<td><input id="4-06" type="text" onchange="fun('4-06'),output('g2')"></td>
<td></td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold">负债总计</td>
<td id="g4"></td>
<td></td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold">净资产</td>
<td id="net"></td>
<td></td>
</tr>
</table>
</body>
</html>
乍一看代码挺多的,实际上没啥东西,只不过需要做一个工作,就是把每一个有用的输入框全部都给上相应的ID,这第一个表格就是分为了四块,ID对应的就是“1-xx“(现金与现金等价物)、“2-xx“(其他金融资产)、“3-xx“(实物资产)、“4-xx“(负债)。
再者就是关于动态更新,利用了onchange函数,每次在单元格内容发生变化时触发里面相应的函数,也就是下面写的两个函数fun()和output(),fun 用来记录数值并对其进行计算,output则是将结果输出到对应的单元格。
下面我们再来看看对应的这个表格的js程序片段:
var g01= new Array("1-00","1-01","1-02","1-03" ,"1-04","g1","2-01","2-02","2-03","2-04","2-05","2-06","2-07","2-08","2-09","2-10","2-11","2-12","g2","g12","3-01","3-02","3-03","3-04","3-05","3-06","g3","g4","4-01","4-02","4-03","4-04","4-05","4-06","sum","net");
//储存ID的数组
var g02= new Array(36);//储存对应数值的数组
for (var i = g02.length - 1; i >= 0; i--) {
g02[i] =0;
}
function fun(idx) {
let tempid = document.getElementById(idx);
for (var i = g01.length - 1; i >= 0; i--) {
if (g01[i] === idx) {
g02[i] = Number(tempid.value);
//将输入的值转化成数值类型,不然输入的是字符型就没办法进行计算。
}
}
g02[5]=0;//现金与现金等价物小计
g02[18]=0;//其他金融资产小计
g02[19]=0;//金融资产小计
g02[26]=0;//实物资产小计
g02[27]=0;//资产总计
g02[34]=0;//负债总计
g02[35]=0;//净资产
for (var i = 0; i <= 4; i++) {
g02[5] += g02[i];
}
for (var i = 6; i <= 17; i++ ){
g02[18] += g02[i];
}
for (var i = 20; i <=25; i++) {
g02[26] += g02[i];
}
for( var i=28;i<=33;i++){
g02[34] -= g02[i];//g02[34]因为储存的是负债所以是负值,也就是用的-=。
}
{
g02[19]=g02[5]+g02[18];
g02[27]=g02[19]+g02[26];
g02[35]=g02[27] +g02[34];
}
}
function output(idx) {
let tempid = document.getElementById(idx);
document.getElementById('g1').innerHTML=g02[5];
document.getElementById('g2').innerHTML=g02[18];
document.getElementById('g12').innerHTML=g02[19];
document.getElementById('g3').innerHTML=g02[26];
document.getElementById('sum').innerHTML=g02[27];
document.getElementById('g4').innerHTML=g02[34];
document.getElementById('net').innerHTML=g02[35];
}
第一个表比较简单,主要思想就是将数值和ID分别存进两个数组,使之一一对应,就能根据ID查询出对应的数值。
接下来就是第一个表格的进阶版,也就更难了一些。为了大家方便查看效果,再把图片放在这里。
我们先一起来看看这个表格的对应的HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table,td {
margin: 0px auto;
text-align: center;
vertical-align:middle;
border-style: solid
}
</style>
</head>
<script src="js01.js"></script>
</script>
<body style=" background-color:#ffffff;">
<table border="1" cellspacing="0">
<tr>
<th colspan="6" width="400px"> 收入支出表</th>
</tr>
<tr>
<td style="font-weight:bold" bgcolor="#A3DB91">一、收入</td>
<td bgcolor="#A3DB91"></td>
<td width="50px" bgcolor="#A3DB91"></td>
<td style="font-weight:bold" bgcolor="#A3DB91">金额</td>
<td style="font-weight:bold" bgcolor="#A3DB91">占总收入比</td>
<td style="font-weight:bold" bgcolor="#A3DB91">备注</td>
</tr>
<tr>
<td rowspan="3">工资和薪金</td>
<td>姓名</td>
<td><input type="text" value="张三"></td>
<td><input id="a-01" type="text" onchange="fun1('a-01'),fun01('a')"></td>
<td id="a1-01"></td>
<td></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" value="李四"></td>
<td><input id="a-02" type="text" onchange="fun1('a-02'),fun01('a')"></td>
<td id="a1-02"></td>
<td></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" value="王五"></td>
<td><input id="a-03" type="text" onchange="fun1('a-03'),fun01('a')"></td>
<td id="a1-03"></td>
<td></td>
</tr>
<tr>
<td colspan="3">自雇收入(工资外收入)</td>
<td><input id="a-04" type="text" onchange="fun1('a-04'),fun01('a')"></td>
<td id="a1-04"></td>
<td></td>
</tr>
<tr>
<td colspan="3">奖金和佣金</td>
<td><input id="a-05" type="text" onchange="fun1('a-05'),fun01('a')"></td>
<td id="a1-05"></td>
<td></td>
</tr>
<tr>
<td colspan="3">养老金和年金</td>
<td><input id="a-06" type="text" onchange="fun1('a-06'),fun01('a')"></td>
<td id="a1-06"></td>
<td></td>
</tr>
<tr>
<td rowspan="3" height="70px">投资收入</td>
<td rowspan="3" colspan="2">利息和分红资本利得租金收入其他</td>
<td><input id="a-07" type="text" onchange="fun1('a-07'),fun01('a')"></td>
<td id="a1-07"></td>
<td></td>
</tr>
<tr>
<td><input id="a-08" type="text" onchange="fun1('a-08'),fun01('a')"></td>
<td id="a1-08"></td>
<td></td>
</tr>
<tr>
<td><input id="a-09" type="text" onchange="fun1('a-09'),fun01('a')"></td>
<td id="a1-09"></td>
<td></td>
</tr>
<tr>
<td colspan="3" bgcolor="#EAB496" >总收入</td>
<td bgcolor="#EAB496" id="a"></td>
<td bgcolor="#EAB496"></td>
<td bgcolor="#EAB496"></td>
</tr>
<tr>
<td style="font-weight:bold" bgcolor="#E8E7E3">二、支出</td>
<td colspan="2" bgcolor="#E8E7E3"></td>
<td style="font-weight:bold" bgcolor="#E8E7E3">金额</td>
<td style="font-weight:bold" bgcolor="#E8E7E3">占总支出比</td>
<td bgcolor="#E8E7E3"></td>
</tr>
<tr>
<td rowspan="2">住房</td>
<td colspan="2">租金、维护和装房贷</td>
<td><input id="b-01" type="text" onchange="fun1('b-01'),fun02('b')"></td>
<td id="b1-01"></td>
<td></td>
</tr>
<tr>
<td colspan="2">房贷</td>
<td><input id="b-02" type="text" onchange="fun1('b-02'),fun02('b')"></td>
<td id="b1-02"></td>
<td></td>
</tr>
<tr>
<td rowspan="3">家电、家具大件消费</td>
<td colspan="2">贷款支付</td>
<td><input id="b-03" type="text" onchange="fun1('b-03'),fun02('b')"></td>
<td id="b1-03"></td>
<td></td>
</tr>
<tr>
<td colspan="2">保险费</td>
<td><input id="b-04" type="text" onchange="fun1('b-04'),fun02('b')"></td>
<td id="b1-04"></td>
<td></td>
</tr>
<tr>
<td colspan="2">过路停车费</td>
<td><input id="b-05" type="text" onchange="fun1('b-05'),fun02('b')"></td>
<td id="b1-05"></td>
<td></td>
</tr>
<tr>
<td rowspan="6">日常生活开支</td>
<td colspan="2">水电暖</td>
<td><input id="b-06" type="text" onchange="fun1('b-06'),fun02('b')"></td>
<td id="b1-06"></td>
<td></td>
</tr>
<tr>
<td colspan="2">通讯</td>
<td><input id="b-07" type="text" onchange="fun1('b-07'),fun02('b')"></td>
<td id="b1-07"></td>
<td></td>
</tr>
<tr>
<td colspan="2">交通</td>
<td><input id="b-08" type="text" onchange="fun1('b-08'),fun02('b')"></td>
<td id="b1-08"></td>
<td></td>
</tr>
<tr>
<td colspan="2">日常生活用品</td>
<td><input id="b-09" type="text" onchange="fun1('b-09'),fun02('b')"></td>
<td id="b1-09"></td>
<td></td>
</tr>
<tr>
<td colspan="2">外出就餐</td>
<td><input id="b-10" type="text" onchange="fun1('b-10'),fun02('b')"></td>
<td id="b1-10"></td>
<td></td>
</tr>
<tr>
<td colspan="2">其他</td>
<td><input id="b-11" type="text" onchange="fun1('b-11'),fun02('b')"></td>
<td id="b1-11"></td>
<td></td>
</tr>
<tr>
<td colspan="3">购买衣物支出</td>
<td><input id="b-12" type="text" onchange="fun1('b-12'),fun02('b')"></td>
<td id="b1-12"></td>
<td></td>
</tr>
<tr>
<td colspan="3">个人护理支出</td>
<td><input id="b-13" type="text" onchange="fun1('b-13'),fun02('b')"></td>
<td id="b1-13"></td>
<td></td>
</tr>
<tr>
<td colspan="3">休闲娱乐</td>
<td><input id="b-14" type="text" onchange="fun1('b-14'),fun02('b')"></td>
<td id="b1-14"></td>
<td></td>
</tr>
<tr>
<td colspan="3">商业保险费用</td>
<td><input id="b-15" type="text" onchange="fun1('b-15'),fun02('b')"></td>
<td id="b1-15"></td>
<td></td>
</tr>
<tr>
<td colspan="3">医疗费用</td>
<td><input id="b-16" type="text" onchange="fun1('b-16'),fun02('b')"></td>
<td id="b1-16"></td>
<td></td>
</tr>
<tr>
<td colspan="3">其他项目</td>
<td><input id="b-17" type="text" onchange="fun1('b-17'),fun02('b')"></td>
<td id="b1-17"></td>
<td></td>
</tr>
<tr>
<td colspan="3" bgcolor="#D3B5E1" >总支出</td>
<td bgcolor="#D3B5E1" id="b"></td>
<td bgcolor="#D3B5E1"></td>
<td bgcolor="#D3B5E1"></td>
</tr>
<tr>
<td colspan="3" >现金结余(收入-支出)</td>
<td id="a-b"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold" >比率指标</td>
<td style="font-weight:bold" >比率值</td>
<td style="font-weight:bold" >公式</td>
<td style="font-weight:bold" >参考范围</td>
</tr>
<tr>
<td colspan="3">结余比率</td>
<td id="c1"></td>
<td>结余/税后收入</td>
<td>0.3</td>
</tr>
<tr>
<td colspan="3">投资与净资产比率</td>
<td id="c2"></td>
<td>投资资产/总资产</td>
<td>0.2</td>
</tr>
<tr>
<td colspan="3">清偿比率</td>
<td id="c3"></td>
<td>净资产/总资产</td>
<td>0.6-0.7</td>
</tr>
<tr>
<td colspan="3">负债比率</td>
<td id="c4"></td>
<td>负债总额/总资产</td>
<td>0.0-0.4</td>
</tr>
<tr>
<td colspan="3">财务负担比率</td>
<td id="c5"></td>
<td>债务支出/税后收入</td>
<td>0.4</td>
</tr>
<tr>
<td colspan="3">流动性比率</td>
<td id="c6"></td>
<td>流动性资产/月收入</td>
<td>3</td>
</tr>
</table>
</body>
</html>
其实仔细看看这个表跟第一个表格没什么区别,说就是多了一个占比,所以也是将整体分为了两块,分别是:ID->”a-xx”->收入、ID->”b-xx”->支出‘、ID->”cx”->下面的杂项。
这是需要主要的ID,占比单元格所对应的ID->”a1-xx”、”b1->xx”
重头戏来了,第二个表格的js片段:
var b01 = new Array("a-01","a-02","a-03","a-04","a-05","a-06","a-07","a-08","a-09","b-01","b-02","b-03","b-04","b-05","b-06","b-07","b-08","b-09","b-10","b-11",
"b-12",
"b-13",
"b-14",
"b-15",
"b-16",
"b-17","a","b","a-b");//id数组
var b02 =new Array(29);//数值数组
var m="a1-";//下面查找ID时要用的字符
var n="b1-";//下面查找ID时要用的字符
var l="0";//下面查找ID时要用的字符
for (var i = 0; i < b02.length; i++) {
b02[i]=0;
}//初始化
function fun1(idx){
let tempid = document.getElementById(idx);
for (var i = g01.length - 1; i >= 0; i--) {
if (b01[i] === idx) {
b02[i] = Number(tempid.value);
}
}
b02[28]=0;
b02[27]=0;
b02[26]=0;
for (var i=0;i<=8;i++){
b02[26]+=b02[i]
}
for (var i = 9; i <= 25; i++) {
b02[27] -= b02[i];
}
b02[28] = b02[27] + b02[26];
document.getElementById('a').innerHTML=b02[26];
document.getElementById('b').innerHTML=b02[27];
document.getElementById('a-b').innerHTML=b02[28];
//到这里为止都跟第一个表格的js是一样的,换汤不换药。
var x01 = b02[28]/b02[26];
x01=x01.toFixed(1);//toFixed函数是强制保留几位小数
document.getElementById('c1').innerHTML=x01;
document.getElementById('c3').innerHTML=x01;
var x02 = (b02[6]+b02[7]+b02[8])/b02[26];
x02=x02.toFixed(1);
document.getElementById('c2').innerHTML=x02;
var x03=(b02[10]+b02[11])/b02[26];
x03=x03.toFixed(1);
document.getElementById('c4').innerHTML=x03;
var x04=(b02[10]+b02[11])/b02[28];
x04=x04.toFixed(1);
document.getElementById('c5').innerHTML=x04;
var x05=(b02[0]+b02[1]+b02[2])/b02[3];
x05=x05.toFixed(1);
document.getElementById('c6').innerHTML=x05;
}
function fun02(idx){//对应的第二大块的计算占比的函数
for (var t = 10; t <=26; t++) {
var j=t-9;
if(t-9<=9){
var x=n+l+j;
//这里就用到了上面的设置的字符型变量,我的目的就是通过t和字符的组合,强行组合出每次循环所对应的ID值,例如第一遍循环,x="b1-01",第二遍x="b1-02",以此类推。
}
else{
var x=n+j;
}
var k=0;
k= b02[t-1]/(0-b02[27]);
if(k.toFixed(5)<=0.00001){
if(k.toFixed(8) == 0.00000000){
k="暂无";//因为初始化的是为0,所以检测是否为0,如果是,则此单元格还没有进行数值输入。
}
else{
k="<= 0.001%";
}
}
else{
k=(k.toFixed(2) *100).toFixed(1) + '%';
//进行组合输出。
}
document.getElementById(x).innerHTML=k;
}
}
function fun01(idx){//对应的第一大块的计算占比的函数
for (var i = 1; i <=10; i++) {
var z=m+l+i;
var k=b02[i-1]/b02[26];
if(k.toFixed(5)<=0.00001){
if(k.toFixed(8) == 0.00000000){
k="暂无";
}
else{
k="<= 0.001%";
}
}
else{
k=(k.toFixed(2) *100).toFixed(1) + '%';
}
document.getElementById(z).innerHTML=k;
}
}