JS-内置对象&内置构造函数&事件-拖拽轮播图无缝滚动

内置对象&内置构造函数

日期时间格式

// 创建一个当前时刻的日期时间对象
var date = new Date();
// 获取date对象中的年月日时分秒
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
// 对个位数前面补 0
m = m < 10 ? '0' + m : m;
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
i = i < 10 ? '0' + i : i;
s = s < 10 ? '0' + s : s;
// 拼接日期时间的字符串
var datetimeStr = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
document.write(datetimeStr);

处理为小驼峰形式

console.log(toCamelCase('get-element-by-id'));
console.log(toCamelCase('query-selector-all'));
console.log(toCamelCase('get-bounding-client-rect'));

/**
         * 把 - 格式的字符串转为小驼峰风格
         * @param string -风格的字符串
         * @return string 小驼峰风格的字符串
        */
function toCamelCase(str) {
    return str.split('-').map(function(item, index) {
        // 如果是第一个元素
        if (index === 0) {
            return item;
        }
        // 首字母大写
        return item[0].toUpperCase() + item.slice(1);
    }).join('');
}

Math

// 取随机数,结果是小数0-1之间(顾头不顾尾,0有一定概率)
console.log(Math.random());
// 随机0-9之间的整数*10 舍一取整
console.log('随机0~9之间的整数：',Math.floor(Math.random()*10));
// 随机0-15之间的整数
console.log('随机0~15之间的整数：', Math.floor((Math.random() * 16)));
// 随机8-27之间的整数 先取0-19，再+8
console.log('随机取 8 ~ 27 之间的整数：', Math.floor(Math.random() * 20) + 8);

Array

// 定义数组
       var users = [
           {
               name: '芳芳',
               age: 18,
               address: '上海'
           },
           {
               name: '大悲',
               age: 78,
               address: '山洞'
           },
           {
               name: '曹操',
               age: 48,
               address: '许昌'
           },
           {
               name: '吕布',
               age: 38,
               address: '包头'
           },
           {
               name: '曹丕',
               age: 12,
               address: '许昌'
           },
           {
               name: '小悲',
               age: 31,
               address: '山洞'
           }
       ];
       console.log(users);

       // forEach遍历数组
       users.forEach(function(item, index) {
           console.log(item, index);
       });

       // filter 获取用户中的成年人
       var fUsers = users.filter(function(item, index) {
           return item.age >= 18;
       });
       console.log(fUsers);

       // map 从原数组提取信息，得到新数组，年龄+1岁
       var mUsers = users.map(function(item, index) {
           // return item.name;
           item.age ++;
           return item;
       });
       console.log(mUsers);

       // every  有一个不满足添加就是false 是否所有的用户都是成年人 
       var res = users.every(function(item, index) {
          return item.age >= 18;
       });
       console.log(res);   //false

       // some  有一个满足条件，就是true  是否有用户住在山洞
       var res = users.some(function(item, index) {
           return item.address === '山洞';
       });
       console.log(true);  //true

       // reduce （reduceright）计算所有元素的和（上一个元素的返回值，当前的，索引）
       var nums = [100,200,300,400];
       var sum = nums.reduce(function(prev, item, index) {
           return prev + item;
       }, 0);
       console.log(sum);   //1000

       // users ， 计算所有用户的年龄和
       var ageSum = users.reduce(function(prev, item) {
           return prev + item.age;
       }, 0);
       console.log(ageSum);   //231

       // users.reduceRight()

       // indexOf() lastIndexOf() -1不包含 >=1就是包含（索引）
         // indexOf() lastIndexOf()
         console.log(nums.indexOf(400));   //3
       console.log(nums.indexOf(4000));    -1

倒计时案例

// 获取一个DOM对象
        var boxNode = document.getElementById('box');
        // 定义数字
        var num = 10;
        // 调用函数 runTime
        runTime();
        // 定义函数
        function runTime() {
            // num 累减
            num --;
            // 设置元素中的内容
            boxNode.innerHTML = num;
            // 如果 nun<= 0
            if (num <= 0) {
                return;
            }
            // 开启单次定时器
            setTimeout(runTime, 1000);

        }

电子时钟

// 获取 id 是watch 的元素
        var watch = document.getElementById('watch');
        // 开启之前，先调用
        getDateTime();
        // 开启定时器
        setInterval(getDateTime,1000)
        // 定义定时器的回调函数，获取当前日期时间
        function getDateTime() {
            // 创建此时此刻的日期时间对象
            var date = new Date();
            // 从日期时间对象中获取年月日时分秒
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            var h = date.getHours();
            var i = date.getMinutes();
            var s = date.getSeconds();
            // 如果个位为前面补0；
            m < 10 ? '0' + m : m;
            d < 10 ? '0' + d : d;
            h < 10 ? '0' + h : h;
            i < 10 ? '0' + i : i;
            s < 10 ? '0' + s : s;
            // 拼接字符串
            var datetimestr = y+'-'+m+'-'+d+'-'+h+':'+i+':'+s
            // 把字符串显示在元素中
            watch.innerHTML = datetimestr;
        }  

全选和全不选

// 获取所有的checkbox元素
        var inputs = document.querySelectorAll('#checkboxList input');
        // 获取全选按钮元素
        var selectAllBtn = document.querySelector('#btn1');
        // 点击全选按钮，执行操作
        selectAllBtn.onclick = function() {
            // 遍历出每个复选框元素
            inputs.forEach(function(input){
                input.checked = true;
            })
        }
        // 获取全不选的元素
        var selectNotAllBtn = document.querySelector('#btn2');
        // 点击全不选按钮，执行操作
        selectNotAllBtn.onclick = function() {
            // 遍历出每个复选框元素
            inputs.forEach(function(input){
                input.checked = false;
                 })
                };

实现反选

// 先写自调用函数，防止作用域出错
        (function() {
             // 获取所有的checkbox按钮
        var inputs = document.querySelectorAll('#checkboxList input');
            // 获取反选按钮元素
            var selectReverseBtn = document.querySelector('#btn');
            // 点击反选按钮，执行操作
            selectReverseBtn.onclick = function() {
                // 遍历出每个复选框按钮
                inputs.forEach(function(input){
                /* if (input.checked) {
                        input.checked = false;
                    } else {
                        input.checked = true;
                    }*/
                    input.checked = !input.checked;
                })
            }
        })();

复选框全选

// 获取元素，列表中所有复选框的集合
        var checkboxs = document.querySelectorAll('#checkboxList input');
        // 获取全选的复选框
        var selectAllCheckbox = document.querySelector('#selectAll');
        // 点击全选的复选框，执行操作
        selectAllCheckbox.onclick = function() {
            // 遍历出每个复选框按钮
            checkboxs.forEach(function(item){
                item.checked = selectAllCheckbox.checked;
            })
        }

春节倒计时

   // 获取元素
        var box = document.querySelector('#box')
        // 获取目标时间的时间戳
        var dstTime = (new Date(2022,1,1,0,0,0)).getTime();
        // 开启之前，先调用
        getDateTime();
        // 开启定时器
        setInterval(getDateTime,1000)
        function getDateTime() {
            //  计算目标日期距离当前的所差的毫秒数
            var seconds = dstTime-Date.now();
            // 提取时间差中所包含的整的天数
            var d = Math.floor(seconds/(24*3600*1000));
            // 计算去除了整天之后，剩下的毫秒数
            var s = seconds-d*(24*3600*1000)
            // 从s中提取整的小时数
            var h = Math.floor(s/(3600*1000))
            // s中去除整的小时，取剩下的
            s = s-h*(3600*1000)    //s -= h * (3600 * 1000);
            // 从s中提取完整的分钟
            var m = Math.floor(s/(60*1000))
            // s中去除整的分钟
            s = s-m*(60*1000)
            // 计算秒数
            s = Math.floor(s/1000)
            box.innerHTML='距离春节还有<br>'+d+'天'+h+'小时'+m+'分钟'+s+'秒'
        }    
    })();

随机点名器

 (function(){
            // 定义数组，存储要随机显示的名字
            var nameList = ['刘备', '张飞', '关羽', '马超', '黄忠', '诸葛亮', '赵云', '曹操', '夏侯惇', '夏侯渊', '典韦', '许褚', '孙权', '大乔', '小乔', '周瑜']
            // 获取显示文字的元素
            var content = document.querySelector('#content')
            // 获取开始按钮
            var btn = document.querySelector('#btn')
            // 定义定时器标记变量
            var intervalId = null;
            // 点击开始按钮
            btn.onclick = function() {
                // 如果定时器标记变量的值是 null，要开启定时器
                if (intervalId === null) {
                     // 修改按钮的文字
                     btn.innerHTML = '停止';
                    //  开启定时器
                     intervalId = setInterval(function() {
                        // 随机取索引 nameList
                        var randIndex = Math.floor(Math.random() *nameList.length)
                         // 显示随机取出的姓名到 content
                         content.innerHTML = nameList[randIndex];
                     },50)
                    } else {
                        // 修改按钮的文字
                        btn.innerHTML = '继续';
                        // 停止定时器
                        clearInterval(intervalId);
                        // 重置变量 intervalId 的值
                        intervalId = null;
                     }
                }     
        })()

classList

(function() {
            // 获取所有的li元素
            var lis = document.querySelectorAll('.news .item')
            // 遍历lis，给其中的每个li监听click事件
            lis.forEach(function(liItem) {
                // 添加事件
                liItem.onclick = function () {
                    // 判断 li 是否被选中
                    if (liItem.className === 'item') {
                        // 添加类名 active
                        liItem.className = 'item active';
                    } else {
                        // 去掉类名 active
                        liItem.className = 'item';
                    }
                }
            })   
        })()

className

 (function() {
            // 获取所有的li元素
            var lis = document.querySelectorAll('.news .item')
            // 遍历lis，给其中的每个li监听click事件
            lis.forEach(function(liItem) {
                // 是否存在类名 active
                liItem.onclick = function() {
                    // if (liItem.className.indexOf('active') === -1) {
                    //     // 添加 active 类名
                    //     liItem.classList.add('active');
                    // } else {
                    //     // 删除 active 类名
                    //     liItem.classList.remove('active')
                    // }
                    liItem.classList.toggle('active');
                }
            })       
        })()

图片延迟加载

  (function(){
        // 获取所有的img元素
        var imgItems = document.querySelectorAll('.images img');
        // 调用函数，第一屏加载
        loadImage();
        // 监听滚动的滚动
        window.onscroll = loadImage;
        // 封装函数 实现加载图片
            // 图片在视口上的y坐标 < 视口高度
            function loadImage() {
                // 遍历图片
                imgItems.forEach(function(imgItem) {
                    // 判断图片在视口上的y坐标是否小于视口高度，如果成立，加载图片
                    if (imgItem.getBoundingClientRect().top < document.documentElement.clientHeight) {
                        // 加载图片
                        imgItem.src = imgItem.dataset.src; 
                        // 设置为不透明
                        imgItem.style.opacity = '1';
                    }
                })
            }
        })()

无缝滚动

  (function(){
            // 获取元素
            var scrollBox = document.querySelector('#scrollBox');
            // 把所有的图片再复制一份
            scrollBox.innerHTML += scrollBox.innerHTML
            // 开启定时器
            setInterval(function(){
                // 当第一组图片全部滚出scrollBox区域之后，瞬间调整位置
                if (scrollBox.scrollLeft >= 2000 ) {
                    scrollBox.scrollLeft = '0'
                }
                // 修改元素的scrollLeft
                scrollBox.scrollLeft += 2
            },10)
                
        })()

页面标题滚动播放

 setInterval(function() {
            // 剩下的字符串 + 第一个字符串
            document.title = document.title.slice(1) +document.title[0]
        },200)

选项卡效果

 (function() {
            // 获取元素
var tabTitleItems = document.querySelectorAll('.tab-title li');  // 获取选项卡标题元素
var tabContentItems = document.querySelectorAll('.tab-item');   // 获取选项卡内容元素
            // 给每个选项卡标题元素，监听一个click事件
            tabTitleItems.forEach(function(tabTitleItem, tabTitleIndex) {
                // 给每个tabTitleItem监听事件
                tabTitleItem.onclick = function() {
                    // 把所有的tabTitleItem和tabContentItem的active类名去掉
                    tabTitleItems.forEach(function(tabTitleItem, index) {
                        tabTitleItem.classList.remove('active');
                        tabContentItems[index].classList.remove('active');
                    });
                    // 给当前点击的tabTitleItem添加active类名
                    tabTitleItem.classList.add('active');
                    // 当前的 tabContentItem添加 active
                    tabContentItems[tabTitleIndex].classList.add('active');
                };
            });
        })()

选项卡for

// 获取元素
        var btns = document.querySelectorAll('.btn li');
        var contents = document.querySelectorAll('.content li')

        // 遍历btns，给每个btns监听事件
        for (var i = 0;i<btns.length;i++) {
            // 给每个btns元素设置一盒属性
            btns[i].index = i
            // 给每个btns监听事件
            btns[i].onclick = function() {
                // 其他所有的btn和content去掉active
                for (var i=0;i<btns.length;i++) {
                    btns[i].classList.remove('active');
                    contents[i].classList.remove('active')
                }
                // 点击当前的btn添加类名active
                this.classList.add('active');
                // 当前对应的btn添加类名active
                contents[this.index].classList.add('active')
            }
        }

鼠标无缝滚动

var scrollBox = document.querySelector('#scrollBox');
        // 把所有图片的内容再复制一遍
        scrollBox.innerHTML += scrollBox.innerHTML
        // 开启定时器
        var intervalId = setInterval(runScroll,10)
        // 当鼠标悬停在scrollBox上
        scrollBox.onmouseenter = function() {
            // 停止定时器
            clearInterval(intervalId)
        }
        // 当鼠标离开scrollBox
        scrollBox.onmouseleave = function() {
            // 再次开启定时器
            intervalId = setInterval(runScroll,10)
        }
        // 定义定时器的回调函数
        function runScroll() {
            // 当第一组图片全部滚出scrollBox，瞬间调整位置
            if (scrollBox.scrollLeft >= 2000) {
                scrollBox.scrollLeft = '0'
            }
            // 修改元素的scrollLeft
            scrollBox.scrollLeft += 2;
        }

鼠标元素拖拽

        // 获取元素
        var box = document.querySelector('#box')
        // 监听鼠标按键按下的事件（修改背景颜色，获取mouesemove事件的监听，相关位置
        box.onmousedown = function(event) {
            box.style.backgroundColor = 'pink';
            // 获取鼠标在目标元素的位置
            var eleLeft = event.offsetX;
            var eleTop = event.offsetY;
            // 监听事件移动事件
            document.onmousemove = function(event) {
                // 获取鼠标在视口上的位置
                var vpLeft = event.clientX;
                var vpTop = event.clientY;
                // 计算box的目标位置
                var left = vpLeft - eleLeft;
                var top = vpTop - eleTop;
                // 限定位置的范围
                if (left < 0) {
                    left = 0;
                } else if (left>(document.documentElement.clientWidth-box.offsetWith)) {
                    left = document.documentElement.clientWidth-box.offsetWith;
                }
                if (top < 0) {
                    top = 0;
                }else if (top>(document.documentElement.clientHeight-box.offsetHeight)) {
                    top = document.documentElement.clientHeight-box.offsetHeight;
                }
                // 根据鼠标在视口上的位置调整box元素的位置
                box.style.left = left +'px'
                box.style.top = top +'px'
            }
        }
        // 监听鼠标按键抬起的事件（恢复背景颜色，解除mousemove事件的监听
        box.onmouseup = function() {
            // 恢复背景颜色
            box.style.backgroundColor = ''
            // 解除mousemove事件的监听
            document.onmousemove = null;
        }

实时获取输入框的输入

 // 获取输入框的元素
        var banks = document.querySelector('#bankCardInput')
        // 获取放大显示的元素
        var resBox = document.querySelector('#res')
        // 给input监听键盘按键抬起事件
        banks.onkeyup = function() {
            resBox.innerHTML = banks.value
        }

表单验证

        (function() {
            // 获取元素
            var inputBox = document.querySelector('#ageInput')
            var spanBox = document.querySelector('#ageCheck')
            // 给input监听失去焦点的事件
            inputBox.onblur = function() {
                // 判断用户的输入
                if (this.value >= 0 && this.value <= 200) {
                    spanBox.innerHTML = '您的年龄可用';
                    spanBox.style.color = 'green'
                } else {
                    spanBox.innerHTML = '请输入正确的年龄'
                    spanBox.style.color = 'red'
                }
            }
        })()

地址联动

 (function() {
            // 定义省的信息
            var provs = ['江苏', '浙江', '安徽', '河南', '江西'];
            // 定义城市信息
            var citys = [
                ['南京', '苏州', '无锡', '常州', '南通'],
                ['杭州', '宁波', '温州', '嘉兴', '绍兴'],
                ['合肥', '安庆', '马鞍山', '芜湖', '阜阳'],
                ['郑州', '洛阳', '开封', '驻马店', '南阳'],
                ['南昌', '九江', '赣州', '宜春', '抚州']
            ];
            // 获取元素
            var provSel = document.querySelector('#provSel')
            var citySel = document.querySelector('#citySel');
            // 根据省的信息，添加第一个select的下拉选项
            provs.forEach(function(item, index) {
                provSel.add(new Option(item, index));
            })
            // 给第一个select监听change事件
            provSel.onchange = function() {
                // 清空第二个select
                citySel.length = 0;
                // 获取所选的是哪个下拉选项
                var index = this.value;
                // 取出城市信息，第二个select添加下拉选项
                citys[index].forEach(function(item) {
                    citySel.add(new Option(item))
                })
            }
            // 使用代码触发change事件
            provSel.onchange();
        })()

键盘控制元素移动

 // 获取元素
        var box = document.querySelector('#box');
        var tank = document.querySelector('#tank');
        // 监听键盘按下的按键
        document.onkeydown = function(event) {
            // 判断按的是哪个按键
            //console.log(event.keyCode) 37 38 39 40
            switch(event.keyCode) {
                case 37:  //向左移动
                    tank.style.transfrom = 'rotate(-90deg)';
                    tank.style.left = Math.max(tank.offsetLeft-5,0)+'px';
                    break;
                case 38:  //向上移动
                    tank.style.transfrom = 'rotate(0)';
                    tank.style.top = Math.max(tank.offsetTop-5,0)+'px';
                case 39:  //向右移动
                    tank.style.transfrom = 'rotate(90deg)';
                    tank.style.left = Math.min(tank.offsetLeft+5,box.clientWidth-tank.offsetWidth)+'px';
                    break;
                case 40: //向下移动
                    tank.style.transfrom = 'rotate(180deg)';
                    tank.style.top = Math.min(tank.offsetTop+5,555)+'px'
            }
        }

轮播图有效果

 (function() {
            // 获取最外层的包裹元素
            var playBox = document.querySelector('#playBox');
            // 获取包裹图片的 ul 元素
            var imageWrapper = playBox.querySelector('.image-list');
            // 获取所有的按钮集合
            var btnItems = playBox.querySelectorAll('.btn-list li');
            // 获取上一张和下一张的按钮
            var prevBtn = playBox.querySelector('#prevBtn');
            var nextBtn = playBox.querySelector('#nextBtn');

            // 克隆第一张图片并且添加到最后面
            imageWrapper.appendChild(imageWrapper.firstElementChild.cloneNode(true));
            

            // 定义变量 标记当前按钮的索引
            var currentIndex = 0;
            // 定义变量，标记当前图片的索引
            var currentImageIndex = 0;
            // 定义变量，标记自动播放的时间间隔
            var duration = 3000;
            // 定义变量 记录图片的宽度
            var imageWidth = 900;
            // 定义变量，记录按钮的数量
            var btnLen = btnItems.length;
            // 定义变量，记录图片的数量
            var imageLen = imageWrapper.children.length;


            // 开启定时器,获取定时器标记
            var intervalId = setInterval(nextImage, duration);

            // 鼠标悬停在 palyBox 上，定时器暂停
            playBox.onmouseenter = function() {
                clearInterval(intervalId);
            };

            // 鼠标离开 playBox，定时器继续
            playBox.onmouseleave = function() {
                intervalId = setInterval(nextImage, duration);
            };

            // 遍历所有的按钮，监听事件
            btnItems.forEach(function(btnItem, index) {
                // 监听单击事件
                btnItem.onclick = function() {
                    // 修改当前按钮的索引
                    currentIndex = index;
                    // 修改当前图片的索引
                    currentImageIndex = index;
                    // 调用函数 实现图片显示和按钮高亮
                    setActive();
                };
            });

            // 监听单击事件 点击上一张按钮
            prevBtn.onclick = prevImage;

            // 监听单击事件 点击下一张按钮
            nextBtn.onclick = nextImage;

            // 监听离开页面的事件以及再次回到本页（切换到其他页面、最小化）
            document.onvisibilitychange = function() {
                // 如果离开本页面
                if (document.visibilityState === 'hidden') {
                    // 暂停定时器
                    clearInterval(intervalId);
                } else {
                    // 再次回调本页面，定时器重新开始
                    intervalId = setInterval(nextImage, duration);
                }
            };

            // 封装函数，实现切换到下一张图片
            function nextImage() {
                // 当前的索引递加
                currentIndex ++;
                currentImageIndex ++;
                // 如果按钮索引大于最大值
                if (currentIndex > btnLen - 1) {
                    currentIndex = 0;
                }
                // 如果图片索引大于最大值
                if (currentImageIndex > imageLen - 1) {
                    // 取消过渡，快速显示索引是 0 的图片
                    imageWrapper.style.transition = 'none';
                    imageWrapper.style.left = '0';
                    // 设置下一个图片的索引
                    currentImageIndex = 1;
                }
                // 调用函数 实现图片显示和按钮高亮
                setTimeout(setActive, 0);
            }

            // 封装函数，实现切换到上一张图片
            function prevImage() {
                // 当前索引递减
                currentIndex --;
                currentImageIndex --;
                // 如果按钮当前索引小于 0
                if (currentIndex < 0) {
                    currentIndex = btnLen - 1;
                }
                // 如果图片当前索引小于 0
                if (currentImageIndex < 0) {
                    // 取消过渡效果，快速切换位置
                    imageWrapper.style.transition = 'none';
                    imageWrapper.style.left = -(imageLen - 1) * imageWidth + 'px';
                    // 设置图片新的索引
                    currentImageIndex = imageLen - 2;
                }
                // 调用函数 实现图片显示和按钮高亮
                setTimeout(setActive, 0);
            }

            // 封装函数，实现当前的图片显示以及当前的按钮高亮
            function setActive() {
                // 设置过渡效果
                imageWrapper.style.transition = 'left .5s';

                // 排他操作，所有的按钮去掉 active 类
                for (var i = 0; i < btnItems.length; i ++) {
                    btnItems[i].classList.remove('active');
                }
                // 当前的按钮添加active类
                btnItems[currentIndex].classList.add('active');
                // 设置 imageList 的位置 left 属性
                imageWrapper.style.left = -currentImageIndex * imageWidth + 'px';
            }
        })();

在父元素中被拖拽

        // 获取元素
        var box01 = document.querySelector('#box01')
        var box02 = document.querySelector('#box02')
        // 监听鼠标按键按下的事件（修改背景颜色，获取mouesemove事件的监听，相关位置
        box02.onmousedown = function(event) {
            box02.style.backgroundColor = 'pink';
            // 获取鼠标在目标元素的位置
            var eleLeft = event.offsetX;
            var eleTop = event.offsetY;
            // 监听事件移动事件
            box01.onmousemove = function(event) {
                // 获取鼠标在父元素上的位置
                var vpLeft = event.clientX-box01.getBoundingClientRect().left;
                var vpTop = event.clientY-box01.getBoundingClientRect().top;
                // 计算box02的目标位置
                var left = vpLeft - eleLeft;
                var top = vpTop - eleTop;
                // 限定位置的范围
                if (left < 0) {
                    left = 0;
                } else if (left>box01.clientWidth-box02.offsetWidth) {
                    left = box01.clientWidth-box02.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                }else if (top>box01.clientHeight-box02.offsetHeight) {
                    top = box01.clientHeight-box02.offsetHeight
                }
                // 根据鼠标在视口上的位置调整box元素的位置
                box02.style.left = left +'px'
                box02.style.top = top +'px'
            }
        }
        // 监听鼠标按键抬起的事件（恢复背景颜色，解除mousemove事件的监听
        box02.onmouseup = function() {
            // 恢复背景颜色
            box02.style.backgroundColor = ''
            // 解除mousemove事件的监听
            box01.onmousemove = null;
        }

导航条吸附

  /* 设置吸附定位 */
            position: sticky;

 var pageNav = document.querySelector('#pageNav');
        // 计算导航条元素与页面顶部的距离（导航条在页面上的y坐标）
        var pageDst = pageNav.offsetTop;
        // 监听页面滚动
        window.onscroll = function() {
            // 获取页面滚动的距离
            var scrollDst = document.documentElement.scrollTop ||document.body.scrollTop
            // 当页面滚动的距离>=导航条页面顶部的距离
            if (scrollDst >= pageDst ) {
                // 添加吸附效果
                pageNav.classList.add('fixed-top')
                // 给body添加上内边距
                document.body.style.paddingTop = '40px'
            } else {
                // 取消吸附效果
                pageNav.classList.remove('fixed-top')
                // 去掉body的上内边距
                document.body.style.paddingTop = '40px'
            }
        }