zoukankan      html  css  js  c++  java
  • h5搜索功能

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>没毛病</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="no">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
    </head>
    <body>
    <input class="" id="sec"><!--搜索框-->
    <button id="search">搜索</button>
    
    <!--历史记录-->
    <div class="current">最近搜索</div>
    <div class="delete history" style=" 100%;float: left"></div>
    
    <!--删除按钮-->
    <div class="history" id="his-dele">X</div>
    
    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
    
        /*搜索记录相关*/
    
        var hisTime;//获取搜索时间数组
        var hisItem;//获取搜索内容数组
        var firstKey;//获取最早的1个搜索时间
    
        function init (){
            hisTime = [];//时间数组置空
            hisItem = [];//内容数组置空
    
            for(var i = 0; i < localStorage.length; i++){//数据去重
                if(!isNaN(localStorage.key(i))){//判断数据是否合法
                    hisTime.push(localStorage.key(i));
                }
            }
    
            if(hisTime.length > 0) { //根据时间戳排序,翻转
                hisTime.sort();//排序
           hisTime.reverse(); //翻转
    for (var y = 0; y < hisTime.length; y++) { localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y])); } } $(".delete").html("");//执行init(),每次清空之前添加的节点
         
    for(var i = 0; i < hisItem.length; i++){ $(".delete").prepend('<div class="word-break">'+hisItem[i]+'</div>'); } } init();//调用   //点击搜索 $("#search").click(function(){ var value = $("#sec").val(); var time = (new Date()).getTime(); //获取当前时间戳 if(!value){ alert("你未输入搜索内容"); return false; } //输入的内容localStorage有记录     //判断数组中是否存在当前元素
       if($.inArray(value,hisItem) >= 0){ for(var j = 0; j < localStorage.length; j++){
              //如果存在移除
    if(value == localStorage.getItem(localStorage.key(j))){ localStorage.removeItem(localStorage.key(j)); } } localStorage.setItem(time,value); }else{ localStorage.setItem(time,value); } init(); }); //清除记录功能 $("#his-dele").click(function(){ var f = 0; $("history").html();
         init(); });

      
    //苹果手机不兼容出现input无法取值以下是解决方法
      $(
    ".delete" ).on( "click", ".word-break", function() {
         var div = $(this).text();
         $(
    '#sec').val(div);
      });
    </script>
    </body>
    </html>
  • 相关阅读:
    还能这样偷懒?用Python实现网站自动签到脚本
    普通爬虫 VS 多线程爬虫!Python爬虫运行时间对比
    中文文献阅读方法及笔记模板
    约束
    可迭代对象补充
    练习题及补充
    内置函数的补充/super/异常值处理
    特殊成员
    嵌套
    面向对象知识点总结补充
  • 原文地址:https://www.cnblogs.com/dxt510/p/8057267.html
Copyright © 2011-2022 走看看