音乐项目总结（交互第一周）

这一周最开始时由于自己的vip接口的实现需要借助其他的功能所以暂时没有写，但是在其他的文档里进行了测试。然后就把自己的页面内容，js效果有进一步的完善。例如：当滚动条滑到底部时会自动加载新的内容。代码如下：

在这里主要涉及了模版字符的使用，对是否到达滚动条底部进行一个判断。

//获取当前可视范围的高度
function getClientHeight(){
    var clientHeight = 0
    if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    }else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
}
//获取文档完整的高度
function getScrollHeight(){
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
var i=0//传加载次数
//绑定事件
window.onscroll = function () {
    console.log('1.getScrollTop', getScrollTop())
    console.log('2.getClientHeight', getClientHeight())
    console.log('3.getScrollHeight', getScrollHeight())

    if (getScrollTop() + getClientHeight() + 1 > getScrollHeight()) {
        //生成新节点
        var newnode = document.createElement("div");
//为页面里添加新的内容，与上面的样式保持一致，因此可以对添加的内容利用模版字符
        newnode.innerHTML += `
                       <div><div class="list_img"><a><img src="../photo/老师你好会选.webp"><i class="fa fa-play"></i></a></div>
                        <div class="disc_information">老师，你好会选<div>昊HOHO昊<br>2022-04-12</div></div>
                    </div>

                    <div><div class="list_img"><a><img src="../photo/老师你好会选.webp"><i class="fa fa-play"></i></a></div>
                        <div class="disc_information">老师，你好会选<div>昊HOHO昊<br>2022-04-12</div></div>
                    </div>

                    <div><div class="list_img"><a><img src="../photo/老师你好会选.webp"><i class="fa fa-play"></i></a></div>
                        <div class="disc_information">老师，你好会选<div>昊HOHO昊<br>2022-04-12</div></div>
                    </div>

                    <div><div class="list_img"><a><img src="../photo/老师你好会选.webp"><i class="fa fa-play"></i></a></div>
                        <div class="disc_information">老师，你好会选<div>昊HOHO昊<br>2022-04-12</div></div>
                    </div>
                    <div><div class="list_img"><a><img src="../photo/老师你好会选.webp"><i class="fa fa-play"></i></a></div>
                        <div class="disc_information">老师，你好会选<div>昊HOHO昊<br>2022-04-12</div></div>
                    </div>
                        `
        //此处也可写在调用ajax获取后台数据，用i传页码
        // document.body.appendChild(newnode);
        document.getElementById("en").appendChild(newnode);
    }
}

2.在写页面的时候还对背景图片进行了定位通过使用（background-position）不过好难定位准确呀，弄得我头大，唉。

3.对专辑进行了交互，在交互的过程中出现了bug。例如：在遍历后端传过来的数据的时候想把不同类型的专辑放在不同的标签之下，如

可是在遍历的时候不小心弄成了死循环，主要是因为自己通过if语句进行判断的时候让如果不是自己想要的标签时，使k--了这样会造成内容一直在某个数上进行循环，最后终于改好了，正确的代码具体如下：

var fn=function (){
    var disc_classify=document.getElementById("disc_classify");
    $.ajax({
        type: 'get',
        url: 'http://localhost:8080/MusicWebSite/albumViewAll',
        data: {
        },
        dataType: 'json',
        success: function (data) {
            console.log(data);
            var ul=document.createElement("ul");
            ul.className="disc_classify_content";
            for (var k=0;k<data.length;k++) {
                    if(data[k].albumStyle=="内地"){
                        ul.innerHTML+= `
                                 <li><div class="disc_img">
                                 <a><img src="${data[k].albumPicturePath}"><i class="fa fa-play"></i></a>
                                 </div><div class="disc_news">${data[k].albumName}<br>${data[k].singerName}
                                 </div></li>
                            `
                    }
                }
//                 ul.innerHTML += `
//                              <li><div class="disc_img">
//                              <a><img src="${data[k].albumPicturePath}"><i class="fa fa-play"></i></a>
//                              </div><div class="disc_news">${data[k].albumName}<br>${data[k].singerName}
//                              </div></li>
//                         `
//             }
            console.log(ul);
            // disc_classify.innerHTML="";
            disc_classify.replaceChild(ul,document.getElementById("disc_top"));
            // disc_classify.appendChild(ul)
            console.log(disc_classify);
        },
        error: function (er) {
            console.log(er)
        },
    });
}

        接下来就谈谈这周生活上发生的事情吧。例如：在这周周一上体育课时突然下了大雨。别人都往宿舍跑，而我和我的舍友往教学楼跑。可是由于下的太大被困在三餐等着别人送伞。其他倒没有什么重要的事了。最开心的是我的脚终于要好了，键盘也到了。

        下周的计划就是把自己交互的尽快交互完，改改细节等。加油！！！