使用html+css+javaScript技术实现以下功能
作者：互联网
使用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="";
}
如果对你有所帮助，点个赞哦！
标签：solid,javaScript,边框,color,html,8px,aquamarine,border,css 来源： https://blog.csdn.net/will__be/article/details/106668795