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

高境

根据毕老师的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" />收入
<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>

复制代码

梁俊 · 梁俊

你这，一关页面，帐就都没了吧

胡勇敏 · 胡勇敏

考虑了持久化存储么？

yong230 · yong230

值得鼓励下!

姚永生 · 姚永生

请问楼主这个花了多长时间写的？

鲁柯 · 鲁柯

梁俊发表于 2013-1-25 16:06你这，一关页面，帐就都没了吧

是呀，就为这个苦恼呢，J a v a s c ri p t 不能直接操作磁盘文件

鲁柯 · 鲁柯

胡勇敏发表于 2013-1-25 16:29考虑了持久化存储么？

考虑了但还不知道方法，J s 不能操作磁盘文件，等到网吧了再找点资料

鲁柯 · 鲁柯

姚永生发表于 2013-1-25 20:44请问楼主这个花了多长时间写的？

一直在随着毕老师的进度练习，到最后算个总结吧。做这个大概用了快两个小时吧

帐号		自动登录	找回密码
密码			加入黑马

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

评分

7 个回复

评分

优秀作者

黑马骑士勋章