可 以 看 到 图 中 由 一 个 i n p u t 框 , 下 面 跟 一 个 b u t t o n 按 钮 可以看到图中由一个input框,下面跟一个button按钮 可以看到图中由一个input框,下面跟一个button按钮
然 后 点 击 求 和 显 示 结 果 ( 其 实 显 示 在 下 面 的 p 标 签 内 ) 然后点击求和显示结果(其实显示在下面的p标签内) 然后点击求和显示结果(其实显示在下面的p标签内)
也 就 是 给 b u t t o n 加 上 o n c l i c k 时 间 也就是给button加上onclick时间 也就是给button加上onclick时间
先 用 J S 获 取 元 素 i n p u t 框 ， 再 用 . v a l u e 获 取 文 本 值 先用JS获取元素input框，再用.value获取文本值 先用JS获取元素input框，再用.value获取文本值
<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>
