简单的js加法器

最新推荐文章于 2024-04-07 19:45:45 发布

原创最新推荐文章于 2024-04-07 19:45:45 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Web前端同时被 2 个专栏收录

6 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单加法器程序。该程序允许用户动态添加输入框以输入数值，并提供删除按钮移除输入项。通过鼠标移出输入框触发计算功能，程序能够实时更新所有有效数值之和。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在網上找來的一篇不錯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.onmouseout=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 onclick=add()>添加</button>
<table id="addall">
<tr>
<td>价格</td>
<td>删除键</td>
</tr>
<tr>
<td><input name="shit" onmouseout=sum()></input></td>
<td><button onclick=del(this)>del</button></td>
</tr>
</table>
<input id="output" disabled=disabled>总计</input>
</body>
</html>