欢迎使用CSDN-markdown编辑器

最新推荐文章于 2024-08-19 20:53:10 发布

1037772372

最新推荐文章于 2024-08-19 20:53:10 发布

阅读量161

点赞数

分类专栏： vue 文章标签： html 前端

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

说明：（腾讯前端培训十天）封装一个select组件。
效果图如下：
select图

主要代码如下：
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿select</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <section class="warp">
        <div class="searchIpt clearFix">
            <div class="clearFix">
                <input type="text" class="keyWord" value="" />
                <input type="button" value="GO">
                <span></span>
            </div>
            <ul class="list">
                <li>html+css</li>
                <li>html5+css3</li>
                <li>javascript</li>
                <li>angular</li>
                <li>react</li>
                <li>vue</li>
                <li>jquery</li>
                <li>nodejs</li>
            </ul>
        </div>
    </section>
</body>
</html>

JS:

    <script>
        var keyWord = document.querySelector('.keyWord');
        var list = document.querySelector('.list');
        var lis = list.querySelectorAll('li');

        keyWord.onfocus = function() {
            list.style.display = 'block';
        }

        keyWord.onblur = function() {
            setTimeout(function() {
                list.style.display = 'none';
            }, 80);
        }

        for (var i=0; i<lis.length; i++) {
            lis[i].onclick = function() {
                for (var i=0; i<lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'active';
                console.log( this.innerHTML );
                keyWord.value = this.innerHTML;
            }
        }
    </script>

CSS:

body{
    margin:0;
    font-family:"微软雅黑";
}
ul,li{
    margin:0;
    padding:0;
    list-style:none;
}
input{
    outline:none;
    cursor: pointer;
}
.clearFix:after{
    display: block;
    content:'';
    clear:both;
}
.warp{
    width: 348px;
    padding:100px 76px 50px;
    margin:50px;
    background:url(images/select_bg.png) no-repeat;
    box-shadow:2px 2px 10px #6789ad;
}
.searchIpt{
    position: relative;
    width: 336px;
    border:1px solid #3736ae;
    padding:5px;
    border-radius:24px;
    background: #e4e4fe;
}
.searchIpt input{
    line-height: 34px;
    border-radius:18px;
}
.searchIpt input:nth-of-type(1){
    float: left;
    width: 228px;
    padding-left: 40px;
    border:1px solid #c9c9d5;
    background: #d9d9e2;

}
.searchIpt input:nth-of-type(2){
    float: right;
    width: 58px;
    height: 36px;
    border:1px solid #fd635e;
    background: #fd635e;
}
.searchIpt span{
    position: absolute;
    top:12px;
    left: 15px;
    width: 23px;
    height: 23px;
    background: url(images/select_search.png) no-repeat;
}
.searchIpt input:nth-of-type(1):focus{
    background: #fff;
    border-color:#fd635e;
}
.list{
    margin-top:9px;
}
.list li{
    margin:3px 0;
    color:#333;
    line-height: 30px;
    padding-left: 16px;
    width: 270px;
    box-sizing:border-box;
    border-radius:14px;

}
.list li.active,.list li:hover{
    color:#fff;
    background: #fd635e;
    cursor: pointer;
}

后记：希望在接下来的两天能学到更多，同时谢谢腾讯的大神们！给我们提供这么好的学习资源。每天进步一点点，共勉。

1037772372

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
欢迎使用CSDN-markdown编辑器

说明：（腾讯前端培训十天）封装一个select组件。效果图如下：主要代码如下： HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿select</title> <link rel="stylesheet" type="text/css" href="./style
复制链接

扫一扫