使用html+css+javaScript技术实现以下功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用html+css+javaScript技术实现以下功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3525字，纯文字阅读大概需要6分钟。
内容图文
使用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="";
}
如果对你有所帮助，点个赞哦！
内容总结
以上是互联网集市为您收集整理的使用html+css+javaScript技术实现以下功能全部内容，希望文章能够帮你解决使用html+css+javaScript技术实现以下功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。