使用 最后 如果对你有所帮助，点个赞哦！
html+css+javaScript技术实现以下功能，输入起始数和终止数（注意：起始数小于终止数），计算其累加和，如下图所示：
这里先说一下思路：
1，边框是两种颜色，而且是两层，说明至少要用两个div嵌套，而且设置边框颜色的时候需要分上下左右，不能直接一个border全部设置。
2，第一点说了两个div区块，所以两者的位置最好用父相子绝的模式固定位置
3，js简单操作DOM就能实现功能，注意的点是起始数要小于终止数，还有题目并没有说起始数是大于0的。
先来看看我的效果图：
这里在完成任务的前提下，做了一些微调：
1，div里面填充了背景颜色
2，input边框颜色改成了比较配合主题的颜色
3，输入框里面鼠标光标颜色换了
4，在输入框被选中的时候，该输入框的边框颜色会变为显眼的红色，效果如下图所示
5，方形输入框改成了圆角输入框
还可以对字体样式做一些调整的，这里不展示了
接下来看看具体代码的实现。
html部分代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>小练习</title> </head> <body> <div id="div"> <div id="div1"> <div id="div2"> <p class="font">计算任意区间内连续自然数的累加和</p> <p class="font">定义区间</p> 起始数：<input type="text"id="sta"placeholder="0"> 终止数：<input type="text"id="end"placeholder="0"><br><br><br> 累加值：<input type="text"id="sum"readonly><br><br><br> <button id="button1"οnclick=sum()>计算</button> <button id="button2"οnclick=cle()>清空</button> </div> </div> </div> </body> </html> css样式代码如下：#div{ height:416px; width:616px; border-left: 8px solid black; border-top: 8px solid black; border-right: 8px solid aquamarine; border-bottom:8px solid aquamarine; top:100px; left: 200px; position: relative; } #div1{ height:400px; width:600px; border-left: 8px solid aquamarine; border-top: 8px solid aquamarine; border-right: 8px solid black; border-bottom:8px solid black; position: absolute; background-color: bisque; } #div2{ position: absolute; margin: 30px; } .font{ text-align: center; font-size:25px; font-weight: 1000; } #button1{ background-color: lightgreen; border:2px solid orchid; margin: 30px; border-radius:5px; outline: none;/*去掉外边框*/ line-height: 20px; } #button2{ background-color: lightgreen; border:2px solid orchid; margin: 30px; border-radius:5px; outline: none; line-height: 20px; } #sta{ margin-right: 30px; caret-color:aquamarine;/*设置鼠标光标颜色*/ background-color: cornsilk; border:1px solid aquamarine; outline: none;/*取消外边框*/ line-height: 20px;/*行高*/ border-radius:5px;/*边框圆角*/ } #sta:focus{/*输入框选中时的样式*/ border:2px solid orangered; } #end{ margin-right: 30px; caret-color:aquamarine;/*设置鼠标光标颜色*/ background-color: cornsilk; border:1px solid aquamarine; outline: none;/*取消外边框*/ line-height: 20px; border-radius:5px; } #end:focus{ border:2px solid orangered; } #sum{ margin-right: 30px; caret-color:aquamarine;/*设置鼠标光标颜色*/ background-color: cornsilk; border:1px solid aquamarine; outline: none;/*取消外边框*/ line-height: 20px; border-radius:5px; } JavaScript部分代码：// 获取id并返回 function $(id){ return document.getElementById(id); } function sum(){ var sta = document.getElementById("sta").value; sta=parseInt(sta) var end = document.getElementById("end").value; end=parseInt(end) var s=0; if(sta<end){ for(i=sta;i<=end;i++){ s=s+i; console.log(s); } document.getElementById("sum").value=s; }else{ alert("请输入正确是数据区间！"); } } function cle(){ var sum = document.getElementById("sum").value; sum = parseInt(sum) if(true){//只要用了清空，就清空，永远为真 document.getElementById("sta").value=""; document.getElementById("end").value=""; document.getElementById("sum").value=""; }else{ alert("已经处于清空状态！") } // document.getElementById("sta").value=""; // document.getElementById("end").value=""; }
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
