WEB个人网页问题汇总及分享总结

页面改变时导航栏跟随检测问题

问题描述：无法在页面滚动时实时获取页面的宽高，无法做出判断

解决方案：使用 getClientRects分别获取每个页面距离顶部的距离和每个页面的高度，进行比较。
getClientRects
getClientRects 获取元素占据页面的所有矩形区域
返回值 DOMRect 对象 / 返回的一组矩形的集合
返回一个TextRectangle集合(TextRectangleList对象)
TextRectangle对象包含了 top left bottom right width height 六个属性

参考博客：https://blog.csdn.net/freshlover/article/details/8985887
https://www.webhek.com/post/getclientrects-getboundingclientrect.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects

window.onscroll = ()=>{
        elements.forEach((ele, index)=>{
            // console.log(ele,index);

            /* getClientRects 获取元素占据页面的所有矩形区域
            * 返回值 DOMRect 对象 / 返回的一组矩形的集合
            * / 返回一个TextRectangle集合(TextRectangleList对象)
            * TextRectangle对象包含了 top left bottom right width height 六个属性 */

            let top = ele.getClientRects()[0].top;
            let height = ele.getClientRects()[0].height;

/*            console.log(index + ":" + top);
            console.log(index + ":" + height);*/

            // if( -top <= height && top <= 0){
            if( top > -height/2 && top <= height/2){
                // console.log(index + ":" + top);
                // console.log(index + ":" + height);
                navElements.forEach( (_navItem) =>{
                    _navItem.classList.remove("nav-active");
                });
                navElements[index].classList.add("nav-active");
            }
        });
    }

轮播图点击小按钮切换问题

问题描述：无法直接通过数组的索引进行操作，控制台显示未找到
解决方案： 通过 js 给 li 标签添加属性 index 来操作。
注：标签本质就是一个对象，是一个对象，就可以添加属性了。不过这属性是JS 赋予它的，没有直接写在标签上，所以不能使用 getAttribute() 获取它的值

for(var j =0;j<5;j++){
        /* https://blog.csdn.net/weixin_42703239/article/details/84585609
        给 li 标签添加属性 index
        标签本质就是一个对象，是一个对象，就可以添加属性了。不过这属性是JS 赋予它的，
        没有直接写在标签上，所以不能使用 getAttribute() 获取它的值。*/
        lik[j+5].index = j;
        lik[j+5].οnclick=function(){
            fun(this.index,i);
            console.log(this.index + " " + i);
            i=this.index;
        }
    }

参考博客：https://blog.csdn.net/weixin_42703239/article/details/84585609

音乐播放器缓存问题

问题描述：音乐播放器无法记录当前播放时长和播放列表
解决方案：使用 localStorage 创建一个本地存储来储存播放时长和播放列表
创建储存：localStorage.setItem(“key”, “value”);
获取储存：var lastname = localStorage.getItem(“key”);
ocalStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage 属性是只读的。

// 获取音乐播放进度
setTimeout(function(){
        //获取DOM
        var bgm = document.getElementById('bgm');
        // 如果发现有本地存储，则按储存进行播放
        if(localStorage.getItem('bgm_time') != null){
            bgm.currentTime = localStorage.getItem('bgm_time');
            //启动播放音乐
            bgm.play();
        }
      /*  不断循环记录播放进度
      * window.setInterval 会按照周期不停地调用函数，直到 clearInterval() 被调用或窗口被关闭 */
        window.setInterval(function(){
            //检测是否支持本地存储
            if(typeof(Storage) !== 'undefined'){
                //写入BGM播放进度
                localStorage.setItem('bgm_time',bgm.currentTime);
            }else{
                //提示浏览器不支持
                var doc_body = document.querySelector('body');
                doc_body.innerHTML = '<h1>抱歉！您的浏览器过旧，请更换新的浏览器再试</h1>';
            }
        },100);
        //初始化启动BGM
        bgm.play();
    },1000);

/* 获取播放列表*/
    if(localStorage.getItem('bgm_gds') != null){
        bgm.setAttribute('value',localStorage.getItem('bgm_gds'));
        bgm.innerHTML = '<source src="music/' + localStorage.getItem('bgm_gds') + '.mp3" type="audio/mpeg">';
        bgm_echo.innerHTML = '<' + localStorage.getItem('bgm_gds') + '>';
    }

参考博客：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

鼠标控制相册旋转+图片倒影渐变问题

问题描述：鼠标移动距离和相册旋转差距太大
解决方案：分别求出鼠标第一次点击屏幕的坐标和鼠标实时移动的坐标值
利用两值之差给旋转角度赋值。
注：
1、为防止移动距离和旋转角度不成比例，旋转角度缩小10倍
2、为防止相册旋转较快 鼠标没错移动后都要当前值赋给鼠标点击的初始值

			initX = e.clientX;
            initY = e.clientY;
            console.log("鼠标点击坐标"+ initX +"   "+initY);

            //    鼠标移动
            this.onmousemove = function (e) {
                // 实时获取鼠标移动坐标
                moveX = e.clientX;
                moveY = e.clientY;

                console.log("鼠标坐标"+ moveX +"   "+moveY);

                //获取移动的差值
                valueIMX = moveX-initX;
                valueIMY = moveY-initY;

                console.log("鼠标差值"+ valueIMX +"   "+valueIMY);


                //获取旋转的角度
                RotX -= valueIMY;    /*因为要向前运动所以是负值*/
                RotY += valueIMX;

                console.log("旋转的角度" + RotX +"   "+RotY);

                //   将角度添加上  img容器
                box.style.transform = "rotateX("+RotX*0.1+"deg) rotateY("+RotY*0.1+"deg)"
                //    差值太大（转动太快） 调节每次的差值是和上一次差  而不是之前差（初始值的差）
                initX = moveX;
                initY = moveY;

问题描述：图片倒影渐变时提示缺少属性，不理解-webkit-gradient方法
解决方案：webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

-webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,color-stop(50%,transparent),
            from(transparent),to(rgba(250,250,250,0.4)));

参考博客：https://blog.csdn.net/Bule_daze/article/details/105661870
https://www.jianshu.com/p/1c3129a62f02

WEB直接引用阿里巴巴图标库资源

方式一：Unicode
特点
支持按字体的方式去动态调整图标大小，颜色等等
不支持多色图标
在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难

方式二：Font class
特点：
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
不支持多色图标

方式三：Symbol
特点：
支持多色图标，不再受单色限制
支持像字体那样通过font-size,color来调整样式
可利用CSS实现动画
减少HTTP请求
矢量，缩放不失真
可以很精细的控制SVG图标的每一部分

具体引入步骤

Valine - 一款快速、简洁且高效的无后端评论系统。

可直接调用现有的API创建评论系统并且支持DIY
传送门