使用html+css+javaScript技术实现以下功能

2020-06-11 13:38:25 阅读：251 来源： 互联网

标签：solid javaScript 边框 color html 8px aquamarine border css

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用html+css+javaScript技术实现以下功能