最近在对接前台页面(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. Angular选项卡

    前几天我发的东西,可能对于没有基础的人很难理解,那么今天,咱们就发点简单点的东西吧! Angular显示隐藏,选项卡! 还是那句话,话不多说,上代码: <!DOCTYPE html> &l ...

  2. 浅谈SQL Server中的事务日志(五)----日志在高可用和灾难恢复中的作用

    简介 日志的作用是保证持久性和数据一致性,通过日志可以实现数据的Undo与Redo,因此通过日志,SQL Server不仅仅可以实现灾难恢复,还可以通过日志的Redo来实现高可用性.本篇文章主要讲述日 ...

  3. Laravel 开源电商体验与部署

    体验 开源项目已经部署了体验环境,开源通过扫描下方小程序码进行体验: 我们部署了 Laravel API demo 环境,访问地址:https://demo-open-admin.ibrand.cc/ ...

  4. C# WinForm 程序免安装 .NET Framework（XP/win7/win10环境运行）

    前文 首先感谢群里的大神宇内流云 提供的anyexec for windows版本. 经过本人搭建虚拟机在xp环境 使用anyexec运行winfrom程序后,测试通过,如下是用的xp运行winfro ...

  5. WCF如何使用X509证书

    如何创建证书: makecert.exe -sr LocalMachine -ss My -a sha1 -n CN=JiangServer -sky exchange -pe     (服务端证书) ...

  6. Dll注入：修改PE文件 IAT注入

    PE原理就不阐述了, 这个注入是PE感染的一种,通过添加一个新节注入,会改变PE文件的大小,将原有的导入表复制到新节中,并添加自己的导入表描述符,最后将数据目录项中指向的导入表的入口指向新节. 步骤: ...

  7. NO.005-2018.02.10《南歌子词二首 / 新添声杨柳枝词》唐代：温庭筠

    南歌子词二首 / 新添声杨柳枝词_古诗文网 南歌子词二首 / 新添声杨柳枝词 唐代:温庭筠(yún) 一尺深红胜曲尘,天生旧物不如新.(胜曲尘 一作:蒙曲尘)一袭深红色的长裙日子久了便蒙上了淡黄色,自 ...

  8. PCI PCI-X PCI-E介绍

    1.PCI 外设互联标准(或称个人电脑接口,Personal Computer Interface),实际应用中简称PCI(Peripheral Component Interconnect),是一种 ...

  9. mongorc.js文件

    当启动的时候,mongo检查用户HOME目录下的一个JavaScript文件.mongorc.js.如果找到,mongo在首次显示提示信息前解析.mongorc.js的内容.如果你使用shell执行一 ...

  10. 【模板】各种背包问题&讲解

                                        背包问题集合 一般来说,动态规划(DP)都是初学者最难闯过的一关,而在这里详细解说动态规划的一种经典题型:背包问题. 这里介绍的 ...