自己写的一个网页版简易账本

最新推荐文章于 2024-09-06 18:23:11 发布

luck638

最新推荐文章于 2024-09-06 18:23:11 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： css html javascript

本文链接：https://blog.youkuaiyun.com/luck638/article/details/8542022

学习笔记专栏收录该内容

13 篇文章

订阅专栏

这是一个根据毕老师HTML+CSS+JavaScript教程制作的简易账本程序。它具备基本的记账功能，用户可以添加收入或支出记录，并自动计算结余。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据毕老师的HTML+CSS+JavaScript教程自己琢磨着写出来的一个简易账本，功能很简单，但每一个字符都是自己敲出来的，清楚他们的功能，还是很有成就感的！先看下概貌吧！

***************************************************************************************************************************

看能不能直接在这里显示出来

--------------------------------------------------------------------------------------------------------------------------------------------------------

类别	金额	日期	备注
收入支出

序号	类别	金额	日期	备注	结余

***************************************************************************************************************************

显示了但不能用给出代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易账本</title>

<style type="text/css">

table{
		border: red 2px solid;
		text-align: center;
		border-collapse: collapse;
		width: 600px;
		background: #CCFF99;
	}

table td, table th{
		border: red 1px solid;
	}

table th{
		background: #99CC33;
	}

.one{
		background: #66FFFF;
	}
.two{
		background: #66FF33;
	}

.over{
		background: #FF66FF;
	}

#click{
		background: #FF6600;
	}
</style>

<script type="text/javascript">

var styleName;

onload = function()
{
	var tabNode = document.getElementById("dst");

	var time = new Date();
	//alert(time.getYear()+"-"+(time.getMonth()+1)+"-"+time.getDate());
	var sysTime = time.getYear()+"-"+(time.getMonth()+1)+"-"+time.getDate();
	//alert(sysTime);
	var timeText = document.getElementById("riqi");
	//alert(timeText.innerHTML);
	timeText.value = sysTime;
	//alert(timeText.text);
	var tabRows = tabNode.rows;
	for (var x=1; x<tabRows.length; x++)
	{
		if (x%2==1)
		{
			tabRows[x].className = "one";
		}
		else
			tabRows[x].className = "two";
		
		loadEvent(tabRows[x]);
		/*tabRows[x].onmouseover = over();
		tabRows[x].onmouseout = out();
		tabRows[x].onclick = click();
		*/
	}
}

function loadEvent(node)
{
	node.onmouseover = function()
	{
		styleName = this.className;
		this.className = "over";
	}
	node.onmouseout = function()
	{
		this.className = styleName;
	}
	node.onclick = function()
	{
		if (this.id=="click")
		{
			this.id = "";
		}
		else
			this.id = "click";
	}
}

/*function reload(node)
{
	var tabNode = document.getElementById("dst");
	var tabRows = tabNode.rows;
	for (var x=1; x<tabRows.length; x++)
	{
		if (x%2==1)
		{
			tabRows[x].className = "one";
		}
		else
			tabRows[x].className = "two";

		tabRows[x].onmouseover = over();
		tabRows[x].onmouseout = out();
		tabRows[x].onclick = click();

	}
	
}*/

function isNotNum(num)
{
	for (var x=0; x<num.length; x++)
	{
		var s = num.charAt(x);
		if (s>=0 && s<=9)
		{
			continue;
		}
		else
			return true;
	}
	return false;
	
	/*不是这样
	for (var x=0; x<num.length; x++)
	{
		if (num[x]<=0 && num[x]>=9)
		{
			continue;
		}
		else
			return true;
	}
	return false;
	*/
}

//dstnum  目标表格序号  刚开始表格只有标题行 所以先将dstnum=0
//定义一个标记 刚开始为false  dstnum=0  开始添加后为TRUE
var flag = false;
function addList()
{
	//var tabNode = document.getElementById("src");
	var shouzhi = document.getElementsByName("shouzhi");
	//alert(shouzhi[0].checked);
	var leibie = shouzhi[0].checked?true:false;	//true为收入 false为支出
	//alert(leibie);
	var money = document.getElementsByName("money")[0].value;
	//alert(money);
	if (money=="")
	{
		alert("请输入金额！");
		return;
	}
	else if (isNotNum(money))
	{
		alert(isNotNum(money)+"你输入的"+money+"不正确");
		return;
	}
	else
		money = parseInt(money);
	
	var riqi = document.getElementById("riqi").value;
	//alert(riqi);
	var note = document.getElementById("note").value;
	//alert(note);
	/*----------------获取信息完毕 开始增加-------------------*/
	var tabNode = document.getElementById("dst");
	var tabRows = tabNode.rows;
	//var size = tabRows.length-1;
	//alert(tabRows.length);
	var cols = tabRows[tabRows.length-1].cells;
	var dstnum, jieyu;
	if (!flag)
	{
		dstnum = 0;
		jieyu = money;
		flag = true;
	}
	else
	{
		dstnum = parseInt(cols[0].innerText);
		var srcJieyu = parseInt(cols[cols.length-1].innerText);
		jieyu = leibie?srcJieyu+money:srcJieyu-money;
	}
	//alert(dstnum);
	var dstlei = leibie?"收入":"支出";
	
	//alert(jieyu);
	//var newNode = document.createElement("tr");
	//alert(newNode.nodeName);
	var newNode = tabNode.insertRow(tabRows.length);
	for (var x=0; x<cols.length; x++)
	{
		//alert(x);
		newNode.insertCell();
	}
	if (dstnum%2==1)
		//tabRows[tabRows.length-1].childNodes[0].className = "two";
		newNode.className = "one";	
	else
		newNode.className = "two";
	
	loadEvent(newNode);
	//alert(newNode.cells[0].innerText+"::"+tabRows[tabRows.length-1].className+"::"+newNode.className);
	//newNode.height = 99;
	/*这些事件加不上吗？
	newNode.onmouseover = over();
	newNode.onmouseout = out();
	newNode.onclick = click();
	*/
	var newcols = newNode.cells;
	//alert(newcols.length);
	newcols[0].innerText = dstnum+1;
	newcols[1].innerText = dstlei;
	newcols[2].innerText = money;
	newcols[3].innerText = riqi;
	newcols[4].innerText = note;
	newcols[5].innerText = jieyu;

	/*内容还真难加 怎么弄呢
	//var newNode = tabRows[tabRows.length];
	//newNode.innerHTML = "'<td>'+'(dstnum+1)'+'</td><td>'+'dstlei'+'</td><td>'+'money'+'</td><td>'+'riqi'+'</td><td>'+'note'+'</td><td>'+'jieyu'+'</td>'";
	//(newNode.cells)[0].innerText = 55;
	//cols[0].innerText = 999;
	alert(newNode.nodeName);
	newNode.height = 99;
	//newNode.innerText = "点击斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较经济";
	newNode.innerHTML = "<td>的的点对点的的的点对点的</td>";
	*/
}

</script>

</head>

<body>

<!--简易账本-->

<table id="src">
	<tr>
		<th>类别</th>
		<th>金额</th>
		<th>日期</th>
		<th>备注</th>
		<td rowspan=2><input type="button" value="添加记录" onclick="addList()" /></td>
	</tr>
	
	<tr>
		<td><input type="radio" name="shouzhi" value="shouru" checked="checked" />收入<br/>
			<input type="radio" name="shouzhi" value="zhichu" />支出
		</td>
		<td><input type="text" name="money" size="15" /></td>
		<td><input type="text" id="riqi" size="15" /></td>
		<td><textarea id="note" size="15"></textarea><!--input type="text" name="note" /--></td>
	</tr>

</table>
<hr />
<table id="dst">
	<tr>
		<th>序号</th>
		<th>类别</th>
		<th>金额</th>
		<th>日期</th>
		<th>备注</th>
		<th>结余</th>

</table>	

</body>
</html>