最近在对接前台页面(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. 利用actionscript访问wfs服务

    以后整理……</> private function search_clickHandler():void{ op="search"; var urlLoader:UR ...

  2. CentOS安装QQ2012

    QQ想必大家都会用,在windows系统下一般都是使用客户端软件,但是在linxu系统下就没有想windows那样的客户端了.下面就次啊用wine在CentOS中安装腾讯QQ2012.

  3. ANR android

    1.android ANR产生原因和解决办法 2.Android ANR异常及解决方法 3.Android ANR 分析解决方法 4.[原创]Android 系统稳定性 - ANR(一) 5.[原创] ...

  4. log4j2单独的配置与使用&log4j2+slf4j的结合的配置与使用

    转载自:https://github.com/iamyong 一.log4j2单独的配置与使用 所用jar文件 log4j-api-2.8.2.jar log4j-core-2.8.2.jar 配置文 ...

  5. Android应用开发基础之三：数据存储和界面展现（三）

    生成XML文件备份短信 创建几个虚拟的短信对象,存在list中 备份数据通常都是备份至sd卡 使用StringBuffer拼接字符串 把整个xml文件所有节点append到sb对象里 sb.appen ...

  6. jmeter中CSV Data Set Config各项说明

    Config the CSV Data Source: 1)Filename:csv文件的名称(包括绝对路径,当csv文件在bin目录下时,只需给出文件名即可) 2)File encoding:csv ...

  7. C#并行编程 z

    目录 C#并行编程-相关概念 C#并行编程-Parallel C#并行编程-Task C#并行编程-并发集合 C#并行编程-线程同步原语 C#并行编程-PLINQ:声明式数据并行 背景 基于任务的程序 ...

  8. 用大白话告诉你什么是Event Loop

    文章原文地址 前沿 从前有座山,山里有座庙,庙里有个小和尚在讲故事.讲什么呢?讲的是: 从前有座山,山里有座庙,庙里有个小和尚在讲故事.讲什么呢?讲的是: 从前有座山,山里有座庙,庙里有个小和尚在讲故 ...

  9. matlab中换行

    若在命令窗口中,如果一条语句已经写完,需要换行,可以用"Shift+Enter", 如果一条语句没写完就想换行,可以使用"...+Enter".

  10. March 19 2017 Week 12 Sunday

    If you want it, work for it. It's that simple. 很简单,想要什么,就为之努力吧. Yes, it is very simple. Many of us j ...