欢迎使用CSDN-markdown编辑器

来源：互联网发布：淘宝网商城清仓特价编辑：程序博客网时间：2024/06/05 15:44

说明：（腾讯前端培训十天）封装一个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;}

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

0 0