JS 练手小dome (做一个小计算器!!!)_如何制作一个dome能计算的公式-CSDN博客

本文介绍了一个使用JavaScript实现的简单数字求和器。用户在输入框中输入一系列由逗号分隔的数字，点击求和按钮后，程序将计算这些数字的总和并显示在页面上。此代码示例展示了如何通过DOM操作获取用户输入，解析数字，并更新页面元素。

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

练手网址(目标)

在这里插入图片描述

$可以看到图中由一个 i n p u t 框, 下面跟一个 b u t t o n 按钮$

$然后点击求和显示结果 (其实显示在下面的 p 标签内)$

$也就是给 b u t t o n 加上 o n c l i c k 时间$

$先用 J S 获取元素 i n p u t 框，再用 . v a l u e 获取文本值$

<script>
		var text=document.getElementById("kkk");//获取input文本框
		var s=document.getElementById("bbb");//获取p标签
		s.onclick=function()
		{
			var content=text.value;
			var ans=0,temp=0;
			for(var i=0;i<content.length;i++)
			{
				if(content[i]==',')	ans+=temp,temp=0;
				else	temp=temp*10+(content[i]-'0');//因为是字符,减去'0'
			}
			ans+=temp;
			document.getElementById("answer").innerHTML=ans;
		}
	</script>

完整代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#container{
			width:600px;
			margin-left:60px;
			margin-top:20px;
		}
		#container>span{
			color:gray;
			font-size:14px;
		}
		#kkk{
			width:320px;height:25px;
		}
		#bbb{
			width:70px;height:25px;
			font-size:20px;
			line-height:10px;
		}
		#answer{
			color:red;
			font-weight:bold;
			font-size:40px;
			margin-top:20px;
		}
	</style>
</head>
<body>
	<div id="container">
		<input type="text" id="kkk">
		<span>输入数字求和，数字之间用半角","号分隔</span>
		<br/><br/>
		<button id="bbb">求和</button>
		<p id="answer">hhh</p>
	</div>
	<script>
		var text=document.getElementById("kkk");
		var s=document.getElementById("bbb");
		s.onclick=function()
		{
			var content=text.value;
			var ans=0,temp=0;
			for(var i=0;i<content.length;i++)
			{
				if(content[i]==',')	ans+=temp,temp=0;
				else	temp=temp*10+(content[i]-'0');
			}
			ans+=temp;
			document.getElementById("answer").innerHTML=ans;
		}
	</script>
</body>
</html>