JS实现京东首页之页面顶部、Logo和搜索框功能

让我为您详细讲解一下“JS实现京东首页之页面顶部、Logo和搜索框功能”的完整攻略。

一、页面顶部

页面顶部通常包含一些常用功能，比如导航菜单、登录注册和购物车等。我们可以使用HTML和CSS来构建页面顶部的基本结构，然后使用JavaScript来实现一些交互效果。

示例一：点击显示二级导航菜单

<!-- HTML结构 -->
<div class="nav">
  <ul>
    <li><a href="#">手机</a></li>
    <li><a href="#">电脑</a></li>
    <li class="has-menu">
      <a href="#">家电</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">电视</a></li>
          <li><a href="#">冰箱</a></li>
          <li><a href="#">洗衣机</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">服装</a></li>
  </ul>
</div>

<!-- CSS样式 -->
.nav {
  height: 35px;
  background-color: #f5f5f5;
  line-height: 35px;
  font-size: 12px;
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-start;
}

.nav li {
  margin-right: 20px;
  position: relative;
}

.has-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
}

.has-menu:hover .sub-menu {
  display: block;
}

上述代码中，我们使用了HTML和CSS来创建了一个顶部导航菜单，同时使用JavaScript来实现了鼠标悬浮时显示二级导航菜单的交互效果。

示例二：购物车数量提示

<!-- HTML结构 -->
<div class="cart">
  <a href="#">
    <i class="iconfont icon-cart"></i>
    <span class="count">0</span>
  </a>
</div>

<!-- CSS样式 -->
.cart {
  position: relative;
  cursor: pointer;
}

.cart .count {
  display: none;
  position: absolute;
  top: 0;
  right: -4px;
  width: 12px;
  height: 12px;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  border-radius: 50%;
  background-color: #f00;
  color: #fff;
}

.cart:hover .count {
  display: block;
}

上述代码中，我们使用了HTML和CSS来创建了一个购物车图标，并使用JavaScript来动态更新购物车数量，并在鼠标悬浮时显示购物车数量。

二、Logo

Logo是网站的重要标识之一，可以增强网站的品牌形象。我们可以使用HTML和CSS来创建Logo的基本结构，然后使用JavaScript来实现一些动态效果。

示例三：鼠标悬浮Logo效果

<!-- HTML结构 -->
<a href="#" class="logo">
  <img src="logo.png" alt="京东商城">
</a>

<!-- CSS样式 -->
.logo img {
  transition: transform 0.3s ease-in-out;
}

.logo:hover img {
  transform: rotate(360deg);
}

上述代码中，我们使用了HTML和CSS来创建了一个Logo，并使用JavaScript来实现了鼠标悬浮时Logo的旋转动画。

三、搜索框

搜索框是网站的核心功能之一，用户可以使用搜索框来查找所需的商品信息。我们可以使用HTML和CSS来创建搜索框的基本结构，然后使用JavaScript来实现一些实用的交互效果。

示例四：搜索框自动完成

<!-- HTML结构 -->
<div class="search">
  <input type="text" placeholder="请输入关键字">
  <ul class="suggest">
    <li><a href="#">手机</a></li>
    <li><a href="#">电脑</a></li>
    <li><a href="#">家电</a></li>
  </ul>
</div>

<!-- CSS样式 -->
.search {
  position: relative;
}

.search input[type="text"] {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px;
  font-size: 14px;
  outline: none;
}

.search .suggest {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 3px 3px;
}

.search .suggest li {
  padding: 5px;
}

.search .suggest li:hover {
  background-color: #f5f5f5;
}

<!-- JavaScript代码 -->
const inputEl = document.querySelector('.search input');
const suggestEl = document.querySelector('.search .suggest');

inputEl.addEventListener('input', function() {
  const keyword = this.value;
  if (keyword.trim()) {
    suggestEl.innerHTML = '';
    for (let i = 0; i < 3; i++) {
      const suggestItem = document.createElement('li');
      suggestItem.innerHTML = `<a href="#">${keyword}${i}</a>`;
      suggestEl.appendChild(suggestItem);
    }
    suggestEl.style.display = 'block';
  } else {
    suggestEl.style.display = 'none';
  }
});

上述代码中，我们使用了HTML和CSS来创建了一个搜索框，并使用JavaScript来实现了搜索框自动完成的交互效果。具体实现过程如下：

1. 监听输入框的 input 事件，获取输入框中的关键字。
2. 根据关键字生成自动完成的提示列表，并将其添加到页面中。
3. 当用户重新输入或清空输入框时，隐藏自动完成的提示列表。