js求和

最新推荐文章于 2024-01-18 11:04:48 发布

因火成烟

最新推荐文章于 2024-01-18 11:04:48 发布

阅读量891

点赞数

文章标签： web前端 js html css

本文链接：https://blog.csdn.net/TheFoma/article/details/44837861

版权

在input 中输入数字，输入方式以“,”分割，利用正则表达式找出来中的数字，利用split把找到的数字放到数组中，因为刚开始是String类型，在计算时需要转换类型，使用parsetInt转换为整型Int型。

放上js代码

var oInput = document.getElementsByTagName("input")[0];
var oBtn = document.getElementsByTagName("button")[0];
var sum = document.getElementById("sum");
oInput.onkeyup =function(){
	this.value = this.value.replace(/[^(\d)|(,)]/,"");
}
oBtn.onclick = function (){
	var s = 0;
	var	oInput = document.getElementsByTagName("input")[0].value.split(",");
	for(var i in oInput)
	{
		s = s+ parseInt(oInput[i]);
	}
	sum.innerHTML =s;
}

使用innerHTML了把结果放到页面上打印出来

css代码

#cc{
	width: 500px;
	margin: 0 auto;
}
#sum{
	color: red;
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="d.css">
</head>
<body>
<div id="cc">
	<input type="text" value="1,2,3,4,5,6,7,8,9"><label>输入数字，每个数字以，号结束</label><br/>
	<button type="submit">求和</button>
	<div id="sum"></div>
</div>
	<script src="d.js"></script>
</body>
</html>