特定区间内自然数的累加
通过输入框,输入两个数字建立区间,计算出之间数字的累加值
效果图:
先上基础布局代码:
<div>
<h2 align="center">定义区间</h2>
<form>
起始数:<input type="number" placeholder="请输入起始数" id="start" />
终止数:<input type="number" placeholder="请输入终止数" id="end" />
<br />
累加和:<input type="number" id="finish" />
<br />
<button type="button" id="btn">计算</button>
<button type="reset">清空</button>
</form>
</div>
再来是样式:
<style>
div{
width: 560px;
height: 260px;
margin: 20px auto;
border: 18px groove rgb(81, 231, 81);
font-weight: bold;
line-height: 1.5em;
}
form{
margin: 20px 20px;
padding: 5px;
}
input{
margin-bottom: 5px;
height: 20px;
border-radius: 3px;
border: 2px solid rgb(65, 117, 100);
}
button{
width: 60px;
height: 35px;
border-radius:4px;
margin: 5px 15px;
cursor: pointer;
}
</style>
最后是关键的js部分:
<script>
// 1.获取元素标签
var start=document.getElementById('start');
var end=document.getElementById('end');
var finish=document.getElementById('finish');
var btn=document.getElementById('btn');
var sum=0;
btn.onclick=function(){
// 2.对各种可能输入出错的情况进行判断
if(start.value == '' || start.value == null || end.value == '' || end.value == null){
alert("请完整填写数据后再提交");
}else if(finish.value != ''){
alert("请清空结果栏后再提交");
}else if(start.value >= end.value){
alert("起始数必须小于终止数,请重新输入");
}else{
// 3.设计进行运算
// a.input框的value值是string字符串类型,只有将类型转换为int或者float后才能进行运算
n1=parseInt(start.value);
n2=parseInt(end.value);
for (var i=n1; i<=n2; i++) {
sum +=i;
}
//将计算后的结果赋值到结果框
finish.value=sum;
// b.赋值回显后必须将sum值归零,否则会重复和第二次的输入值累加
sum=0;
}
}
</script>
一个简单的小案列,希望能对大家有帮助。