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

墨蓝 2022-04-01 13:13 274阅读 0赞

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

![1359096938_7814.JPG][]

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

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

\--------------------------------------------------------------------------------------------------------------------------------------------------------

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

显示了但不能用  给出代码

<!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="添加记录" οnclick="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></td>
    	</tr>
    
    </table>
    <hr />
    <table id="dst">
    	<tr>
    		<th>序号</th>
    		<th>类别</th>
    		<th>金额</th>
    		<th>日期</th>
    		<th>备注</th>
    		<th>结余</th>
    
    </table>	
    
    </body>
    </html>

[1359096938_7814.JPG]: https://img-my.csdn.net/uploads/201301/25/1359096938_7814.JPG