案例-bilibili搜索

@'z.x.r_

已于 2024-11-26 09:50:49 修改

阅读量122

点赞数 2

文章标签： html5 javascript css 前端 html

于 2024-11-26 01:00:47 首次发布

本文链接：https://blog.csdn.net/weixin_72274118/article/details/144046050

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./iconfonts/iconfont.css">
  <link rel="stylesheet" href="./css/search.css">
</head>

<body>
  <div class="m-search">
    <div class="form">
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="凡人修仙传" class="search-input">
      <i class="iconfont icon-guanbi"></i>
    </div>
    <a href="javascript:void(0);" class="cancel">取消</a>
  </div>
  <div class="search-hot">
    <h2>大家都在搜</h2>
    <div class="list">
      <span class="hotword-item">开学前一天的中国速度</span>
      <span class="hotword-item">LOL新英雄大招全图范围</span>
      <span class="hotword-item">央视曝光飙车炸街产业链</span>
    </div>
  </div>
  <div class="gap"></div>
  <div class="history">
    <h2>历史搜索</h2>
    <ul>
      <!-- 
        <li>
          <i class="iconfont icon-lishijilu_o"></i>
          <span>凡人修仙传</span>
        </li>
      -->
    </ul>
    <div class="clear-history">
      <a href="javascript:void(0);" class="clear">清除历史记录</a>
    </div>
  </div>

  <!-- 搜索列表展示 -->
  <ul class="recommend-list hide">
    <li class="list-item">xxxx</li>
  </ul>
  
  <!-- <script>
    // 功能一. 单击 "取消" 回退到首页
    const cancel = document.querySelector('.cancel')
    cancel.addEventListener('click', function () {
      history.back()
    })

    // 数据流动过程：localstorage 获取数据 → 转 js 数组 → 将用户输入数据存储到数组，去重 → 渲染页面 → 存入 localstorage
    function setHistory(arr) {
      localStorage.setItem('history', JSON.stringify(arr))
    }
    function getHistory() {
      return JSON.parse(localStorage.getItem('history')) || []
    }

    let historyArr = getHistory()

    // 页面渲染函数
    const historyUl = document.querySelector('.history ul')
    const clearELement = document.querySelector('.clear-history')
    function render(arr){
      let str = arr.map(item => {
        return `
        <li>
          <i class="iconfont icon-lishijilu_o"></i>
          <span>${item}</span>
        </li>
        `
      }).join('')
      historyUl.innerHTML = str
      // 是否显示 清除历史记录按钮
      clearELement.style.display = str ? 'block':'none'
    }

    render(historyArr)
    // -------------------------------------------------------------------------

    // 功能二. 表单功能：输入字符数大于0显示"X" + 回车发布
    // 2.1 定义"X"显隐函数
    const guanbi = document.querySelector('.icon-guanbi')
    function XShow() {
      guanbi.style.display = 'block'
    }

    function XHide() {
      guanbi.style.display = 'none'
    }

    // 表单事件
    const search = document.querySelector('.search-input')
    search.addEventListener('keyup', function(e) {
      // "X" 显隐
      if (this.value > 0) {
        XShow()
      } else {
        XHide()
      }

      // 2.2 回车发布
      if (e.key === 'Enter') {
        if(this.value.trim() === '') return alert('请输入内容')
        historyArr.unshift(this.value)
        // 去重
        historyArr = [...new Set(historyArr)]
        
        render(historyArr)
        // 本地存储
        setHistory(historyArr)
        this.value = ''
        XHide()
      }
    })

    // 功能三. 清除历史记录
    clearELement.addEventListener('click', function () {
      historyArr = []
      render(historyArr)
      setHistory(historyArr)
    })
  </script> -->

  <script>
    //用户回车发布li标签
    //准备一个数组，用户回车往数组里面新增数据，根据数组数据的个数渲染li标签

    // 如果有，获取history的值去渲染；否则渲染空数组
    //一真则真
    let arr=JSON.parse(localStorage.getItem('history'))||[]  //重点 
    // arr=[1,2]
    //渲染的功能用户回车就要使用→封装一个函数→有参数（数组数据是可变的，将来数据变，1i标签也要变）
    function render(data=arr){
      let str=data.map(el=>{
        return `
            <li>
              <i class="iconfont icon-lishijilu_o"></i>
              <span>${el}</span>
            </li>
              `
      }).join('')
      document.querySelector('.history ul').innerHTML=str
    }
    render()

    //用户如果按下的是回车键Enter，获取用户输入的数据放到arr（前追Ob加unshift)
    const inp=document.querySelector('.search-input')
      inp.addEventListener('keyup',function(e){
        if(e.key=='Enter'){
          //如果用户输入的是空的或有空格都不能发布
          if(inp.value.trim()==''){
            alert('请输入内容')
            return
          }
          arr.unshift(inp.value)

          //render(arr)
          //添加完数据后，去重 集合
          arr=[...new Set(arr)]
          // 去重之后，存储到localstorage
          // localStorage.setItem('history', JsoN.stringify(arr))
          localStorage.setItem('history',JSON.stringify(arr))
          //存储到本地和渲染函数的顺序可以交换
          render(arr)
          //按下回车键后，清空输入框
          inp.value=''
        }
      })

      //清除历史记录
      const clear=document.querySelector('.clear')
      clear.addEventListener('click', function () {
      arr = []
      render(arr)
      localStorage.removeItem('history')
    })

    //使用localstorage流程：默认数据提取本地存储localstorage→使用→如果js中数据变化了，就要往本地存储localstorage里面存一次
    //如果涉及到清空→localstorage里面的要清空；js中的数据也要清空
  </script>
</body>
</html>