在網上找來的一篇不錯js加法器的程序,供大家一起學習
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--文档规范-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--字符集-->
<title>加法器</title><!--标题集-->
<style type="text/css">
td{border-width:2px;width:100px;}
input{width:200px;}
#output{width:200px; margin:2px;}
button{width:50px;}
td:nth-child(2n-1){width:400px; text-align:center;}
tr:nth-child(2n-1){background-color:#eeeeee;}
</style>
<h3>加法器</h3>
<script type="text/javascript">
var i = 0;
function del(x){
var index = x.parentNode.parentNode.rowIndex;
document.getElementById("addall").deleteRow(index);
sum();
}
function add(){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var input = document.createElement("input");
input.name = "shit";
input.οnmοuseοut=function(){sum();}
td1.appendChild(input);
tr.appendChild(td1);
var td2 = document.createElement("td");
var btn = document.createElement("button");
btn.onclick = function(){del(this);}
btn.innerHTML = "del";
td2.appendChild(btn);
tr.appendChild(td2);
document.getElementsByTagName("tbody")[0].appendChild(tr);
}
function sum(){
var shits = document.getElementsByName("shit");
var cnt = 0;
for(var i = 0; i < shits.length; i++){
// alert(shits[i].value);
var str = shits[i].value.match(/[-+]?\d+/g);
if(str != null)
shits[i].value = str[0];
else{
// alert(x);
shits[i].value = "";
}
if(!isNaN(shits[i].value) && shits[i].value != ""){
cnt += parseInt(shits[i].value,10);
}
}
if(isNaN(cnt))cnt = 0;
document.getElementById("output").value = cnt;
}
</script>
</head>
<body>
<button οnclick=add()>添加</button>
<table id="addall">
<tr>
<td>价格</td>
<td>删除键</td>
</tr>
<tr>
<td><input name="shit" οnmοuseοut=sum()></input></td>
<td><button οnclick=del(this)>del</button></td>
</tr>
</table>
<input id="output" disabled=disabled>总计</input>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--文档规范-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--字符集-->
<title>加法器</title><!--标题集-->
<style type="text/css">
td{border-width:2px;width:100px;}
input{width:200px;}
#output{width:200px; margin:2px;}
button{width:50px;}
td:nth-child(2n-1){width:400px; text-align:center;}
tr:nth-child(2n-1){background-color:#eeeeee;}
</style>
<h3>加法器</h3>
<script type="text/javascript">
var i = 0;
function del(x){
var index = x.parentNode.parentNode.rowIndex;
document.getElementById("addall").deleteRow(index);
sum();
}
function add(){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var input = document.createElement("input");
input.name = "shit";
input.οnmοuseοut=function(){sum();}
td1.appendChild(input);
tr.appendChild(td1);
var td2 = document.createElement("td");
var btn = document.createElement("button");
btn.onclick = function(){del(this);}
btn.innerHTML = "del";
td2.appendChild(btn);
tr.appendChild(td2);
document.getElementsByTagName("tbody")[0].appendChild(tr);
}
function sum(){
var shits = document.getElementsByName("shit");
var cnt = 0;
for(var i = 0; i < shits.length; i++){
// alert(shits[i].value);
var str = shits[i].value.match(/[-+]?\d+/g);
if(str != null)
shits[i].value = str[0];
else{
// alert(x);
shits[i].value = "";
}
if(!isNaN(shits[i].value) && shits[i].value != ""){
cnt += parseInt(shits[i].value,10);
}
}
if(isNaN(cnt))cnt = 0;
document.getElementById("output").value = cnt;
}
</script>
</head>
<body>
<button οnclick=add()>添加</button>
<table id="addall">
<tr>
<td>价格</td>
<td>删除键</td>
</tr>
<tr>
<td><input name="shit" οnmοuseοut=sum()></input></td>
<td><button οnclick=del(this)>del</button></td>
</tr>
</table>
<input id="output" disabled=disabled>总计</input>
</body>
</html>