您的位置：首页 > 职场人生

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

2013-01-25 14:53 399 查看

-------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";
}
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航