【无标题】

最新推荐文章于 2024-10-01 23:20:42 发布

Lover 立

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量271

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_63008234/article/details/121976545

版权

/* 头部样式 */
header{
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height:50px;
    display: flex;
    justify-content: space-between;
    height:50px;
    border: 1px solid gray;
    background-color:rgb(122, 139, 139) ;
}
/* 74 112 139 */
/* 39 64 139 */
/* 122 139 139 */

.ul>li{
    float: left;
    list-style: none;
    
}

a{
    text-decoration: none;
    color: black;
}

#ul-1{
  
    width: 200px;
    display: flex;
    justify-content: space-between;
}

#ul-1>li:hover{
  transform: scale(1.3);
  /* box-shadow: 0 10px 20px rgba(0,0,0,0.5); */
}
#form{
  display: flex;
  align-items: center;
}

#input{
  border:2px solid black;
   width: 300px;
   height: 20px;
   border-radius:20px 0  0 20px;
 }

#ul-2{
    width: 100px;
    display: flex;
    justify-content: space-around;
    margin-right: 20px;
}

#open_Login{
    margin-top: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height:40px;
    width:50px;
    border: 10px;
    color: white;
  }

  
/* 对登录框样式进行设置 */
.Login{ 
    width:400px;
    height: 200px;
    display: none;
    position: fixed;
    top: 10%;
    right: 5%;
    border-radius: 5px; 
    background-color: white;
  }

  .Login a {
    position: absolute;
    right: -20px;
    top: -20px;
    background-color: #fff;
    display: inline-block;
    padding: 5px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    color: black;
    font-size: 13px;
  }
  .first{
    margin-top: 5%;
    margin-left: 70px;
   display: flex;
   justify-content: center;
  }

  .second{
    position: relative;
    width: 260px;
    height: 20px;
    margin-top: 5%;
    margin-left: 70px;
    text-align: right;
  }

  .last{
    margin-top: 5%;
    margin-left: 75px;
    display: flex;
    justify-content: center;
   }

   #tips{
     position: absolute;
     top:-20px;
     width:300px;
     height:10px;
     display: none;
     color: red;
   }
/* 主体部分样式 */
main{
    margin-top: 50px;
    width: 100%;
    border: 1px solid gray;
    display: flex;
    justify-content: center; 
} 

#favor{
    position: fixed;
    right:280px ;
    bottom: 100px;
    color: white;
    background-color:rgb(122, 139, 139) ;
    border: 1px solid grey;
}

#favor>li{
    list-style: none;
}

#lyric{
    position: fixed;
    left: 300px;
    top:52px;
    width: 920px;
    background-color:rgb(32,178,170,0.3);
    visibility: hidden;
    border:1px solid cornflowerblue;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    z-index: 1;
  }
  
  #lyric>div:nth-of-type(1){
    margin-top: 150px;
  }
  #lyric>div:nth-of-type(2){
    display: flex;align-items: center;
  }
  
  #star-img{
     width: 250px;
     height: 250px;
     border-radius: 250px;
     /* 元素旋转 */
     transition: all 4s;
  }

  #star-img:hover{
    /* 鼠标移到图像上，图像开始旋转，4s后旋转180度 */
    transform: rotate(360deg);
  }

  
/* 边缘（右下角）部分样式 */
aside{
    border-radius: 5px;
    position: fixed;
    right:3%;
    bottom: 40px;
    height:200px;
}

#ul-3>li{
    list-style: none;
    height: 40px;
   
}

/* 底部样式 */
footer{ 
    width: 100%;
    border-radius: 5px;
    position: fixed;
    bottom: 0; 
    z-index: 1;
}

#footer{
    height: 48px;
    border:2px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgb(122, 139, 139) ;
}


#footer>div:nth-of-type(1){
    display:flex;justify-content: space-around;
  }

  #play,#next-song{
    margin-left: 10px;
  }
  
  #prev-song,#play,#next-song,#btn{
    border:none;
    background-color: rgb(225, 225, 225,0);
  }
  #songText{
    border:1px solid white;
  }
  
  #songText img{
    width: 35px;
    height: 30px;
  }
  
  #bg-music{
    border-radius: 20px;
    background-color: white;
    width: 500px;
    height: 25px;
    margin-top: 5px;
  }



  .jdt{
    width: 500px;
    height: 18px;
    display: flex;
    justify-content: space-between;
  }
  
  #volJd{
    visibility: hidden;
    position: fixed;
    right: 18.5%;
    bottom: 3px;
    width: 120px;
    height: 5px;
    background-color: white;
  }

  #volColor{
    width: 10px;
    height: 5px;
    margin-left: -2px;
    border-radius: 10px;
    background-color: blue;
  }

  .jdt-left-time,.jdt-right-time{
    color:white;
  }

 
  #jdt-right{
    right:0;
  }

  .vol{
    margin-left: 10px;
  }

  #singer{
    text-align: center;
    color:white;
  }
  #sname{
    text-align: center;
    color:white;
  }

  .jdtbox{
    margin-top: 8px;
    border-radius: 50px;
    width:400px;
    height: 8px;
    background-color: white;
  }
  .jdt_color{
    border-radius: 50px;
    width: 0;
    height: 8px;
    background-color:powderblue;
  }

   #yinliang{
    margin-left: 20px;
  }
  #shoucang{
    border: hidden;
    background-color: rgb(122, 139, 139);
    color: white;
    font-size: 25px;
    margin-left: 20px;
  }

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

<head>
  <meta charset="UTF-8">
  <meta name="divport" content="width=device-width, initial-scale=1.0">
  <title>佩奇音乐</title>
  <link href="./img/logo.jfif" rel="icon" type="image/x-ico">
  <link rel="stylesheet" type="text/css" href="./css/music.player-public.css">
  <link type="text/css" rel="styleSheet" href="./css/music.recommendation.css">
  <script type="text/javascript" src="./jquery-3.5.1/jquery-3.5.1.js"></script>
  <script type="text/javascript" src="./jquery-3.5.1/jquery-3.5.1.js"></script>
  <style>
    main {
      background-image: url(./img/你的名字-背景图片.jfif);
      background-size: 100% 100%;
      height: 610px;
    }
    #changeBckG{
    position: fixed;
    right: 10px;
    top:40px;
    height: 65px;
    width:300px;
    border:1px solid white;
    display: none;
    }
    #BckG1,#BckG2,#BckG3{
    list-style: none;
    float: left;
    width:100px;
    height: 150px; 
    }
    #BckG1>img,#BckG2>img,#BckG3>img{
    width: 100px;
    }
  </style>
</head>

<body>

  <header>
    <ul class="ul">
      <li style="margin-top: -22px;">
        <h3 style="color: white;">佩奇音乐</h3>
      </li>
    </ul>
    <ul class="ul" id="ul-1">
      <li><a href="./Music-Recommendation.html">
          <div style="border-bottom:2px solid red ;color: white;">推荐</div>
        </a></li>
      <li><a href="./Music-Video.html">
          <div style="color: white;">视频</div>
        </a></li>
      <li><a href="./Music-Hall.html">
          <div style="color: white;">音乐馆</div>
        </a></li>
    </ul>

    <form id="form">
      <input id="input" type="" value="输入歌曲信息">
      <input type="submit" value="搜索" style="height: 26px; border-radius:0 20px 20px 0">
    </form>

    <ul class="ul" id="ul-2">
      <li><button id="open_Login" onclick=" open$Login()">登录</button></li>
      <li style="color: white;"><svg t="1638442669244" id="backgroundImage" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="3319" width="16" height="16">
          <path
            d="M919.6 319L746.4 120.8l-0.7-0.8c-15.9-17.3-38.9-25.3-61.7-21.5-23.3 3.9-43 19.6-52.7 42-19.6 45.1-64 72.1-118.8 72.1h-1.9c-55.2 0.8-98.5-25.1-118.9-71.4-9.8-22.3-29.6-37.8-52.8-41.7-22.7-3.8-45.7 4.3-61.6 21.5l-0.3 0.4L104.4 319C79 346.8 65.1 383.5 65.1 422.5c0 39.2 14.1 76.1 39.7 103.9l0.3 0.3c26.4 28.7 62.8 44.6 100.3 44.6 3 0 6.1-0.1 9.2-0.3v215.4c0 77.2 62.8 140 140 140h314c77.2 0 140-62.8 140-140V570.9c3.4 0.3 6.9 0.4 10.3 0.4 37.5 0 73.8-15.9 100.2-44.6l0.2-0.2c25.6-27.8 39.7-64.8 39.7-103.9-0.1-39.1-14-75.8-39.4-103.6z m-59.3 153.3l-0.2 0.2c-13.4 14.5-31.6 21.1-50 18.1-20.4-3.4-41.2 2.3-57 15.7-15.7 13.3-24.7 32.7-24.7 53.3v226.8c0 33.1-26.9 60-60 60h-314c-33.1 0-60-26.9-60-60V559.8c0-20.5-8.9-39.8-24.5-53.1-12.8-11-29-16.9-45.6-16.9-3.6 0-7.3 0.3-11 0.9-18.2 2.9-36.3-3.8-49.5-18.1l-0.3-0.3c-24.8-27-24.8-72.6 0-99.6l0.3-0.4 161.3-184.7c16 29.8 38.9 54.7 67.1 72.8 34.5 22 76.3 33.2 120.9 32.2h0.5c80.1-0.4 149.1-40.5 184-105.9l162 185.3 0.7 0.8c24.8 26.9 24.8 72.5 0 99.5z"
            p-id="3320" fill="#e6e6e6"></path>
        </svg></li>
    </ul>

    <!-- 登录信息输入页面，该页面隐藏起来了，只有在js点击事件执行以后才会出现-->
    <div class="Login">
      <div class="first">登录界面</div>
      <a href="JavaScript:;" class="close" onclick="closeLogin()">⛔</a>
      <div class="second">
        <span id="tips"></span>
        <label for="">用户名：</label>
        <input type="text" name="" id="uerName" value="" placeholder="请输入用户名">
      </div>
      <div class="second">
        <label for="">登录密码：</label>
        <input type="text" name="" id="passWord" value="" placeholder="请输入用户密码">
      </div>
      <div class="last"><input type="submit" value="登录" id="submit" onclick="identify()"></div>
    </div>

  </header>

  <main>
    <!-- 用于更换背景图片 -->
    <ul id="changeBckG">
      <li id="BckG1"><img src="./img/你的名字-背景图片.jfif"></li>
      <li id="BckG2"><img src="./img/海贼王-背景图片.jpg"></li>
      <li id="BckG3"><img src="./img/泰勒-背景图片.jfif"></li>
    </ul>

    <!-- 专辑歌词页面，该页面隐藏起来了，只有在js点击事件执行以后才会出现-->
    <article>
      <div id="lyric">
        <div><img id="star-img" src="img/贾斯汀.jpg">
          <div id="singer">Justin-Bieber</div>
          <div id="sname">stay</div>
        </div>
        <div>
          <iframe id="iframe" src="./音乐网站-歌词1.html" style="border:white ;height: 400px;">
          </iframe>
        </div>
      </div>
    </article>

    <!-- 喜欢的歌单页面，该页面隐藏起来了，只有在js点击事件执行以后才会出现 -->
    <ul id="favor">
      <!-- <li>危险派对-王以太/刘至佳</li>
        <li>别叫我达芬奇-Li Ghost小鬼</li>
        <li>stay-Justin-Bieber</li>
        <li>老男孩-筷子兄弟</li>
        <li>明年今日-陈奕迅</li>
        <li id="eason" onclick="Song_playing()">富士山下-陈奕迅</li>
        <li>一丝不挂-陈奕迅</li>
        <li>好久不见-陈奕迅</li>  -->
    </ul>




  </main>

  <aside>
    <!-- 右下角垂直列表部分，该部分用了绝对定位，相对于窗口定位 -->
    <ul id="ul-3">
      <li><a><svg t="1637825609788" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="10569" width="16" height="16">
            <path
              d="M917.297816 910.436548 785.408997 910.436548c-35.730783 0-64.798818-29.069059-64.798818-64.799842L720.610178 637.009132c0-35.728736 29.068036-64.794725 64.798818-64.794725l20.48966 0c0.704035 0 1.408069 0.039909 2.108011 0.118704 10.078543 1.089821 39.863916 0.74599 55.762001-13.728676 7.589862-6.91141 19.34765-6.362918 26.261107 1.230014 6.912433 7.590885 6.361895 19.348674-1.230014 26.261107-29.435403 26.802436-75.577303 24.036439-83.804684 23.297612l-19.587104 0c-15.229866 0-27.620058 12.388145-27.620058 27.615964l0 208.627575c0 15.230889 12.390191 27.621081 27.620058 27.621081l120.810506 0L906.21848 449.707258c0-89.938382-35.024701-174.49315-98.619088-238.08856-63.59541-63.59541-148.150178-98.619088-238.08856-98.619088L447.570595 112.99961c-89.936335 0-174.49008 35.023678-238.084467 98.619088-63.59541 63.59541-98.619088 148.150178-98.619088 238.08856l0 122.507148 114.261347 0c35.728736 0 64.795748 29.065989 64.795748 64.794725l0 208.627575c0 35.730783-29.067013 64.799842-64.795748 64.799842L93.236498 910.436548c-0.425695 0-0.851391-0.014326-1.27504-0.042979l-0.959861-0.065492c-9.749038-0.670266-17.314341-8.773827-17.314341-18.546402L73.687256 449.707258c0-50.466392 9.888208-99.432617 29.389354-145.539724 18.831904-44.524053 45.787836-84.507696 80.118735-118.838595S257.508865 124.042107 302.032918 105.20918c46.106084-19.50217 95.072309-29.389354 145.537677-29.389354l121.94126 0c50.466392 0 99.432617 9.888208 145.539724 29.389354 44.525076 18.831904 84.507696 45.787836 118.838595 80.118735 34.331923 34.3309 61.287855 74.314543 80.119759 118.838595 19.50217 46.107107 29.389354 95.073332 29.389354 145.539724l0 442.074418c0 10.203386-8.223289 18.499329-18.426675 18.58938l-7.511067 0.065492C917.40731 910.436548 917.352051 910.436548 917.297816 910.436548zM110.86704 873.257787l114.261347 0c15.22782 0 27.615964-12.390191 27.615964-27.621081L252.744351 637.009132c0-15.22782-12.388145-27.615964-27.615964-27.615964L110.86704 609.393167 110.86704 873.257787z"
              p-id="10570" fill="#1296db"></path>
          </svg></a></li>
      <li><a><svg t="1637825745192" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="12595" width="16" height="16">
            <path
              d="M352.456912 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C416.446162 860.586595 387.891819 832.032253 352.456912 832.032253L352.456912 832.032253z"
              p-id="12596" fill="#1296db"></path>
            <path
              d="M800.55367 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C864.54292 860.586595 835.816563 832.032253 800.55367 832.032253L800.55367 832.032253z"
              p-id="12597" fill="#1296db"></path>
            <path
              d="M864.026877 800.037628 344.200235 800.037628c-46.099782 0-86.695112-36.466991-92.199563-83.082815l-54.356459-382.043339L166.853687 156.360826c-1.892155-15.653284-16.169326-28.382328-29.930455-28.382328L95.983874 127.978498c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l40.767344 0c46.615824 0 87.727196 36.466991 93.403662 83.082815l30.790526 177.86259L315.473879 708.698135c1.720141 14.793214 15.309256 27.350244 28.726356 27.350244l519.826642 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S881.744331 800.037628 864.026877 800.037628z"
              p-id="12598" fill="#1296db"></path>
            <path
              d="M384.279523 672.05913c-16.685369 0-30.618512-12.729044-31.82261-29.586427-1.376113-17.545439 11.868974-33.026709 29.586427-34.230808l434.163615-31.994625c15.997312-0.172014 29.414413-12.55703 31.134554-26.834201l50.400134-288.295649c1.204099-10.664875-1.720141-22.533848-8.084663-29.758441-4.128339-4.644381-9.288762-7.052579-15.309256-7.052579L319.946246 224.3064c-17.717453 0-31.994625-14.277171-31.994625-31.994625S302.400806 159.973123 319.946246 159.973123l554.05745 0c24.426004 0 46.959852 10.148833 63.301193 28.554342 18.749538 21.157736 27.178229 50.744163 23.565933 81.706703l-50.400134 288.467663c-5.504452 44.895683-45.927768 81.362674-92.027549 81.362674l-431.755417 31.82261C385.82765 671.887116 384.967579 672.05913 384.279523 672.05913z"
              p-id="12599" fill="#1296db"></path>
          </svg></a></li>
      <li><a><svg t="1637825905730" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="13544" width="16" height="16">
            <path
              d="M783.04 268.48H240.928a32.768 32.768 0 0 0 0 65.312H783.04a32.768 32.768 0 0 0 0-65.312zM933.632 0H90.336A90.336 90.336 0 0 0 0 90.336v662.56a90.336 90.336 0 0 0 90.336 90.368H271.04v150.592a30.112 30.112 0 0 0 30.112 30.112c3.2 0 6.4 0 9.312-0.224a38.752 38.752 0 0 0 27.808-9.344l171.136-171.136h424.224A90.336 90.336 0 0 0 1024 752.896V90.336A90.336 90.336 0 0 0 933.632 0z m24.352 720a59.456 59.456 0 0 1-59.488 59.456H482.24a89.216 89.216 0 0 1-7.616 9.152l-141.024 142.048v-121.6a29.728 29.728 0 0 0-29.76-29.728H125.44a59.456 59.456 0 0 1-59.456-59.456V125.248A59.456 59.456 0 0 1 125.44 65.792h773.088a59.456 59.456 0 0 1 59.456 59.456V720z m-174.944-249.376H240.928a32.768 32.768 0 0 0 0 65.312H783.04a32.768 32.768 0 0 0 0-65.312z"
              p-id="13545" fill="#1296db"></path>
          </svg></a></li>
      <li><a><svg t="1638267816820" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="3241" width="16" height="16">
            <path
              d="M712.748735 934.900353C737.109501 934.900353 756.857769 954.661043 756.857769 979.419948L756.857769 979.419948C756.857769 1004.007452 736.780545 1023.939542 712.748735 1023.939542L533.849238 1023.939542C509.488472 1023.939542 489.740203 1004.178853 489.740203 979.419948L489.740203 979.419948C489.740203 954.832444 509.817427 934.900353 533.849238 934.900353L712.748735 934.900353ZM808.990215 333.262554 690.701652 214.973992 785.172232 120.547932C802.534873 103.096251 830.715777 103.096251 848.122938 120.503412L903.416274 175.841268C920.867955 193.24843 920.867955 221.429333 903.416274 238.791975L808.990215 333.262554ZM635.408316 270.267328 753.696878 388.60041 268.700416 873.507833 150.456373 755.26379 635.408316 270.267328ZM89.063853 934.989393 89.063853 819.772682 204.191524 934.900353 89.063853 934.989393ZM879.598291 26.077352C844.783968-8.692451 788.466682-8.692451 753.696878 26.077352 753.696878 26.077352 26.82546 752.904251 13.425062 766.349169 0.024664 779.794086 0.024664 801.34157 0.024664 801.34157L0.024664 979.419948C0.024664 1004.039284 19.924923 1023.939542 44.544258 1023.939542L222.622636 1023.939542C222.622636 1023.939542 242.522895 1025.675807 257.615037 1010.539144 272.70718 995.447002 997.886854 270.267328 997.886854 270.267328 1032.656657 235.497525 1032.656657 179.180238 997.886854 144.365915L879.598291 26.077352Z"
              p-id="3242" fill="#1296db"></path>
          </svg></a></li>
    </ul>
  </aside>

  <footer>

    <div id="footer">

      <!-- 歌曲切换按钮/播放按钮，绑定了点击事件  -->
      <div id="button">

        <button id="prev-song"><canvas id="myCanvas" width="40" height="40"></canvas>
        </button>

        <button id="play"><canvas id="myCanvas3" width="40" height="40"
            style="border:2.5px solid white;border-radius:40px;"></canvas>
        </button>

        <button id="next-song"><canvas id="myCanvas2" width="40" height="40"></canvas>
        </button>

      </div>

      <!-- 专辑页面控制，绑定了点击事件  -->
      <div id="song-text">
        <div id="songText" onclick="get_songText()"><img id="getSingerImg" src="./img/贾斯汀.jpg"></div>
      </div>

      <div id="play">
        <!-- 进度条 -->
        <div class="jdt">
          <span class="jdt-left-time" id="jdtLeft">00:00</span>
          <div class="jdtbox" id="gequJDBar">
            <div class="jdt_color" id="gequjd"></div>
          </div>
          <span class="jdt-right-time" id="jdtRight">00:00</span>
        </div>
      </div>

      <button id="shoucang">❤</button>
      <div id="yinliang"><svg t="1638267432856" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2312" width="32" height="32">
          <path
            d="M128 420.576v200.864h149.12l175.456 140.064V284.288l-169.792 136.288H128z m132.256-64l204.288-163.968a32 32 0 0 1 52.032 24.96v610.432a32 32 0 0 1-51.968 24.992l-209.92-167.552H96a32 32 0 0 1-32-32v-264.864a32 32 0 0 1 32-32h164.256zM670.784 720.128a32 32 0 0 1-44.832-45.664 214.08 214.08 0 0 0 64.32-153.312 213.92 213.92 0 0 0-55.776-144.448 32 32 0 1 1 47.36-43.04 277.92 277.92 0 0 1 72.416 187.488 278.08 278.08 0 0 1-83.488 198.976zM822.912 858.88a32 32 0 1 1-45.888-44.608A419.008 419.008 0 0 0 896 521.152c0-108.704-41.376-210.848-114.432-288.384a32 32 0 0 1 46.592-43.872c84.16 89.28 131.84 207.04 131.84 332.256 0 127.84-49.76 247.904-137.088 337.728z"
            p-id="2313" fill="#e6e6e6"></path>
        </svg></div>

      <div id="volJd">
        <div id="volColor"></div>
      </div>
      <!-- 收藏歌单控制按钮，绑定了点击事件 -->
      <div id="menu">
        <button id="btn"><canvas id="myCanvas4" width='30' height='30'></canvas></button></li>
      </div>


    </div>
    <!-- 音频播放控件 -->
    <audio id=bg-music>
      <source src="./audio/song1.mp3">
    </audio>
  </footer>
  <!-- Music-player-public.js脚本要放在首位，否则其它脚本不能共享它的代码(网页自上而下加载) -->
  <script type="text/javascript" src="./js/Music-player-public.js"></script>
  <script src="./js/canvas.js"></script>
  <script src="./js/login.js"></script>
  <script src="./js/lyris.js"></script>
  <script src="js/favorSong.js"></script>
  <script src="js/changeBackgroundImage.js"></script>
</body>

</html>

Music-player-public.js

{//获取标签
  //获取播放器控件audio
  let music = document.getElementById('bg-music');
  let singer = document.getElementById('singer');
  let sname = document.getElementById('sname');
  let musicpic = document.getElementById('star-img');
  let jdtLeft = document.getElementById('jdtLeft');
  let gequjd = document.getElementById('gequjd')
  let jdtRight = document.getElementById('jdtRight');
  let volJd = document.getElementById('volJd');
  let volColor = document.getElementById('volColor');
  let prev = document.getElementById('prev-song');
  let next = document.getElementById('next-song');
  let play = document.getElementById('play');
  let lyric = document.getElementById('iframe');
  let musicVolume = document.getElementById('yinliang');
  let singerImg = document.getElementById('getSingerImg');

  //歌曲信息
  const songs = [{
    mp3: "./audio/song1.mp3",
    singer: "Justin-Bieber",
    name: "stay",
    img: "./img/贾斯汀.jpg",
    lyric: "./音乐网站-歌词1.html",
  },
  {
    mp3: "./audio/song2.mp3",
    singer: "陈奕迅",
    name: "一丝不挂",
    img: "./img/Eason1.jpg",
    lyric: "./音乐网站-歌词2.html",
  },
  {
    mp3: "./audio/song3.mp3",
    singer: "陈奕迅",
    name: "富士山下",
    img: "./img/Eason4.jpg",
    lyric: "./音乐网站-歌词3.html"
  },
  {
    mp3: "./audio/song4.mp3",
    singer: "JVKE;Charlie Puth",
    name: "Upside Down",
    img: "./img/MV3-4.webp",
    lyric: "./音乐网站-歌词4.html"
  },
  {
    mp3: "./audio/song5.mp3",
    singer: "Chris James",
    name: "Not Angry",
    img: "./img/MV2-3.webp",
    lyric: "./音乐网站-歌词5.html"
  },
  {
    mp3: "./audio/song6.mp3",
    singer: "Taylor Swift",
    name: "Love Story",
    img: "./img/meimei.jfif",
    lyric: "./音乐网站-歌词6.html"
  },
  {
    mp3: "./audio/song7.mp3",
    singer: "杨千嬅",
    name: "可惜我不是水瓶座",
    img: "./img/杨千嬅.webp",
    lyric: "./音乐网站-歌词7.html"
  },
  {
    mp3: "./audio/song8.mp3",
    singer: "郭顶",
    name: "我们俩",
    img: "./img/guoding.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song9.mp3",
    singer: "单依纯",
    name: "永不失联的爱",
    img: "./img/shanyichun.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song10.mp3",
    singer: "陶喆",
    name: "Melody",
    img: "./img/taozhe.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song11.mp3",
    singer: "陶喆",
    name: "爱，很简单",
    img: "./img/taozhe.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song12.mp3",
    singer: "周杰伦",
    name: "轨迹",
    img: "./img/jay.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song13.mp3",
    singer: "周杰伦",
    name: "花海",
    img: "./img/jay.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song14.mp3",
    singer: "周杰伦",
    name: "蒲公英的约定",
    img: "./img/jay.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song15.mp3",
    singer: "周杰伦",
    name: "我是如此的相信",
    img: "./img/jay.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song16.mp3",
    singer: "周杰伦/梁心颐",
    name: "珊瑚海",
    img: "./img/jay.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song17.mp3",
    singer: "周杰伦/张惠妹",
    name: "不该",
    img: "./img/jay.jfif",
    lyric: ""
  },
  {
    mp3: "./audio/song18.mp3",
    singer: "陶喆",
    name: "就是爱你",
    img: "./img/taozhe.jfif",
    lyric: ""
  },];



  //切歌函数
  let changeMusic = function () {
    music.src = songs[index].mp3;
    musicpic.src = songs[index].img;
    singerImg.src = songs[index].img;
    lyric.src = songs[index].lyric;
    sname.innerHTML = songs[index].name;
    singer.innerHTML = songs[index].singer;
    // gequjd.style.width=0;//切歌时进度归零
    return index;
  };
  //默认加载第一首歌
  let index = 0;
  changeMusic(index);

  //canvas绘图
  let c3 = document.getElementById("myCanvas3");
  let cxt3 = c3.getContext("2d");
  //初始化播放按钮样式为播放状态
  cxt3.moveTo(15, 11);
  cxt3.lineTo(29, 20);
  cxt3.lineTo(15, 29);
  cxt3.lineTo(15, 11);
  cxt3.strokeStyle = 'rgb(255,255,255)';
  cxt3.stroke();
  cxt3.fillStyle = 'rgb(255,255,255)';
  cxt3.fill();
  //点击按钮会播放或者暂停歌曲，按钮图形也会做相应的改变
  play.addEventListener("click", function (event) {
    c3.width = c3.width;
    if (music.paused) {
      music.play();
      cxt3.lineWidth = 4;
      cxt3.moveTo(15, 11);
      cxt3.lineTo(15, 29);
      cxt3.moveTo(25, 11);
      cxt3.lineTo(25, 29);
      cxt3.strokeStyle = 'rgb(255,255,255)';
      cxt3.stroke();
    } else {
      music.pause();
      cxt3.moveTo(15, 11);
      cxt3.lineTo(29, 20);
      cxt3.lineTo(15, 29);
      cxt3.lineTo(15, 11);
      cxt3.strokeStyle = 'rgb(255,255,255)';
      cxt3.stroke();
      cxt3.fillStyle = 'rgb(255,255,255)';
      cxt3.fill();
    }
  });
  //切歌
  //上一首
  prev.addEventListener("click", function (event) {
    index--;
    if (index <= -1) {
      index = songs.length - 1;
    }
    changeMusic(index);
    //清除画布，重新绘制，当用户在点击播放按键之前点击了上一首
    //播放按钮绘制的图形也要做相应的改变
    c3.width = c3.width;
    music.play();
    cxt3.lineWidth = 4;
    cxt3.moveTo(15, 11);
    cxt3.lineTo(15, 29);
    cxt3.moveTo(25, 11);
    cxt3.lineTo(25, 29);
    cxt3.strokeStyle = 'rgb(255,255,255)';
    cxt3.stroke();
    changeFavorStyle();
  });
  //下一首
  next.addEventListener("click", function (event) {
    index++;
    if (index > songs.length - 1) {
      index = 0;
    }
    changeMusic(index);
    //清除画布，重新绘制，当用户在点击播放按键之前点击了下一首
    //播放按钮绘制的图形也要做相应的改变
    c3.width = c3.width;
    music.play();
    cxt3.lineWidth = 4;
    cxt3.moveTo(15, 11);
    cxt3.lineTo(15, 29);
    cxt3.moveTo(25, 11);
    cxt3.lineTo(25, 29);
    cxt3.strokeStyle = 'rgb(255,255,255)';
    cxt3.stroke();
    changeFavorStyle();
  });
  //当前播放的歌曲播放结束后，自动切换到下一首
  music.addEventListener('ended', function () {
    index++;
    if (index > songs.length - 1) {
      index = 0;
    }
    changeMusic(index);
    music.play();
    changeFavorStyle();
  });

  //转换时间
  function setTime(x, times) {
    if (times < 10) {
      x.innerHTML = "0:0" + Math.floor(times);
    } else if (times < 60) {
      x.innerHTML = "0:" + Math.floor(times);
    } else {
      let minute = parseInt(times / 60);
      let second = times - minute * 60;
      if (second < 10) {
        x.innerHTML = "0" + minute + ":" + "0" + parseInt(second);
      }
      else {
        x.innerHTML = "0" + minute + ":" + parseInt(second);
      }
    }
  }

  //歌曲事件
  //歌曲数据加载，显示总时长
  music.addEventListener("loadedmetadata", function (event) {
    let times = music.duration;
    setTime(jdtRight, times);
  });
  //时间更新事件，歌曲顺利播放的时候，更新进度条和当前播放的时间
  music.addEventListener("timeupdate", function (event) {
    let jd = music.currentTime / music.duration;//当前时间占总时长的百分比
    let bfb = jd * 100 + "%";//转化为百分数，方便后面进度条的宽度初始化(宽度一般可以用百分比表示)
    gequjd.style.width = bfb;
    let times = music.currentTime;
    setTime(jdtLeft, times);
  });

  //歌曲进度条拖动
  gequJDBar.addEventListener("click", function (event) {
    let x = event.offsetX;//获取鼠标所在位置
    let bfb = x / 400 * 100;//进度条设置的宽度为400px
    gequjd.style.width = bfb + "%";
    music.currentTime = music.duration * +bfb / 100;
  });
  //音量条显示隐藏控制按钮
  musicVolume.addEventListener("click", function () {
    if (volJd.style.visibility == 'hidden') {
      volJd.style.visibility = 'visible';
    } else {
      volJd.style.visibility = 'hidden';
    }
  })
  //音量条控制拖动
  volJd.addEventListener("click", function (event) {
    let x = event.offsetX;//获取音量当前的位置
    let bfb = x / 120 * 100;
    volColor.style.width = bfb + "%";
    music.volume = bfb / 100;//volume 在0.0到1.0间设置音量值,或查询当前音量值
  });



  //收藏按钮，点击按钮后按钮做相应颜色改变，歌单也会添加会移除歌曲
  let favor = document.getElementById('shoucang');
  favor.addEventListener('click', function () {
    if (favor.style.color == 'white') {
      favor.style.color = 'red';
      addSong();
    } else {
      favor.style.color = 'white';
      removeSong();
    }
  });

  //index初始化是值是0，通过当前的播放路径绑定对应的index值
  switch (changeMusic()) {
    case 0: music.src == './audio/song1.mp3';
      break;
    case 1: music.src == './audio/song2.mp3';
      break;
    case 2: music.src == './audio/song3.mp3';
      break;
    case 3: music.src == './audio/song4.mp3';
      break;
    case 4: music.src == './audio/song5.mp3';
      break;
    case 5: music.src == './audio/song6.mp3';
      break;
    case 6: music.src == './audio/song7.mp3';
      break;
    case 7: music.src == './audio/song8.mp3';
      break;
  }
  //首次点击收藏，当前播放的歌曲将会添加到歌单中
  function addSong() {
    let newSong = songs[index].name + "-" + songs[index].singer;
    let element = document.createElement('li');
    document.getElementById('favor').appendChild(element);
    element.innerHTML = newSong;
    //把添加进来的歌曲同时添加到歌单数组favorSongs=[]中
    favorSongs[favorSongs.length] = newSong;
  };
  //再次点击收藏,则会删掉添加的歌曲
  function removeSong() {
    let newSong = songs[index].name + "-" + songs[index].singer;
    //console.log(newSong);
    //console.log("index = " + index);
    //console.log(isExists(newSong));
    let songIndex = isExists(newSong);
    if (songIndex > -1) {
      favorSongs.splice(songIndex, 1);
      let favorElement = document.getElementById('favor');
      //console.log(favorElement.childNodes[songIndex]);
      favorElement.removeChild(favorElement.childNodes[songIndex]);
    }
  };
  //编写 判断当前播放歌曲是否存在于收藏列表
  function isExists(newSong) {
    // favorSongs
    for (let i = 0; i < favorSongs.length; i++) {
      if (favorSongs[i] == newSong) {
        //返回当前歌曲所在收藏列表的索引位置
        return i;
      }
    }
    //如果未找到 返回-1
    return -1;
  }

}

canvas.js

{//三个页面共用
       //用canvas绘制图形(上一首，下一首按键的图形)
       //上一首
       var c = document.getElementById("myCanvas");
       var cxt = c.getContext("2d");
       cxt.moveTo(15, 20);
       cxt.lineTo(29, 10);
       cxt.lineTo(29, 29);
       cxt.lineTo(15, 20);
       cxt.moveTo(15, 11);
       cxt.lineTo(15, 29);
       cxt.strokeStyle = 'rgb(255,255,255)';
       cxt.stroke();
       cxt.fillStyle = 'rgb(255,255,255)';
       cxt.fill();

       // 下一首
       var c2 = document.getElementById("myCanvas2");
       var cxt2 = c2.getContext("2d");
       cxt2.moveTo(15, 11);
       cxt2.lineTo(29, 20);
       cxt2.lineTo(15, 29);
       cxt2.lineTo(15, 11);
       cxt2.moveTo(29, 11);
       cxt2.lineTo(29, 29);
       cxt2.strokeStyle = 'rgb(255,255,255)';
       cxt2.stroke();
       cxt2.fillStyle = 'rgb(255,255,255)';
       cxt2.fill();


       // 歌单
       var c5 = document.getElementById("myCanvas4");
       var cxt5 = c5.getContext("2d");
       cxt5.moveTo(5, 10);
       cxt5.lineTo(20, 10);
       cxt5.moveTo(5, 15);
       cxt5.lineTo(17, 15);
       cxt5.moveTo(5, 20);
       cxt5.lineTo(15, 20);
       cxt5.strokeStyle = 'rgb(255,255,255)';
       cxt5.stroke();
       cxt5.beginPath();
       cxt5.arc(18, 23, 3, 0, Math.PI * 2, true);
       cxt5.closePath();
       cxt5.fillStyle = 'rgb(255,255,255)';
       cxt5.fill();
       cxt5.moveTo(18, 23);
       cxt5.lineTo(20, 15);
       cxt5.lineTo(25, 10);
       cxt5.strokeStyle = 'rgb(255,255,255)';
       cxt5.stroke();
}

login.js

//p1.右上角登录模块
{//jq中的css选择器
    ///右上角登录按钮样式(背景颜色)设置
    $(document).ready(function () {
        $("#open_Login").css("background-color", "royalblue");
    });
}
let openLogin = document.getElementById('open_Login');
let close = document.querySelector('.close');
let Login = document.querySelector('.Login');
let first = document.querySelector('.first');

//获取id属性对应的输入框，获取提示盒子
var uerName = document.getElementById('uerName');
var passWord = document.getElementById('passWord');
var submit = document.getElementById('sumit');
var tips = document.getElementById('tips');
var icon = document.getElementById('open_Login');
//右上角登录界面打开与关闭
function open$Login() {
    Login.style.display = 'block';
}
function closeLogin() {
    Login.style.display = 'none';
    tips.style.display = 'none';
    uerName.value = '';
    passWord.value = '';
}

//用于存储用户登录信息的数组
var userArr = [
    { name: "lwl", password: "123456" },
    { name: "lys", password: "123456" },
    { name: "zmf", password: "123456" },
    { name: "ljb", password: "123456" },
    { name: "lcl", password: "123456" }
];

//初始化旗帜的布尔值
var flag = false;
function identify() {
    //遍历数组
    for (var i = 0; i < userArr.length; i++) {
        //判断用户输入的信息和数组中的某一元素是否相匹配
        if (uerName.value == userArr[i]["name"] && passWord.value == userArr[i]["password"]) {
            j = i;
            //结果不唯一，先不输出，把旗帜的布尔值更换，跳出循环来输出有意义的结果
            flag = true;
        }
    }
    if (flag == true) {
        tips.innerHTML = '登录成功，欢迎' + uerName.value;
        tips.style.display = 'block';
        tips.style.marginLeft = -70 + 'px';
        //icon.style.borderRadius = '100px';
        //icon.style.backgroundImage = 'url(./img/Eason1.jpg)'
        flag = false;
    } else {
        tips.innerHTML = '用户名或密码输入错误，请重新输入!';
        tips.style.display = 'block';
        tips.style.marginLeft = -25 + 'px';
        //登录失败，清空输入框内容，让用户重新输入
        uerName.value = '';
        passWord.value = '';
    }
}

lyris.js

//歌词绑定点击事件，点击专辑图片将会显示歌词
var obj2 = document.getElementById("lyric");
let getLyric = document.getElementById('songText');
getLyric.addEventListener("click", function () {
    if (obj2.style.visibility == "hidden") {
        obj2.style.visibility = 'visible';
        obj2.style.height = 608 + 'px';
        obj2.style.transitionDuration = "2s"
    }
    else {
        obj2.style.visibility = 'hidden';
        obj2.style.height = 0 + 'px';
        obj2.style.transitionDuration = "2s";

    }
});

favorSong.js

//初始化收藏按钮样式
function changeFavorStyle() {
    let favor = document.getElementById('shoucang');
    favor.style.color = 'white';
}

let favorSongs = ["危险派对-王以太/刘至佳", "别叫我达芬奇-Li Ghost小鬼",
    "stay-Justin-Bieber", "老男孩-筷子兄弟", "明年今日-陈奕迅", "富士山下-陈奕迅",
    "一丝不挂-陈奕迅", "好久不见-陈奕迅"];
let ul = ``;
for (let x of favorSongs) {
    ul += `<li>${x}</li>`;
}
document.getElementById("favor").innerHTML = ul;

//jq中的id选择器
$("#favor").hide();
$(document).ready(function () {
    $("#btn").click(function () {
        if ($("#favor").is(":hidden")) {//判断favor的状态是否为hidden
            $("#favor").show();
        } else {
            $("#favor").hide();
        }

    });
});

changeBackgroundImage.js

var backgroundImage = document.getElementById('backgroundImage');
var changeBckG = document.getElementById('changeBckG');
var BckG1 = document.getElementById('BckG1');
var BckG2 = document.getElementById('BckG2');
var BckG3 = document.getElementById('BckG3');
var mainBackground = document.querySelector('main');
backgroundImage.addEventListener('click', function () {
    if (changeBckG.style.display == 'none') {
        changeBckG.style.display = 'block';
    } else {
        changeBckG.style.display = 'none'
    }
});

BckG1.addEventListener('click', function () {
    mainBackground.style.backgroundImage = 'url(./img/你的名字-背景图片.jfif)';
});

BckG2.addEventListener('click', function () {
    mainBackground.style.backgroundImage = 'url(./img/海贼王-背景图片.jpg)';
});

BckG3.addEventListener('click', function () {
    mainBackground.style.backgroundImage = 'url(./img/泰勒-背景图片.jfif)';
});