JavaScript小案例(一）自然数的累加

特定区间内自然数的累加

通过输入框，输入两个数字建立区间，计算出之间数字的累加值

效果图：

先上基础布局代码：

<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>

一个简单的小案列，希望能对大家有帮助。