JavaScript原生网易云

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="./css/index.css">

</head>

<body>

    <div class="box clearfix">

        <!-- 左侧的推荐 -->

        <div class="left">

            <div class="type-item">

                <h2>推荐</h2>

                <ul>

                    <!-- 标记第一个默认选中 -->

                    <li class="active">

                        <!-- href="javascript:;"表示重新读取js

                    data-type定义数据的标签属性,在js中通过dataset来获取-->

                        <a href="javascript:;" data-type="-1">入驻歌手</a>

                    </li>

                </ul>

            </div>

            <!-- 男女歌手 -->

            <div class="type-item">

                <h2>华语</h2>

                <ul>

                    <!-- 标记第一个默认选中 -->

                    <li>

                        <a href="javascript:;" data-type="1" data-area="7">华语男歌手</a>

                    </li>

                    <li>

                        <a href="javascript:;" data-type="2" data-area="7">华语女歌手</a>

                    </li>

                    <li>

                        <a href="javascript:;" data-type="3" data-area="7">华语组合/乐队</a>

                    </li>

                </ul>

            </div>

            <div class="type-item">

                <h2>欧美</h2>

                <ul>

                    <!-- 标记第一个默认选中 -->

                    <li>

                        <a href="javascript:;" data-type="1" data-area="96">欧美男歌手</a>

                    </li>

                    <li>

                        <a href="javascript:;" data-type="2" data-area="96">欧美女歌手</a>

                    </li>

                    <li>

                        <a href="javascript:;" data-type="3" data-area="96">欧美组合/乐队</a>

                    </li>

                </ul>

            </div>

            <div class="type-item">

                <h2>亚洲</h2>

                <ul>

                    <!-- 标记第一个默认选中 -->

                    <li>

                        <a href="javascript:;" data-type="1" data-area="16">亚洲男歌手</a>

                    </li>

                    <li>

                        <a href="javascript:;" data-type="2" data-area="16">亚洲女歌手</a>

                    </li>

                    <li>

                        <a href="javascript:;" data-type="3" data-area="16">亚洲组合/乐队</a>

                    </li>

                </ul>

            </div>

            <div class="type-item">

                <h2>其他</h2>

                <ul>

                    <!-- 标记第一个默认选中 -->

                    <li>

                        <a href="javascript:;" data-type="1" data-area="0">其他男歌手</a>

                    </li>

                    <li>

                        <a href="javascript:;" data-type="2" data-area="0">其他女歌手</a>

                    </li>

                    <li>

                        <a href="javascript:;" data-type="3" data-area="0">其他组合/乐队</a>

                    </li>

                </ul>

            </div>

        </div>

        <!-- 右侧 -->

        <div class="right">

            <div class="r-box">

                <div class="title clearfix">

                    <h2 id="type">入驻歌手</h2><button οnclick="btn()" style="border: 0; width: 50px;height: 30px; text-align: center;color: red;margin-left: 20px;">搜索</button>

                    <a href="#" class="more">更多&gt;</a>

                </div>

                <div class="letters">

                    <ul>

                        <li class="active"><a href="javascript:;">热门</a></li>

                        <li><a href="javascript:;" data-letter="a">A</a></li>

                        <li><a href="javascript:;" data-letter="b">B</a></li>

                        <li><a href="javascript:;" data-letter="c">C</a></li>

                        <li><a href="javascript:;" data-letter="d">D</a></li>

                        <li><a href="javascript:;" data-letter="e">E</a></li>

                        <li><a href="javascript:;" data-letter="f">F</a></li>

                        <li><a href="javascript:;" data-letter="g">G</a></li>

                        <li><a href="javascript:;" data-letter="h">H</a></li>

                        <li><a href="javascript:;" data-letter="i">I</a></li>

                        <li><a href="javascript:;" data-letter="g">G</a></li>

                        <li><a href="javascript:;" data-letter="k">K</a></li>

                        <li><a href="javascript:;" data-letter="l">L</a></li>

                        <li><a href="javascript:;" data-letter="m">M</a></li>

                        <li><a href="javascript:;" data-letter="n">N</a></li>

                        <li><a href="javascript:;" data-letter="o">O</a></li>

                        <li><a href="javascript:;" data-letter="p">P</a></li>

                        <li><a href="javascript:;" data-letter="q">Q</a></li>

                        <li><a href="javascript:;" data-letter="r">R</a></li>

                        <li><a href="javascript:;" data-letter="s">S</a></li>

                        <li><a href="javascript:;" data-letter="t">T</a></li>

                        <li><a href="javascript:;" data-letter="u">U</a></li>

                        <li><a href="javascript:;" data-letter="v">V</a></li>

                        <li><a href="javascript:;" data-letter="w">W</a></li>

                        <li><a href="javascript:;" data-letter="x">X</a></li>

                        <li><a href="javascript:;" data-letter="y">Y</a></li>

                        <li><a href="javascript:;" data-letter="z">Z</a></li>

                        <li> </li>

                    </ul>

                </div>

                <!-- 歌手列表 -->

                <div class="artists">

                    <ul class="clearfix" id="artists">

                        <li>

                            <a>

                                <img src="./img/demo.jpg" alt="">

                                <p>薛之谦</p>

                            </a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

        <div class="loading">正在加载...</div>

    </div>

</body>

<script src="./js/1index.js"></script>

<!-- 这是个第三方插件可以快速实现懒加载 -->

<script src="./js/lazyload.min.js"></script>

<script>

    function btn(){

        window.location.href="./xq.html";

    }

</script>

</html>

js逻辑

var type = document.querySelector('#type');

var artists = document.querySelector('#artists');

var lis = document.querySelectorAll('.left li');

var letters = document.querySelectorAll('.letters li');

var loading = document.querySelector('.loading');

// 标记变量,记录每次切换时候的数据

var starType = -1; //标记明星分类

var starArea = -1; //标记明星地区

var title = "入驻歌手"; //歌手的标题

var lettr = "-1"; //快速检索

var page = 0; //分页

var result = ""; //服务器端结果

// 每一次点击切换其实只是切换的一部分数据,所以封装一个函数

// 实际的函数参数类型与值还是要以接口文档上面要求的为主

function getArtists(type, area, initial, offset, callback) {

    console.log(type, area, initial, offset);

    //    发送ajax请求了

    // 先让loading显示

    loading.classList.add('show');

    // 查询地址

    var url = `https://autumnfish.cn/artist/list?type=${type}&area=${area}&initial=${initial}&limit=30&offset=${offset*30}`;

    var xhr = new XMLHttpRequest();

    xhr.open("get", url);

    // 可以根据实际的点击获取不同的数据

    // 这里面的值将来掉方法的时候是根据a标签传递过来的数据切换的

    xhr.send();

    xhr.onreadystatechange = function() {

        if (xhr.readyState === 4 && xhr.status === 200) {

            // 回传参数 因为callback当时接收的是一个函数体

            // 在这里就相当于调用

            callback(xhr.responseText);

            loading.classList.remove('show');

           

        }

    }

}

// 调用获取数据的方法

getArtists(starType, starArea, lettr, page, function(res) {

    //  使用json解析,解析数据,渲染视图

    var data = JSON.parse(res);

    console.log(data);

    showInfo(title, data);

});

// 渲染视图的方法

function showInfo(title, stars, more) {

    type.textContent = title;

    var html = ``;

    for (let i = 0; i < stars.artists.length; i++) {

        // 取出来每一个歌手的信息

        const star = stars.artists[i];

        // console.log(star.img1v1Url);

        // a标签就是通向歌手详情页的标签,需要携带数据

        html += `

          <li>

          <a href="#">

           

                <img class ="branwdo" src="img/loading.gif" data-src="${star.img1v1Url}">

                <p>${star.name}</p>

             </a>

          </li>

        `

    }

    //    more用来判断是否是触底加载更多

    if (more) {

        //加载更多

        artists.innerHTML = artists.innerHTML + html;

       

    } else {

        artists.innerHTML = html;

    }

    //    懒加载图片

    lazyload(document.querySelectorAll('.branwdo'));

}

// 点击类别切换数据

for (let i = 0; i < lis.length; i++) {

    const li = lis[i];

    // 绑定点击

    li.addEventListener('click', function(e) {

        console.log(this);

        // 用户在选择歌手分类的时候有可能操作了热门这块的a-z,要切换成热门

        lettr = -1;

        letters.forEach(function(v, i) {

            if (i === 0) {

                v.classList.add('active');

            } else {

                v.classList.remove('active');

            }

        });

        // 还要恢复第一页的数据

        page = 0;

        // 先清楚所有的li上的类型

        lis.forEach(function(v) {

                v.classList.remove('active');

            })

            // 点击的这个添加上去active

        this.classList.add('active');

        // 拿数据,再次发送请求进行数据更新

        var a = this.children[0];

        starType = a.dataset.type;

        starArea = a.dataset.area;

        title = a.textContent.trim();

        console.log(starType, starArea);

        // 重新获取数据,并渲染视图

        getArtists(starType, starArea, lettr, page, function(res) {

            var data = JSON.parse(res);

            // console.log(data);

            showInfo(title, data);

        });

    });

}

// 根据首字母排序的

letters.forEach(function(le) {

    le.onclick = function() {

        // 更改样式

        letters.forEach(function(v) {

            v.classList.remove('active');

        })

        le.classList.add('active');

        // 传递a-z

        lettr = le.children[0].dataset.letter;

        // 重新获取数据,并渲染视图

        getArtists(starType, starArea, lettr, page, function(res) {

            var data = JSON.parse(res);

            // console.log(data);

            showInfo(title, data);

        });

    }

});

// 下拉加载更多,更多,歌手详情

window.onscroll = function() {

    // 浏览器视口的高度

    var clientHeight = document.documentElement.clientHeight;

    // 滚动条在y轴上的滚动距离

    var scrollTop = document.documentElement.scrollTop;

    // 文档的总高度

    var scrollHeight = document.documentElement.scrollHeight;

    if (clientHeight + scrollTop >= scrollHeight) {

        //重新加载数据

        page += 1;

        getArtists(starType, starArea, lettr, page, function(res) {

            var data = JSON.parse(res);

            // console.log(data);

            showInfo(title, data, "1");

        });

    }

}

微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网易云音乐微信小程序源码(含截图)仿网
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值