黑马程序员——自己写的一个网页版简易账本

来源：互联网发布：java中getname方法编辑：程序博客网时间：2024/05/16 05:02

-------android培训、java培训、期待与您交流！ ----------

根据毕老师的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";}elsetabRows[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 = "";}elsethis.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";}elsetabRows[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;}elsereturn true;}return false;/*不是这样for (var x=0; x<num.length; x++){if (num[x]<=0 && num[x]>=9){continue;}elsereturn true;}return false;*/}//dstnum  目标表格序号  刚开始表格只有标题行 所以先将dstnum=0//定义一个标记 刚开始为false  dstnum=0  开始添加后为TRUEvar 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;}elsemoney = 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";elsenewNode.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>