珠峰培训，专注前端

    练习rem响应式布局；

    • HTML代码
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <link rel="stylesheet" href="css/reset.min.css">
    7.     <link rel="stylesheet" href="css/index.css">
    9.     <script>
    10.         ;(function (designWidth) {
    11.             function computedFont() {
    12.                 let winW = document.documentElement.clientWidth || document.body.clientWidth;
    13.                 document.documentElement.style.fontSize = winW / designWidth * 100 + 'px';
    14.             }
    15.             computedFont();
    16.             window.addEventListener('resize', computedFont);
    17.             window.addEventListener('orientationchange', computedFont);
    18.         })(750);
    19.     </script>
    20.     <title>Title</title>
    21. </head>
    22. <body>
    23. <section class="container">
    24.     <audio src="img/myDream.m4a"
    25.            preload="none"
    26.            id="musicAudio"></audio>
    27.     <div class="backgroundImg"></div>
    28.     <div class="bg"></div>
    29.     <header class="header">
    30.         <div class="content">
    31.             <img src="img/myDream.jpg" alt="">
    32.             <div class="song">
    33.                 <p>我的梦</p>
    34.                 <p>张靓颖</p>
    35.             </div>
    36.             <a href="javascript:;" id="musicBtn"></a>
    37.         </div>
    38.     </header>
    39.     <main class="main">
    40.         <div class="wrapper">
    41.             <p>我的未来不是梦</p>
    42.                      <p>我的未来不是梦</p>
    43.                      <p>我的未来不是梦</p>
    44.                      <p>我的未来不是梦</p>
    45.                      <p>我的未来不是梦</p>
    46.                      <p>我的未来不是梦</p>
    47.                      <p>我的未来不是梦</p>
    48.                      <p>我的未来不是梦</p>
    49.                      <p>我的未来不是梦</p>
    50.                      <p>我的未来不是梦</p>
    51.                      <p>我的未来不是梦</p>
    52.         </div>
    53.     </main>
    54.     <footer class="footer">
    55.         <div class="progress">
    56.             <span id="current">00:00</span>
    57.             <span id="duration">00:00</span>
    58.             <div class="probg">
    59.                 <div class="already"></div>
    60.             </div>
    61.         </div>
    62.         <a href="javascript:;" id="down">下载这首音乐</a>
    63.     </footer>
    64. </section>
    65. <script src="js/zepto.min.js"></script>
    66. <script src="js/index.js"></script>
    67. </body>
    68. </html>
    • CSS代码
    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4. }
    5. html {
    6.     font-size: 100px;
    7.     height: 100%;
    8. }
    9. body {
    10.     height: 100%;
    11. }
    12. .container {
    13.     height: 100%;
    14.     position: relative;
    15. }
    16. .backgroundImg, .bg {
    17.     position: absolute;
    18.     left: 0;
    19.     top: 0;
    20.     width: 100%;
    21.     height: 100%;
    22.     z-index: -2;
    23. }
    25. .backgroundImg {
    26.     background: url("../img/myDream.jpg") no-repeat;
    27.     background-size: cover;
    28.     filter: blur(7px);/*让盒子有一个模糊度*/
    29.     -webkit-filter: blur(7px);
    30. }
    32. .bg {
    33.     background: rgba(0, 0, 0, .2);
    34. }
    36. .header {
    37.     position: relative;
    38.     padding: .3rem;
    39.     background: rgba(0, 0, 0, .3);
    40. }
    41. .header .content img {
    42.     width: 1.2rem;
    43.     height: 1.2rem
    44. }
    45. .header .content .song {
    46.     display: inline-block;
    47.     color: white;
    48.     vertical-align: top;
    49. }
    50. .header .content .song p {
    51.     height: .6rem;
    52. }
    53. .header .content .song p:nth-child(1) {
    54.     font-size: .45rem;
    55. }
    57. .header #musicBtn {
    58.     display: block;
    59.     width: .6rem;
    60.     height: .6rem;
    61.     background: url("../img/music.svg") no-repeat;
    62.     background-size: 100% 100%;
    63.     position: absolute;
    64.     right: .3rem;
    65.     top: 50%;
    66.     margin-top: -.3rem;
    67. }
    69. .header #musicBtn.select {
    70.     animation: move 1s linear 0s infinite;
    71. }
    72. @keyframes move {
    73.     from {
    74.         transform: rotate(0deg);
    75.     }
    76.     to {
    77.         transform: rotate(360deg);
    78.     }
    79. }
    81. .main {
    82.     padding: .3rem;
    83.     height: 5rem;
    84.     position: relative;
    85.     overflow: hidden;
    86. }
    88. .main .wrapper {
    89.     position: absolute;
    90.     top: 0;
    91.     left: 0;
    92.     width: 100%;
    93.     transition: all .3s linear 0s;
    94. }
    96. .main .wrapper p {
    97.     height: .84rem;
    98.     line-height: .84rem;
    99.     text-align: center;
    100.     color: rgba(255, 255, 255, .5);
    101.     letter-spacing: .04rem;
    102.     font-size: .4rem;
    103. }
    105. .main .wrapper p.select {
    106.     color: #31C27C;
    107. }
    109. .progress {
    110.     width: 100%;
    111.     height: .8rem;
    112.     position: relative;
    113.     overflow: hidden;
    114. }
    115. .progress span {
    116.     position: absolute;
    117.     color: #fff;
    118. }
    120. .progress span:nth-child(1) {
    121.     left: .3rem;
    122. }
    123. .progress span:nth-child(2) {
    124.     right: .3rem;
    125. }
    126. .progress .probg {
    127.     width: 65%;
    128.     margin: .15rem auto;
    129.     background: rgba(255, 255, 255, .3);
    130.     height: .04rem;
    131. }
    133. .progress .probg .already {
    134.     height: .04rem;
    135.     background: #31C27C;
    136.     width: 45%;
    137. }
    139. .footer #down {
    140.     display: block;
    141.     border-radius: .5rem;
    142.     width: 60%;
    143.     margin: auto;
    144.     height: 1rem;
    145.     line-height: 1rem;
    146.     text-align: center;
    147.     font-size: .4rem;
    148.     color: #fff;
    149.     background: url("../img/sprite_play.png") .2rem -5.86rem no-repeat #31C27C;
    150.     /*设置雪碧图的大小*/
    151.     background-size: .8rem 7rem;
    152. }
    • JS代码
    1. // 1. 获取元素
    2. let $main = $('.main');
    3. let $header = $('.header');
    4. let $footer = $('.footer');
    5. let musicAudio = document.querySelector('#musicAudio');
    6. let $musicBtn = $('#musicBtn');
    7. let $wrapper = $('.wrapper');
    9. let autoTimer = null;
    11. // 2. 计算当前内容区域的高度
    12. // 用屏幕的高度 - header的高度 - footer的高度 - 0.6rem
    14. function computeMain() {
    15.     // px
    16.     let winH = document.documentElement.clientHeight;
    17.     let headerH = $header[0].offsetHeight;
    18.     let footerH = $footer[0].offsetHeight;
    20.     // 获取当前最新的fontSize
    21.     let fontSize = parseFloat(document.documentElement.style.fontSize);
    23.     // 用屏幕的高度 - header高度 - footer高度 - .6 rem;
    24.     let curMainH = (winH - headerH - footerH) / fontSize - 0.9 + 'rem';
    25.     $main.css({
    26.         height: curMainH
    27.     });
    28. }
    30. computeMain();
    32. // 3. 请求数据
    33. $.ajax({
    34.     url: 'json/lyric.json',
    35.     type: 'GET',
    36.     async: false,
    37.     success({lyric}) {
    38.         bindHTML(lyric)
    39.     }
    40. });
    42. // 4. 绑定数据
    43. function bindHTML(data) {
    44.     // 1. 解决标题符号（歌曲名-歌手）
    45.     let d1 = data.replace(/&#(\d+);/g, (res, a) => {
    46.         switch (parseFloat(a)) {
    47.             case 32:
    48.                 return " ";
    49.             case 40:
    50.                 return '(';
    51.             case 41:
    52.                 return ')';
    53.             case 45:
    54.                 return '-';
    55.         }
    56.         // 如果捕获的不是以上这些数字要把捕获的内容返回，否则会把捕获的内容变成 undefined
    57.         return res;
    58.     });
    60.     let ary = [];
    61.     d1.replace(/\[(\d+)&#58;(\d+)&#46;(?:\d+)\]([^&#]+)(?:&#10;)/g, (res, min, sec, val) => {
    62.         ary.push({
    63.             minute: min,
    64.             second: sec,
    65.             value: val
    66.         })
    67.     });
    68.     console.log(ary);
    70.     // 循环绑定数据
    71.     let str = ``;
    72.     ary.forEach(({minute, second, value}) => {
    73.         str += `<p data-min="${minute}" data-sec="${second}">${value}</p>`;
    74.     });
    75.     $wrapper.html(str);
    77.     // 歌词就绪后播放音乐
    78.     musicAudio.play();
    80.     // 让音乐控制按钮转起来
    81.     $musicBtn.addClass('select');
    83.     // 计算播放时间、跟新进度条、变更选中歌词
    84.     autoTimer = setInterval(computedTime, 1000);
    85.     // musicAudio.ontimeupdate = computedTime;
    86. }
    88. // 5. 给音符按钮绑定触摸事件，如果当前正在播放，轻触按钮则暂停播放；如果当前处于暂停状态，轻触按钮则恢复播放；
    90. $musicBtn.tap(function () {
    91.     //
    92.     if (musicAudio.paused) {
    93.         musicAudio.play();
    94.         $musicBtn.addClass('select');
    95.         // 重新绑定时器
    96.         autoTimer = setInterval(computedTime, 1000);
    97.     } else {
    98.         musicAudio.pause();
    99.         clearInterval(autoTimer);
    100.         $musicBtn.removeClass('select');
    101.     }
    102. });
    104. // 6. 根据播放时间更新高亮的歌词，并且跟新进度条
    105. let curTop = 0;
    106. let step = 0;
    107. function computedTime() {
    108.     // 在audio元素上会有一个currentTime表示当前播放进度，duration表示音频总时长；
    109.     let {currentTime, duration} = musicAudio;
    110.     let curTime = formatTime(currentTime);
    111.     let durTime = formatTime(duration);
    113.     $('#current').html(curTime);
    114.     $('#duration').html(durTime);
    116.     // 如果当前时间大于等于总时间，清除定时器
    117.     if (currentTime >= duration) {
    118.         clearInterval(autoTimer);
    119.         $musicBtn.removeClass('select');
    120.     }
    122.     // 设置进度条
    123.     $('.already').css({
    124.         width: (currentTime / duration) * 100 + '%'
    125.     });
    127.     // 设置高亮的歌词
    128.     let min = curTime.split(':')[0];
    129.     let sec = curTime.split(':')[1];
    131.     let highLightItem = $wrapper.find('p').filter(`[data-min="${min}"]`).filter(`[data-sec="${sec}"]`);
    132.     if (highLightItem.length) {
    133.         step++;
    134.         highLightItem.addClass('select').siblings().removeClass('select');
    135.         if (step > 4) {
    136.             curTop -= .84;
    137.             $('.wrapper').css('top', `${curTop}rem`);
    138.         }
    139.     }
    140. }
    142. function formatTime(time) {
    143.     let min = Math.floor(time / 60);
    144.     let sec = Math.round(time - min * 60);
    145.     min < 10 && (min = '0' + min);
    146.     sec < 10 && (sec = '0' + sec);
    147.     return `${min}:${sec}`;
    148. }

    ``` 【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】