html书签展示（带搜索）

最新推荐文章于 2024-04-25 11:14:38 发布
dengliu_2017
最新推荐文章于 2024-04-25 11:14:38 发布
阅读量2.1w
点赞数
原文链接：http://www.cnblogs.com/jjxhp/p/11603253.html
版权
源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>书签管理器</title>
        <style type="text/css">
            *{margin: 0;padding: 0;box-sizing:border-box;font-size: 13px;}
            html,body{width: 100%;height: 100%}
            ul,
            li {
                list-style: none;
            }
            #container{
                width: 100%;
                height: 100%;
                background-color: #b2c8bb;
                display: flex;
                flex-direction: column;
            }
            #container .header {
                height: 60px;
                background: #4e4949;
                display: flex;
            }
            #container .header .header-left{
                flex: 1;
            }
            #container .header .header-left .bks{
                color: #fff;
                margin-top: 25px;
                margin-left: 20px;
            }
            #container .header .header-right{
                flex: 5;
            }
            #container .header .header-right .search{
                position: relative;
                top: 10px;
                left: 15%;
                width: 50%;
                height: 40px;
                background: #313030;
                border-radius: 4px;
                padding: 8px 10px;
            }
            #container .header .header-right .search #placeholder{
                display: block;
                position: absolute;
                top: 10px;
                left: 12px;
                color: #ddd;
                font-size: 14px;
                cursor: text;
            }
            #container .header .header-right .search .search-input{
                width: 100%;
                height: 100%;
                background: transparent;
                color: #fff;
                font-size: 14px;
                border: none;
                outline: none;
            }
            #container .main{
                flex: 1;
                display:flex;
                overflow:hidden;
            }
            #container .main .main-left{
                flex:1;
            }
            #container .main .main-right{
                flex:5;
                overflow-y: scroll;
            }
            #container .main .main-right #dataList{
                width: 60%;
                position: relative;
                top: 20px;
                left: 15%;
                margin-bottom: 40px;
            }
            #container .main .main-right #dataList .list-li {
                width: 100%;
                height: 42px;
                line-height: 30px;
                margin-bottom: 3px;
                cursor: pointer;
                border: 1px solid #fff;
                padding: 5px 10px;
                background-color: #fff;
                border-radius: 4px;
                overflow: hidden;
                box-shadow: 5px 5px 10px #888;
                -webkit-transition:all 0.15s;
                -moz-transition:all 0.15s;
                -o-transition:all 0.15s;
            }
            #container .main .main-right #dataList .list-li:hover {
                -webkit-transform:scale(1.025);
                -moz-transform:scale(1.025);
                -o-transform:scale(1.025);
            }
            #container .main .main-right #dataList .list-li .icon {
                position: relative;
                top: 3px;
                left: 0px;
            }
            #container .main .main-right #dataList .list-li .text {
                margin-left: 5px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                // 获取数据源
                var dataSource = document.getElementById("dataSource");
                // 获取list容器
                var dataList = document.getElementById("dataList");
                dataList.innerHTML = "";
                // 循环插入数据
                var list = dataSource.getElementsByTagName("A");
                // 统计
                document.getElementById("bk_sum").innerHTML = list.length;
                for(var i = 0; i < list.length; i++) {
                    var data = list[i];
                    var li = createLi(data.href,data.getAttribute("ICON"),data.innerHTML);
                    dataList.appendChild(li);
                }
            }
            // 搜索内容
            var timer = null;
            function searchValue(){
                var searchText = document.getElementById("searchInput").value;
                // 删除placeholder
                var placeholder = document.getElementById("placeholder");
                if(searchText.length > 0){
                    placeholder.style.display="none";
                }else{
                    placeholder.style.display="block"
                }
                // 判断输入值是否是空格，若是，则返回
                if(searchText.length > 0 && searchText.replace(/(^\s*)|(\s*$)/g, "") == "" ){
                    return;
                }
                // 延迟搜索
                clearTimeout(timer);
                timer = setTimeout(function(){
                    updateDataList();
                    clearTimeout(timer);
                },300);
            }
            // 更新书签列表方法
            function updateDataList(){
                var searchText = document.getElementById("searchInput").value.replace(/(^\s*)|(\s*$)/g, "");
                // 获取资源库
                var dataSource = document.getElementById("dataSource");
                var list = dataSource.getElementsByTagName("A");
                // 初始化一个空数组来存放搜索到的数据
                var arr = new Array();
                for(var i=0;i<list.length;i++){
                    var data = list[i];
                    if(data.innerHTML.toLowerCase().indexOf(searchText) > -1){
                        arr.push(data);
                    }
                }
                // 清空列表，装载搜索到的数据
                var dataList = document.getElementById("dataList");
                dataList.innerHTML = "";
                for(var i=0;i<arr.length;i++){
                    var data = arr[i];
                    var li = createLi(data.href,data.getAttribute("ICON"),data.innerHTML);
                    dataList.appendChild(li);
                }
            }
            // 创建LI标签
            function createLi(url,icon,text){
                // 创建li标签
                var li = document.createElement("li");
                li.className = "list-li";
                // 给li绑定点击事件
                li.addEventListener("click",function(){
                    window.open(url);
                });
                // 创建img标签
                var img = document.createElement("img");
                img.src = icon;
                img.className = "icon";
                // 创建span标签
                var span = document.createElement("span");
                span.innerHTML = text;
                span.className = "text";
                // 追加节点
                li.appendChild(img);
                li.appendChild(span);
                return li;
            }
        </script>
    </head>

    <body>
        <div id="container">
            <div class="header">
                <div class="header-left">
                    <div class="bks">已收藏书签：<span id="bk_sum"></span></div>
                </div>
                <div class="header-right">
                    <div class="search">
                        <label id="placeholder" for="searchInput">搜索书签</label>
                            <input type="text" name="search-input" class="search-input" id="searchInput" oninput="searchValue()" />
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="main-left">

                </div>
                <div class="main-right">
                    <!-- 书签列表 -->
                    <ul id="dataList"></ul>
                </div>
            </div>
        </div>

        <!-- 添加书签步骤： -->
        <!-- 1.导出浏览器书签到html文件 -->
        <!-- 2.将hmtl文件中的<DT><A>...</A>标签复制到<DL></DL>中保存 -->
        <DL id="dataSource" style="display: none;">
        <DT><A HREF="https://blog.csdn.net/u014607184/article/details/52027879" ADD_DATE="1522033203" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAABWklEQVQ4jbVSwUoCURQ9V2fGmUwxagLNwAiDQaHc+AFu/Qt3FtRnuLf+oMCN4GL20c6FEhiU4UKDIFHLJipwGvW2GBUHqXDRhQvvXs55953zLlVBWCZcS6EBCM6S7SRADIWk8DYpCg+tUb9vtlo8MBcJUBKJzWzWn06LweB8f/Rm1NbW5wnsUpRwPr+RyYAWVbH11HY8iQRhV9d9qZRdGqVSv1AY3NXHH+8kK+JWyO3zOwjq4dEM/Xhy3D09ozn3zEZjdibbVu2mpsTjAMxm8zYaZWb6we6JrbKmzS5j5l++ZkIYGwYAEGRNI0HgPwmvxSIAAnkikZ2LcykcZjDADADskj0MdmhwBwJ7V5cr+wcAmBnMX60H67lHgiCqqtXp3CeTsFVVQVVQBbj2rrZzOav/Ml4IQ9crUyRNl286UZK8yaQciwmqSm73eGAOe93PcnlQr9sT6N+39RsgVo7oiKSelAAAAABJRU5ErkJggg==">轻松搞定JSONP跨域请求 - CSDN博客</A>
        <DT><A HREF="https://www.cnblogs.com/lzijian/p/6322868.html" ADD_DATE="1522035075" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAChklEQVQ4jX2TT2hUVxTGf+fe95LJNPOKJtjGqIgJtZIukjwmeY1ORbpxpW4tiC22qHQdcdFd11Jw5UIFEVEsdd1/CmLoJEynBIIuZDbqC52ITGIn/zrOu8eFbyRq4re899zv/r5zOMJ7VIhGTonYrwGjqtfvTU7+9HaNXeedAbQQRWfEmrPq9DzwtzFmfHtvb/fjOL4DSKtY1jFgYGCgc3MQPKTZPHqvVLoLkM8PDnbYzB8v6vXdxfv3a2t/e0dBEHyIQG15uZxS2lJpekaFZYLg07dxbRiG/trDYrFYFdXqplzuByABki9GR8cBtc6dGO3vD1q1XhiGnRnf/xK4tSZW4px+Z635pTAW7RXEqdOtou6G8bzvpavrHJXKA0BMuVx+bmH/WD4/uJZiYmqqXKsvDiFcQd3Np/Pzw07MJ57ndSqErQQegIOnxvNOAydTAgVkZmZmHrgIUBgZOSIih51ziRgZA64CagBckvwu6KEwDLtf+UFq4gFE0fAe49kL1hijqlZV82n/nAH4q1T6B1HN+v6x9KItNWkWwmi4zbTf9nzvoxdJ87JzSclaO1AYGupqTcEACU5+BU6lBI18Pv/xvij60babOyJSW1ltHJ0oTp1I1F0yYjKura2PFmLah599z35T+HxkXMW0C3ymKksJfFtfWv5zenp6AZBkpfFbkrUJRncBkzbNyjaYlVzugIg5jrIXaBehjtPNGd/v692xVZ88mY3janVhx/begwapPopnJ14TFON4hTjeH4bhB7nV1aSeydiORsNoEDTn5uYalUrl/zSuqnIN2PlGhFbTyuXyczaWA1hZ+O9WRxB8Bch62yhssGQt/fvs2eKWnp5aNputvwS6tfe4Ri+BiwAAAABJRU5ErkJggg==">js,jQuery获取html5的data-*属性 - Lzijian - 博客园</A>
        <DT><A HREF="https://www.cnblogs.com/Chenghao-He/p/7768241.html" ADD_DATE="1522047405" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAChklEQVQ4jX2TT2hUVxTGf+fe95LJNPOKJtjGqIgJtZIukjwmeY1ORbpxpW4tiC22qHQdcdFd11Jw5UIFEVEsdd1/CmLoJEynBIIuZDbqC52ITGIn/zrOu8eFbyRq4re899zv/r5zOMJ7VIhGTonYrwGjqtfvTU7+9HaNXeedAbQQRWfEmrPq9DzwtzFmfHtvb/fjOL4DSKtY1jFgYGCgc3MQPKTZPHqvVLoLkM8PDnbYzB8v6vXdxfv3a2t/e0dBEHyIQG15uZxS2lJpekaFZYLg07dxbRiG/trDYrFYFdXqplzuByABki9GR8cBtc6dGO3vD1q1XhiGnRnf/xK4tSZW4px+Z635pTAW7RXEqdOtou6G8bzvpavrHJXKA0BMuVx+bmH/WD4/uJZiYmqqXKsvDiFcQd3Np/Pzw07MJ57ndSqErQQegIOnxvNOAydTAgVkZmZmHrgIUBgZOSIih51ziRgZA64CagBckvwu6KEwDLtf+UFq4gFE0fAe49kL1hijqlZV82n/nAH4q1T6B1HN+v6x9KItNWkWwmi4zbTf9nzvoxdJ87JzSclaO1AYGupqTcEACU5+BU6lBI18Pv/xvij60babOyJSW1ltHJ0oTp1I1F0yYjKura2PFmLah599z35T+HxkXMW0C3ymKksJfFtfWv5zenp6AZBkpfFbkrUJRncBkzbNyjaYlVzugIg5jrIXaBehjtPNGd/v692xVZ88mY3janVhx/begwapPopnJ14TFON4hTjeH4bhB7nV1aSeydiORsNoEDTn5uYalUrl/zSuqnIN2PlGhFbTyuXyczaWA1hZ+O9WRxB8Bch62yhssGQt/fvs2eKWnp5aNputvwS6tfe4Ri+BiwAAAABJRU5ErkJggg==">SpringMVC04 很杂很重要（注解，乱码处理，通配符，域属性调用，校正参数名称，访问路径，请求、响应携带参数，请求方法） - 颢Blog - 博客园</A>
        <DT><A HREF&
最低0.47元/天解锁文章
dengliu_2017
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html书签展示（带搜索）

源代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>书签管理器</title> <style type="text/css"> *{margin: 0...
复制链接

扫一扫