最近在对接前台页面(WEB端)时,产品要求需记录下客户的搜索记录,我们是前后台完全分离的项目,根本不能保存的session域中,没办法,虽然作为后台开发,遇到需求就自己研究了一通,先看一下最终效果图,记录每次的搜索记录,上限为10个,自动去重,点击搜索,跳转搜索结果页面

开始上前端代码

搜索页面,css和js接口部分就不上传了,毕竟只看搜索

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="expires" content="60">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" />

        <title></title>

        <link rel="stylesheet" href="/resources/css/sm.min.css" />

        <link rel="stylesheet" href="/resources/css/reset.css" />

        <link rel="stylesheet" href="/resources/css/css.css" />

        <script type="text/javascript" src="/resources/js/jquery1.11.3.min.js"></script>

        <script type="text/javascript" src="/resources/js/zepto.min.js"></script>

        <script type="text/javascript" src="/resources/base/httpClient.js"></script>

        <script type="text/javascript" src="/resources/js/sm.min.js"></script>

        <!--弹窗实现-->

        <link rel="stylesheet" href="/resources/css/weui.min.css"/>

        <link rel="stylesheet" href="/resources/css/jquery-weui.min.css"/>

        <script type="text/javascript" src="/resources/js/jquery-weui.min.js"></script>

        <style>

            input[type=search]::-webkit-search-cancel-button{

                -webkit-appearance: none;

            }

        </style>

        <style>

            .weui-dialog {

                background-color: #e5e5e5;

            }

        </style>

    </head>

    <body>

        <div class="page">

            <header class="bar bar-nav head-bg">

                <a href="javascript:;" class="icon icon-left pull-left" onclick="window.history.back();"></a>

                <h1 class="title">搜索</h1>

            </header>

            <div class="content" style="background:#fff">

                <article class="search-b">

                    <img src="/resources/images/sousuo.png">

                    <form action='' onsubmit="return false;">

                        <input type="search" placeholder="输入想搜索内容的关键词" id="serachTxt" maxlength="30">

                        <img src="/resources/images/searchCancel.png" class="searchCancel">

                    </form>

                    <a href="javascript:;" class="searchBtn"  onclick="searchResult()">搜索</a>

                </article>

                <p class="search-title">历史记录<span><img src="/resources/images/del.png"></span></p>

                <ul class="search-list">

                    <li>

                        <a href="javascript:;">山东省妇幼保健院</a>

                    </li>

                    <li>

                        <a href="javascript:;">宝宝摔倒应该怎么办</a>

                    </li>

                    <li>

                        <a href="javascript:;">妇幼宝贝合作</a>

                    </li>

                    <li>

                        <a href="javascript:;">泰安市妇幼保健院</a>

                    </li>

                </ul>

            </div>

        </div>

        <script>

            $(function() {

                /*清楚搜索历史记录*/

                $(".search-title span").click(function() {

                    $.confirm("是否要清空搜索历史记录", function() {

                        //点击确认后的回调函数

                        $(".search-list").find("li").remove();

                        //$(".search-title").hide();

                        localStorage.removeItem('search');

                    }, function() {

                        //点击取消后的回调函数

                        $.closeModal(); //关闭对话框

                    });

/*                    $.alert("是否要清空搜索历史记录",function(){

                        $(".search-list").find("li").remove();

                        //$(".search-title").hide();

                        localStorage.removeItem('search');

                    })*/

                })

                /*搜索*/

                $("#serachTxt").bind("search", function() {

                    var keyword = $("#serachTxt").val();

                    var userId = sanmi.queryParam("userId");

                    var platform= sanmi.queryParam("platform");

                    window.location.href = "search-result.html?keyword=" + encodeURI(encodeURI(keyword))+"&userId="+userId+"&platform="+platform;

                })

                /*搜索取消*/

                $("#serachTxt").focus(function () {

                    $(".searchCancel").show();

                })/*.blur(function () {

                    $(".searchCancel").hide();

                })*/

                $(".searchCancel").click(function() {

                    $("#serachTxt").val("");

                })

                var searchArr;

                //定义一个search的，判断浏览器有无数据存储（搜索历史）

                if(localStorage.search){

                    //如果有，转换成 数组的形式存放到searchArr的数组里（localStorage以字符串的形式存储，所以要把它转换成数组的形式）

                    searchArr= localStorage.search.split(",")

                }else{

                    //如果没有，则定义searchArr为一个空的数组

                    searchArr = [];

                }

                //把存储的数据显示出来作为搜索历史

                MapSearchArr();

                function MapSearchArr(){

                   // debugger;

                    var tmpHtml = "";

                    var userId = sanmi.queryParam("userId");

                    var platform= sanmi.queryParam("platform");

                    for (var i=0;i<searchArr.length;i++){

                        tmpHtml += "<li><a href='/view/search-result.html?keyword="+encodeURI(encodeURI(searchArr[i]))+"&userId="+userId+"&platform="+platform+"'>"+searchArr[i]+"</a> </li>"

                    }

                    $(".search-list").html(tmpHtml);

                }

            })

            function searchResult() {

                var userId = sanmi.queryParam("userId");

                var cityCode = sanmi.queryParam("cityCode");

                //第三方访问的链接

                var platform= sanmi.queryParam("platform");

                var keyword = $("#serachTxt").val()

                window.location.href = "/view/search-result.html?keyword=" + encodeURI(encodeURI(keyword)+"&platform="+platform);

            }

        </script>

    </body>

</html>

搜索结果页面,对你们看的没错,用的就是artTemplate模版,让我一个后台去对接接口...哼哼

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="expires" content="60">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" />

        <title></title>

        <!--<link rel="stylesheet" href="/resources/css/sm.min.css" />-->

        <link rel="stylesheet" href="/resources/css/reset.css" />

        <link rel="stylesheet" href="/resources/css/css.css" />

        <script type="text/javascript" src="/resources/js/jquery1.11.3.min.js"></script>

        <script type="text/javascript" src="/resources/js/image-auto.js"></script>

        <script type="text/javascript" src="/resources/js/zepto.min.js"></script>

        <!--<script type="text/javascript" src="/resources/js/sm.min.js"></script>-->

        <script type="text/javascript" src="/resources/base/httpClient.js"></script>

        <script type="text/javascript" src="/resources/listjs/search_result.js"></script>

        <script type="text/javascript" src="/resources/js/template.js"></script>

        <style>

            input[type=search]::-webkit-search-cancel-button{

                -webkit-appearance: none;

            }

        </style>

        <script>

            $(function () {

                tupian();

                console.info($(".new-item5 .l-first-tus figure").width($("html,body").width()-20));

            })

            function tupian(){

                $(".new-item5 .l-first-tus figure").height($(".new-item5 .l-first-tus figure").width() * 0.58);

                $.each($(".l-first-tus figure"), function(i, e) {

                    $(e).height($(e).width() *0.66);

                });

            }

        </script>

    </head>

    <body>

        <div class="page">

            <div class="fixed-idx">

                <header class="bar bar-nav head-bg">

                    <a href="javascript:;" class="black_icon" onclick="window.history.back();"><img src="/resources/images/black-icon.png"></a>

                    <h1 class="title">搜索</h1>

                </header>

            </div>

                <article class="search-b" style="margin-top:2.2rem">

                    <img src="/resources/images/sousuo.png">

                    <form action='' onsubmit="return false;">

                        <input type="search" placeholder="输入想搜索内容的关键词" id="serachTxt" style="width:100%">

                        <img src="/resources/images/searchCancel.png" class="searchCancel" style="right: 0.2rem">

                    </form>

                    <a href="javascript:;" class="searchBtn"  onclick="searchResult()">搜索</a>

                </article>

                <div class="line-con" style="border-top:1px solid #f0f0f0" id="content">

                    <script id="floorList" type="text/html">

                        {{each info as ifo}}  {{if ifo.coverPositionFlag == "THREE_LIST"}} {{if ifo.haiArticleType == "IMAGE"}}

                        <article class="new-item4">

                            <a href="/view/detail.html?articleId={{ifo.haiId}}">

                                <h5 class="h">{{ifo.haiTitle}}</h5>

                            </a>

                            <div class="more-tus">

                                <div class="l-first-tus my-gallery">

                                    {{if ifo.coverImageList.length == 0}}

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    {{else if  ifo.coverImageList.length == 1}}

                                    {{each ifo.coverImageList as image}}

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="{{image.url}}" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    {{/each}}

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    {{else if  ifo.coverImageList.length == 2}}

                                    {{each ifo.coverImageList as image}}

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="{{image.url}}" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    {{/each}}

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    {{else}}

                                    {{each ifo.coverImageList as image}}

                                    <figure>

                                        <div class="img-dv">

                                            <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}">

                                                <img src="{{image.url}}" onload="resize_img(this)">

                                            </a>

                                        </div>

                                    </figure>

                                    {{/each}}

                                    {{/if}}

                                </div>

                                <span>+{{ifo.normalImageCount}}</span>

                            </div>

                            <p class="fo">

                                {{if ifo.ownOrgName !=""}}

                                <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span>

                                {{else}}

                                <span>{{ifo.ownName}}</span>

                                {{/if}}

                                <span name="count">{{ifo.formatReadCount}}阅读</span>

                                <span>{{ifo.commentCount}}评论</span>

                            </p>

                        </article>

                        {{else}}

                        <article class="new-item">

                            <a href="/view/detail1.html?articleId={{ifo.haiId}}">

                                <h5 class="h">{{ifo.haiTitle}}</h5>

                                <div class="l-first-tus">

                                    {{if ifo.coverImageList.length == 0}}

                                    <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure>

                                    <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure>

                                    <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure>

                                    {{else if ifo.coverImageList.length == 1}}

                                    {{each ifo.coverImageList as image}}

                                    <figure style="background-image: url({{image.url}});"></figure>

                                    {{/each}}

                                    <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure>

                                    <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure>

                                    {{else if ifo.coverImageList.length == 2}}

                                    {{each ifo.coverImageList as image}}

                                    <figure style="background-image: url({{image.url}});"></figure>

                                    {{/each}}

                                    <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure>

                                    {{else}}

                                    {{each ifo.coverImageList as image}}

                                    <figure style="background-image: url({{image.url}});"></figure>

                                    {{/each}}

                                    {{/if}}

                                </div>

                            </a>

                            <p class="fo">

                                {{if ifo.ownOrgName !=""}}

                                <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span>

                                {{else}}

                                <span>{{ifo.ownName}}</span>

                                {{/if}}

                                <span name="count">{{ifo.formatReadCount}}阅读</span>

                                <span>{{ifo.commentCount}}评论</span>

                            </p>

                        </article>

                        {{/if}} {{/if}}

                        <!--   小图靠右-->

                        {{if ifo.coverPositionFlag == "SMALL_RIGHT"}} {{if ifo.haiArticleType == "VIDEO"}}

                        <article class="new-item2">

                            <a href="/view/detail2.html?articleId={{ifo.haiId}}">

                                <div class="item-d">

                                    <h5 class="h">{{ifo.haiTitle}}</h5>

                                    {{if ifo.coverImageList.length == 0}}

                                    <div class="item-s-cover">

                                        <figure style="background-image: url(/resources/images/toutiao_mrt1.png);" class="l-first-tus"></figure>

                                        <span class="video-len">{{ifo.videoLengthStr}}</span>

                                    </div>

                                    {{else }}

                                    <div class="item-s-cover">

                                        {{each ifo.coverImageList as image}}

                                        <figure style="background-image: url({{image.url}});" class="l-first-tus"></figure>

                                        {{/each}}

                                        <span class="video-len">{{ifo.videoLengthStr}}</span></div>

                                    {{/if}}

                                </div>

                            </a>

                            <p class="fo">

                                {{if ifo.ownOrgName !=""}}

                                <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span>

                                {{else}}

                                <span>{{ifo.ownName}}</span>

                                {{/if}}

                                <span name="count">{{ifo.formatReadCount}}阅读</span>

                                <span>{{ifo.commentCount}}评论</span>

                            </p>

                        </article>

                        {{else if ifo.haiArticleType == "RICH_TEXT"}}

                        <article class="new-item2">

                            <a href="/view/detail1.html?articleId={{ifo.haiId}}">

                                <div class="item-d">

                                    <h5 class="h">{{ifo.haiTitle}}</h5>

                                    <div class="item-s-cover">

                                        {{each ifo.coverImageList as image}}

                                        <figure style="background-image: url({{image.url}});" class="l-first-tus"></figure>

                                        {{/each}}

                                    </div>

                                </div>

                            </a>

                            <p class="fo">

                                <span>{{ifo.ownName}}</span>

                                <span name="count">{{ifo.formatReadCount}}阅读</span>

                                <span>{{ifo.commentCount}}评论</span>

                            </p>

                        </article>

                        {{else }}

                        <article class="new-item2">

                            <a href="/view/detail.html?articleId={{ifo.haiId}}">

                                <div class="item-d">

                                    <h5 class="h">{{ifo.haiTitle}}</h5>

                                    <div class="item-s-cover">

                                        {{each ifo.coverImageList as image}}

                                        <figure style="background-image: url({{image.url}});" class="l-first-tus"></figure>

                                        {{/each}}

                                    </div>

                                </div>

                            </a>

                            <p class="fo">

                                {{if ifo.ownOrgName !=""}}

                                <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span>

                                {{else}}

                                <span>{{ifo.ownName}}</span>

                                {{/if}}

                                <span name="count">{{ifo.formatReadCount}}阅读</span>

                                <span>{{ifo.commentCount}}评论</span>

                            </p>

                        </article>

                        {{/if}} {{/if}}

                        <!--   大图居中-->  <!-- 视频类-->

                        {{if ifo.coverPositionFlag == "BIG_CENTER"}} {{if ifo.haiArticleType == "VIDEO"}}

                        <article class="new-item3">

                            <a href="/view/detail2.html?articleId={{ifo.haiId}}">

                                <div class="item-d">

                                    <h5 class="h">{{ifo.haiTitle}}</h5>

                                    <!--   大图居中  可能为视频和图片-->

                                    <div class="item-video">

                                        {{if ifo.coverImageList.length == 0}}

                                        <figure style="background-image: url(/resources/images/toutiao_mrt1.png);" class="l-first-tus"></figure>

                                        {{else}}

                                        {{each ifo.coverImageList as image}}

                                        <figure style="background-image: url({{image.url}});" class="l-first-tus"></figure>

                                        {{/each}}

                                        {{/if}}

                                        <img src="/resources/images/bofang.png" class="bf-btn">

                                        <span class="video-len">{{ifo.videoLengthStr}}</span>

                                    </div>

                                </div>

                                </div>

                            </a>

                            <p class="fo">

                                {{if ifo.ownOrgName !=""}}

                                <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span>

                                {{else}}

                                <span>{{ifo.ownName}}</span>

                                {{/if}}

                                <span name="count">{{ifo.formatReadCount}}阅读</span>

                                <span>{{ifo.commentCount}}评论</span>

                            </p>

                        </article>

                        <!-- 大图居中  图片类-->

                        {{else if ifo.haiArticleType == "IMAGE"}}

                        <article class="new-item5">

                            <a href="/view/detail.html?articleId={{ifo.haiId}}">

                                <h5 class="h">{{ifo.haiTitle}}</h5>

                                <div class="more-tus">

                                    <div class="l-first-tus my-gallery">

                                        {{if ifo.coverImageList.length == 0}}

                                        <figure>

                                            <div class="img-dv">

                                                <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)" />

                                                <!--    </a>-->

                                            </div>

                                        </figure>

                                        {{else}}

                                        {{each ifo.coverImageList as image}}

                                        <figure>

                                            <div class="img-dv">

                                                <img src="{{image.url}}" onload="resize_img(this)" />

                                                <!--    </a>-->

                                            </div>

                                        </figure>

                                        {{/each}}

                                        {{/if}}

                                    </div>

                                    <!--   <span>+10</span>-->

                                </div>

                            </a>

                            <p class="fo">

                                {{if ifo.ownOrgName !=""}}

                                <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span>

                                {{else}}

                                <span>{{ifo.ownName}}</span>

                                {{/if}}

                                <span name="count">{{ifo.formatReadCount}}阅读</span>

                                <span>{{ifo.commentCount}}评论</span>

                            </p>

                        </article>

                        {{else}}

                        <article class="new-item5">

                            <a href="/view/detail1.html?articleId={{ifo.haiId}}">

                                <h5 class="h">{{ifo.haiTitle}}</h5>

                                <div class="more-tus">

                                    <div class="l-first-tus my-gallery">

                                        {{each ifo.coverImageList as image}}

                                        <figure>

                                            <div class="img-dv">

                                                <img src="{{image.url}}" onload="resize_img(this)" />

                                                <!--    </a>-->

                                            </div>

                                        </figure>

                                        {{/each}}

                                    </div>

                                    <!--   <span>+10</span> -->

                                </div>

                            </a>

                            <p class="fo">

                                {{if ifo.ownOrgName !=""}}

                                <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span>

                                {{else}}

                                <span>{{ifo.ownName}}</span>

                                {{/if}}

                                <span name="count">{{ifo.formatReadCount}}阅读</span>

                                <span>{{ifo.commentCount}}评论</span>

                            </p>

                        </article>

                        {{/if}} {{/if}}  {{/each}}

                    </script>

                </div>

        </div>

        <script>

            $(function() {

                /*搜索*/

                $("#serachTxt").bind("search", function() {

                    //事件

                    var keyword = $("#serachTxt").val();

                    var userId = sanmi.queryParam("userId");

                    var platform= sanmi.queryParam("platform");

                    window.location.href = "search-result.html?keyword=" + encodeURI(encodeURI(keyword))+"&userId="+userId+"&platform="+platform;

                })

                /*搜索取消*/

                $("#serachTxt").focus(function () {

                    $(".searchCancel").show();

                }).blur(function () {

                    $(".searchCancel").hide();

                    $("#serachTxt").val("");

                })

                $(".searchCancel").click(function() {

                    $("#serachTxt").val("");

                })

                var searchArr;

                //定义一个search的，判断浏览器有无数据存储（搜索历史）

                if(localStorage.search){

                    //如果有，转换成 数组的形式存放到searchArr的数组里（localStorage以字符串的形式存储，所以要把它转换成数组的形式）

                    searchArr= localStorage.search.split(",")

                }else{

                    //如果没有，则定义searchArr为一个空的数组

                    searchArr = [];

                }

                var keyword = $("#serachTxt").val()

                //点击搜索按钮时，去重

                if(keyword != ""){

                    KillRepeat(keyword);

                }

                //去重后把数组存储到浏览器localStorage

                localStorage.search = searchArr;

                //去重

                function KillRepeat(val){

                   // var kill = 0;

                    for (var i=0;i<searchArr.length;i++){

                        if(val===searchArr[i]){

                        //    kill ++;   用来删除数据

                            searchArr.splice(i,1);

                        }

                    }

                        //默认显示10条数据

                        if(searchArr.length <10){

                            searchArr.unshift(val);

                        }else{

                            //删除数组的最后一个元素

                            searchArr.pop()

                            //在数组首位添加元素

                            searchArr.unshift(val);

                        }

                }

            })

            function searchResult() {

                var userId = sanmi.queryParam("userId");

                var keyword = sanmi.queryParam("keyword");

                console.log(keyword);

                var platform= sanmi.queryParam("platform");

                window.location.href = "search-result.html?keyword=" + keyword+"&platform="+platform;

            }

        </script>

    </body>

</html>

效果一开始就上传了,就酱......

js实现前端的搜索历史记录的更多相关文章

  1. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  2. 前端实现搜索历史和清空历史（angularjs+ionic）

    要实现的页面效果: 1.显示历史搜索, 2.最近搜索的排在最前, 2.最多显示8条历史 4.清空历史记录 思路: 1.首先显示历史记录需要一个数组searchItems,通过ng-repeat显示每一 ...

  3. JS高级前端开发群加群说明

    JS高级前端开发群加群说明 *一.文章背景: *二. 高级群: *三. 加入方式: *四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在"前端开发"关键字搜 ...

  4. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  5. Day12-微信小程序实战-交友小程序-优化“附近的人”页面与serach组件的布局和样式以及搜索历史记录和本地缓存*内附代码）

    回顾/:我们已经实现了显示附近的人的功能了,可以多个人看到附近的人页面了 但是还是要进行优化有几个问题:1.我们用户选择了其他的自定义头像之后,在首页可以看到头像的变化,但是在附近的人中头像会变成报错 ...

  6. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  7. 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  8. HTML、CSS、JS在前端开发中都扮演怎样的角色

    前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...

  9. js在前端json字符串和对象互相转化

    js在前端json字符串和对象互相转化 //对象转json串 注意:参数必须是对象,数组不起作用,对象格式{'0'=>'a'} JSON.stringify( arr ); //json字符串转 ...

随机推荐

  1. 学习JVM虚拟机原理总结

    0x00:JAVA虚拟机的前世今生 1991年,在Sun公司工作期间,詹姆斯·高斯林和一群技术人员创建了一个名为Oak的项目,旨在开发运行于虚拟机的编程语言,允许程序多平台上运行.后来,这项工作就演变 ...

  2. 树莓派3(Raspberry pi 3)刷OpenWrt

    原文在 https://my.oschina.net/wangandi/blog/687389 1.下载镜像,这个lede好像是openwrt的一个分支,openwrt本身还没有支持pi3,https ...

  3. SQL还原数据库后孤立用户问题处理（SQL 数据库 拥有对象 无法删除）

    所谓孤立帐户,就是某个数据库的帐户只有用户名而没有登录名,这样的用户在用户库的sysusers系统表中存在,而在master数据库的syslogins中却没有对应的记录 孤立帐户的产生一般是一下两种: ...

  4. show_sql和format_sql

    <property name="show_sql">true</property> <property name="hibernate.fo ...

  5. 在科技圈不懂“机器学习”？那你就out了

    当联网的终端设备越来越多时,产生的信息数据也将呈指数式增长,大型.复杂.增长快速的数据收集已经无处不在.而机器学习能够扩增这些数据的价值,并基于这些趋势提出更广泛的应用情境. 那么,被人们津津乐道的机 ...

  6. Hadoop ->> HIVE

    HIVE的由来: 最初由Facebook基于HDFS开发出来的一套数据仓库工具. HIVE可以干什么? HIVE可以将已经结构化的数据映射成一张表,然后可以使用HIVE语言像写T-SQL一样查询数据. ...

  7. 学习笔记-java 集合

    背景: 看的是<java核心技术 第8版>,覆盖jdk1.6.主要是对集合全局和细节进行全面掌握,较深入的理解集合.本人对java比较熟悉,但是对于细节的理解不深,知识点还不全,这是知识的 ...

  8. Linux下实现免密码登录

    1.Linux下生成密钥 ssh-keygen的命令手册,通过”man ssh-keygen“命令: 通过命令”ssh-keygen -t rsa“ 生成之后会在用户的根目录生成一个 “.ssh”的文 ...

  9. May 13th 2017 Week 19th Saturday

    Mountains look beautiful from a distance. 远处看山山更美. This gnomic seems to circulate very long, its mor ...

  10. UOJ 35 后缀数组

    后缀数组裸题,求排名第1~n的后缀,想相邻后缀的最长公共前缀. 集训队模板就是硬lO(∩_∩)O哈哈~ #include <cstdio> #include <cmath> # ...