京东页面 部分Javascript实现

原生Javascript实现方面（跟着06_京东_轮播图 js_哔哩哔哩_bilibili 该视频学习的内容记录）：

1、实现模糊查询（在搜索框中输入关键字，会出现与我们输入的字的匹配）

// ——————————实现头部输入框的 “模糊查询”————————————
// 1、获取搜索框和下拉列表;
let keyword = document.getElementsByClassName('.keyword');
let searchHelper = document.getElementById('.search-helper');

// 2、定义数组，存储搜索的内容
let searchArr = ['珍珠奶茶', '椰果奶茶', '板栗', '炒板栗', '薯条', '草莓糖葫芦', '山楂糖葫芦' ]

// 3、给输入框绑定内容改变事件
keyword.oninput = function(){
    // 每次触发输入就重新清空，要不然会一直叠加
    searchHelper.innerHTML = '';
    for(let i = 0; i<searchArr.length;i++){
        // 用户输入的字 在数组中是否有，如果有就不等于-1，那么应该显示在搜索框里
        if(searchArr[i].indexOf(keyword.value) != -1){
            searchHelper.innerHTML += '<p>'+ searchArr[i] +'</p>';
        // 因为没有搜索时默认时隐藏的，所以如果有匹配的话应该把它打开
            searchHelper.style.display = 'block';
        }
    }
}

// 4、鼠标失焦就不用显示下拉框了
keyword.onblur = function(){
    searchHelper.style.display = 'none';
}

2、轮播图的切换

// ————————————实现轮播图的切换————————————
// 1、先获取元素：图片，前一张后一张的按钮，有多少张图片就有多少个的小点点，定时器（没有进入图片区域要进行轮播，进入了就停止）
let img = document.querySelector('.img');
let prev = document.querySelector('.prev');
let next = document.querySelector('.next');
let slide = document.querySelector('.slide');
let lis = document.querySelectorAll('.banner-btn li')
let count = 0;
let imgArr = ['1.jpeg', '2.jpeg', '3.jpeg'];


// 2、定义函数，用来切换图片的路径
function cutImg(){
    img.src = './images/' + imgArr[count];

    //设置当前图片为激活的图片，意思就是对应的小点是和其他的不同的
    for(let i = 0;i<lis.length;i++){
        lis[i].className='';
    }
    lis[count].className='active';
}

// 3、设置定时器
let timer = setInterval(function(){
    count++;
    if(count>imgArr.length-1){
        count=0;
    }
    cutImg();
}, 2000);

// 4、给点击下一张绑定事件
next.onclick = function(){
    count++;
    if(count>imgArr.length-1){
        count=0;
    }
    cutImg();
    
}

// 5、给点击上一张绑定事件
prev.onclick = function(){
    count--;
    if(count<0){
        count=imgArr.length-1;
    }
    cutImg();
    
}

// 6、鼠标滑入图片区域，关闭定时器
slide.onmouseover = function(){
    clearInterval(timer);
}

// 7、鼠标划出图片区域，启动定时器
slide.onmouseout = function(){
    timer = setInterval(function(){
        count++;
        if(count>imgArr.length-1){
            count=0;
        }
        cutImg();
    }, 2000);
}

//8、给每个小点点绑定事件
for(let i = 0; i<lis.length;i++){
    lis[i].onclick = () =>{
        count = i;
        cutImg();
    }
}

3、实现楼层 + 吸顶效果

// ——————————实现楼层（elevator）的一些变化————————————
let header = document.querySelector('.header');
let banner = document.querySelector('.banner');
let elevator = document.querySelector('.elevator');

let items = document.querySelectorAll('.content .item');
let elevatorA = document.querySelectorAll('.elevator a');

let elevatorArr = [] // 存放四个高度值，方便后面计算高度值
// 基础的高度
let base = header.offsetHeight + banner.offsetHeight;

for(let i = 0;i<items.length;i++){
    base += items[i].offsetHeight;
    elevatorArr.push(base);
}

// 在哪个楼层的时候，哪个楼层的颜色变化，其他楼层的颜色不变
function clearColor(){
    for(let i = 0;i<elevatorA.length;i++){
        elevatorA[i].style.color = '';
    }
}

// 实现头部吸顶效果（当滚动条滚动到header+ banner的时候，将头部变成固定定位，header还得改变一点样式）
let search = document.querySelector('.search');
let searchM = document.querySelector('.search-m');
let form = document.querySelector('.form');
let searchLogo = document.querySelector('.search-logo');

document.onscroll = function(){
    // 获取到滚动条垂直方向滚动了多少
    let top = document.documentElement.scrollTop || document.body.scrollTop;

    // 获取到header的高度
    let headerHeight = header.offsetHeight; // 该高度包括height、padding、border
    let bannerHeight = banner.offsetHeight;

    // 当滚动条滚动到一定程度时，将楼层的定位换成固定定位
    if(top >= headerHeight + bannerHeight){
        elevator.className = 'elevator elevator-fix';
        search.className = 'search search-fix';
        searchM.style.height = '50px';
        form.style.top = '8px';
        searchLogo.style.display = 'block';
    }else{
        elevator.className = 'elevator';
        search.className = 'search';
        searchM.style.height = '60px';
        form.style.top = '25px';
        searchLogo.style.display = 'none';

    }

 // 实现楼层滚动,文字变色的效果.楼层四个区域，在哪个区域高度范围内的时候，哪个区域的楼层字体就变为红色

    if(top<header.offsetHeight + banner.offsetHeight ){
        clearColor();
    }else if(top>=header.offsetHeight + banner.offsetHeight && top< elevatorArr[0]){
        clearColor();
        elevatorA[0].style.color = 'red';
    }else if(top>=elevatorArr[0] && top< elevatorArr[1]){
        clearColor();
        elevatorA[1].style.color = 'red';
    }else if(top>=elevatorArr[1] && top< elevatorArr[2]){
        clearColor();
        elevatorA[2].style.color = 'red';
    }else if(top>=elevatorArr[2]){
        clearColor();
        elevatorA[3].style.color = 'red';
    }

}

概念从：https://blog.csdn.net/qq_35430000/article/details/80277587

（这个博主写的真好，看了就明白啦！！！）

clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度；

offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度；

scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。

scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。