webgis入门之JavaScript（练习3）网易云页面开发

李佩锦peijin

已于 2024-03-02 12:56:52 修改

阅读量680

点赞数 23

分类专栏： webgis开发文章标签： javascript 开发语言 ecmascript

于 2024-02-29 10:39:29 首次发布

本文链接：https://blog.csdn.net/weixin_67679364/article/details/136362400

版权

webgis开发专栏收录该内容

17 篇文章 3 订阅

订阅专栏

WEBGIS开发

主页面

点击详情页

主页面开发

.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/day3/jquery.min.js"></script>
    <link rel="stylesheet" href="wyy.css">
</head>

<body>
    <div class="recommendation">
        <div class="rec">
            <p class="rec_text1">每日推荐</p>
            <p class="rec_text2">（每日更新）</p>
        </div>
        <div class="line"></div>
        <div class="recommend">
        </div>
    </div>

    <script>
        $.ajax({
            type: 'GET',
            url: 'http://39.103.151.139:3000/program/recommend',
            success: function (data) {
                // console.log(data)
                data.programs.forEach((item) => {
                    console.log(item)
                    $('.recommend').append(`        
                        <div class="row">
                            <div class="cover">
                                <img class="cover_img" src=${item.coverUrl} alt=""></div>
                            <a class="name" 
                                href="http://127.0.0.1:5500/js/day3/homework-day5/item.html?id=${item.id}"
                                onmouseover="this.style.color='#000000'; this.style.textDecoration='underline';this.style.fontWeight='bold';"
                                onmouseout="this.style.color='#323131'; this.style.textDecoration='none';this.style.fontWeight='normal'">
                                ${item.name}</a>
                            <p class="radioName">${item.radio.name}</p>
                            <p class="listenerCount"><strong>${item.listenerCount}</strong></p>
                            <p class="likedCount"><strong>${item.likedCount}</strong></p>
                            <div class="category">
                                <div class="category_text">${item.radio.category}</div></div>
                        </div>`)

                    const divs = document.querySelectorAll('.row');
                    divs.forEach((item, index) => {
                    item.style.background = index % 2 ? 'rgb(238, 238, 238)' : 'rgb(255, 255, 255)';
                    });
                });
            }
        })
    </script>
</body>

</html>

<!-- <div class="row" style="width: 100%;height: 78px;;
display: flex;justify-content: space-evenly;align-items: center;

">
    <div style="width: 10%;height: 80%;margin-left:10px;line-height: 80px;">
        <img src=${item.blurCoverUrl} alt="" style="width: 100%;height: 100%;">
    </div>
    <a class="name" href="https://music.163.com/#/program?id=2536209135"
        style="display: block; width: 48%; height: 80%; margin-left: 10px; line-height: 80px; margin-left: 10px; color: #323131; text-decoration: none;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
        onmouseover="this.style.color='#000000'; this.style.textDecoration='underline';this.style.fontWeight='strong';"
        onmouseout="this.style.color='#323131'; this.style.textDecoration='none';">
        Vol. 1 The Beatles《白色专辑》再没有哪个乐队值得我们如此挖啊挖啊挖
    </a>
    <p class="radioName"
        style="width: 14%;height: 80%;margin-left:10px;line-height: 80px;color: rgb(102,102,102);">
        杜凯的收藏夹</p>
    <p class="listenerCount"
        style="width: 8%;height: 80%;margin-left:10px;line-height: 80px;color: rgb(153,153,153);">
        <strong>播放130</strong>
    </p>
    <p class="likedCount"
        style="width: 5%;height: 80%;margin-left:10px;line-height: 80px;color: rgb(153,153,153);">
        <strong>赞0</strong>
    </p>
    <div class="category"
        style="width: 15%;height: 80%;margin-left:10px;line-height: 80px;color: rgb(153,153,153)">
        <div style="border:1px solid rgb(153,153,153);display: inline;">音乐播客</div>
    </div>
</div> -->

.css代码

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Microsoft YaHei UI Light", sans-serif;
    font-size: 12px;
}

.recommendation {
    width: 80%;
    height: auto;
    margin: 0 auto;
    border-left: 0.5px solid rgb(211, 211, 211);
    border-right: 0.5px solid rgb(211, 211, 211);
    border-bottom: 0.5px solid rgb(211, 211, 211);
}

.recommend {
    width: 94%;
    height: auto;
    margin: 0 auto;
    border-left: 0.5px solid rgb(211, 211, 211);
    border-right: 0.5px solid rgb(211, 211, 211);
}

.category {
    font-family: "Microsoft YaHei UI", sans-serif;
}

.rec {
    width: 100%;
    height: 70px;
    background-color: rgb(229, 255, 0);
    margin-bottom: 10px;
}

.rec_text1 {
    width: auto;
    height: auto;
    color: black;
    float: left;
    font-size: 25px;
    margin-top: 35px;
    margin-left: 10px;
}

.rec_text2 {
    width: auto;
    height: auto;
    color: rgb(153, 153, 153);
    float: left;
    margin-top: 45px;
}

.line {
    width: 100%;
    height: 2px;
    background-color: red;
}

.row {
    width: 100%;
    height: 78px;
    ;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.cover {
    width: 10%;
    height: 80%;
    margin-left: 10px;
    line-height: 80px;
}

.cover_img {
    width: 100%;
    height: 100%;
}

.name {
    display: block;
    width: 43%;
    height: 80%;
    margin-left: 10px;
    line-height: 80px;
    margin-left: 10px;
    color: #323131;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radioName {
    width: 21%;
    height: 80%;
    margin-left: 10px;
    line-height: 80px;
    color: rgb(102, 102, 102);
}

.listenerCount {
    width: 8%;
    height: 80%;
    margin-left: 10px;
    line-height: 80px;
    color: rgb(153, 153, 153);
}

.likedCount {
    width: 5%;
    height: 80%;
    margin-left: 10px;
    line-height: 80px;
    color: rgb(153, 153, 153);
}

.category {
    width: 15%;
    height: 80%;
    margin-left: 10px;
    line-height: 80px;
    color: rgb(153, 153, 153)
}

.category_text {
    border: 1px solid rgb(153, 153, 153);
    display: inline;
}

详情页开发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/day3/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            width: 60%;
            height: auto;
            /* background-color: red; */
            margin: 2px auto auto auto;
            overflow: hidden;
            position: relative;
        }

        .outer1 {
            width: 100vw;
            height: 220px;
            /* background-color: rgb(129, 107, 107); */
            margin: 2px auto auto auto;
            overflow: hidden;
            position: relative;
        }

        .pic {
            width: 180px;
            height: 180px;
            background-color: rgb(255, 255, 255);
            position: absolute;
            top: 45%;
            transform: translate(0, -50%);
            margin-left: 10px;
            margin-right: 10px;
            float: left;
            border: 1px solid rgb(133, 132, 132);
        }

        .pic_img {
            display: block;
            width: 95%;
            height: 95%;
            position: absolute;
            top: 2%;
            left: 2%;
            border: 0.5px solid rgb(209, 209, 209);
            /* margin: 10px 10px 10px 10px; */
        }

        .introduct {
            width: 525px;
            height: 180px;
            /* background-color: rgb(51, 53, 153); */
            position: absolute;
            top: 45%;
            left: 16%;
            transform: translate(0, -50%);
            margin-left: 10px;
            margin-right: 10px;
            float: left;
        }

        .o2 {
            width: 50px;
        }

        .f1 {
            width: 120px;
            background-color: rgb(57, 137, 211);
            border-radius: 2px;
            border-color: rgb(93, 135, 242);
            color: white;
        }
        .title{
            margin-top: 40px;
        }
        .title_img{
            width: 80px;height: 30px; display: block;float: left;
        }
        .title_p{
            display: block;float: left;line-height: 30px;
        }
        .tag{
            margin-top: 140px;margin-left: 10px;
        }
        .radioName{
            display: block;float: left;margin-left: 10px
        }
        .tag_button{
            display: block;width: auto;float: left;margin-left: 10px
        }
        .outer2_a{
            margin-left: 10px;font-family: 'Fangsong',sans-serif;font-size: 14px;
        }
    </style>
</head>

<body>
    <script>
        let idStr = location.search.split('=')
        id = idStr[1]
        $.ajax({
            type: 'GET',
            url: 'http://39.103.151.139:3000/dj/program/detail?id='+id,
            success: function (data) {
                p = data.program;
                console.log(p)
                $('body').append(`
                    <div class="outer">
                        <div class="outer1">
                            <div class="pic">
                                <img class="pic_img" src="${p.coverUrl}">
                            </div>
                            <div class="introduct">
                                <div class="title">
                                    <img class="title_img" src="./1.png" alt="">
                                    <p class="title_p">${p.name}</p>
                                </div>
                                <div class="tag">
                                    <div class="radioname">${p.radio.name}</div>
                                    <button class="tag_button">☆订阅(${p.radio.subCount})</button>
                                </div>
                            </div>
                        </div>
                        <div class="outer2">
                            <button class="o2 f1" ">播放 ${p.duration}</button>
                            <button class=" o2">点赞 ${p.likedCount}</button>
                            <button class="o2">评论 ${p.commentCount}</button>
                            <button class="o2">分享 ${p.shareCount}</button>
                            <button class="o2">下载</button>
                            <a class="outer2_a" href="">生成外链播放器</a>
                        </div>
                    </div>
                `)
            }
        })
    </script>
</body>

</html>

李佩锦peijin

关注

23
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
webgis入门之JavaScript（练习3）网易云页面开发

项目包含两个主要页面：主页面和详情页。主页面是一个网页，展示了一些音乐节目的推荐信息，包括节目名称、所属电台、收听人数等，并提供了链接跳转至详情页的功能。主页面的HTML代码中通过Ajax请求获取了音乐节目的推荐数据，并使用jQuery动态生成了推荐节目的展示内容。详情页展示了单个音乐节目的详细信息，包括封面、节目名称、所属电台等，并提供了播放、点赞、评论、分享等功能按钮。详情页的HTML代码中通过Ajax请求根据URL参数获取了特定音乐节目的详细数据，并动态生成了页面内容。CSS代码用于样式设计。
复制链接

扫一扫