QQ音乐(完整版,js,jQuery)

最新推荐文章于 2023-01-03 09:52:35 发布

weixin_34378045

最新推荐文章于 2023-01-03 09:52:35 发布

阅读量1.7k

点赞数 1

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5c826d165188257dd816338d

版权

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script>
        (function () {
            function computedFont() {
                let winW = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = winW/750*100+"px";
            }
            computedFont();
            window.addEventListener("resize",computedFont)
        })();
    </script>
</head>
<body>
<div class="container">
    <audio src="img/myDream.m4a" preload="auto" id="music"></audio>
    <div class="imgBg"></div>
    <div class="bg"></div>
    <header class="header">
        <div class="content">
            <img src="./img/myDream.jpg" alt="">
            <h3>
                <span>我的梦</span>
                <span>张靓颖</span>
            </h3>
        </div>
        <a href="javascript:;" id="musicBtn"></a>
    </header>
    <main class="main">
        <div class="wrapper">
            <p>我爱你，王志超</p>
            <p>我爱你，王志超</p>
            <p>我爱你，王志超</p>
            <p>我爱你，王志超</p>
            <p>我爱你，王志超</p>
            <p>我爱你，王志超</p>
            <p>我爱你，王志超</p>
            <p>我爱你，王志超</p>
            <p>我爱你，王志超</p>
        </div>
    </main>
    <footer class="footer">
        <div class="progress">
            <span id="start">00:00</span>
            <span id="end">00:00</span>
            <div class="line">
                <div class="lineBg"></div>
            </div>
        </div>
        <a href="javascript:;" id="down">下载这首歌曲</a>
    </footer>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
复制代码

css

html{
    font-size: 100px;
}
html,body{
    height:100%;
}
.container{
    height:100%;
    position: relative;
    width:100%;
}
.container .imgBg,.container .bg{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: -2;
}
.container .imgBg{
    background: url("../img/myDream.jpg") no-repeat;
    background-size:cover;
    filter: blur(7px);
}
.container .bg{
    background: rgba(0,0,0,0.2);
}
.header{
    padding:0.3rem;
    background:rgba(0,0,0,0.3);
    position: relative;
}
.header .content img{
    width:1.2rem;
    height:1.2rem;
}
.header .content h3{
    display: inline-block;
    vertical-align: top;
}
.header .content h3 span{
    color:white;
    display: block;
    height:0.6rem;
    line-height: 0.6rem;
}
.header .content h3 span:nth-child(1){
    font-size: 0.45rem;
}
.header  #musicBtn{
    position: absolute;
    display: block;
    width:.6rem;
    height:0.6rem;
    right:0.3rem;
    background: url("../img/music.svg") no-repeat;
    background-size:100% 100%;
    top:50%;
    margin-top: -0.3rem;
}
.header  #musicBtn.select{
    animation: move 2s  linear 0s infinite;
}
@keyframes move {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
.main{
    padding:0.3rem;
    width:100%;
    height:7rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.main .wrapper{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    transition:all 0.3s linear;
}
.main .wrapper p{
    height:0.84rem;
    line-height: 0.84rem;
    text-align: center;
    font-size: 0.4rem;
    color:rgba(255,255,255,0.6);
    letter-spacing: 0.04rem;
}
.main .wrapper p.select{
    color:#31C27C;
}
.footer{
    width:100%;
    position: relative;
}
.footer .progress{
    margin-top: 0.6rem;
    position: relative;
    width:100%;
    height:1rem;
    overflow: hidden;
}
.footer .progress .line{
    width:65%;
    height:0.04rem;
    background: rgba(255,255,255,0.3);
    margin:0.15rem auto;
}
.footer .progress .lineBg{
    width:0;
    height:0.04rem;
    background:#31C27C;
}
.footer .progress span{
    position: absolute;
    color:white;
}
.footer .progress span:nth-child(1){
    left:0.4rem;
}
.footer .progress span:nth-child(2){
    right:0.4rem;
}
.footer #down{
    display: block;
    margin: auto;
    text-align: center;
    line-height: 1rem;
    font-size: 0.4rem;
    width:60%;
    height:1rem;
    border-radius: 0.5rem;
    background: url(../img/sprite_play.png) .2rem -5.86rem no-repeat #31C27C ;
    color:white;
    background-size: 0.8rem 7rem;
}
复制代码

js

let  music = $("#music");// 音乐的audio
let  musicBtn = $("#musicBtn");
let main = $(".main");
let wrapper = $(".wrapper");
let header = $(".header");
let footer = $(".footer");
let timer;
// 1. 让当前页面的main自适应；
//  1) : 获取屏幕的可视窗口的总高度；
//  2) ： 总高度-header的高度-footer的高度
function computedMain() {
    // px;
    let winH= document.documentElement.clientHeight;
    let  headerH = header[0].offsetHeight;
    let footerH = footer[0].offsetHeight;
    console.log(headerH,footerH);
    let val = parseFloat(document.documentElement.style.fontSize);// 转数字；
    let curH = (winH-headerH-footerH)/val-0.6+"rem";
    main.css("height",curH);
}
computedMain();
// 当页面的窗口大小发生改变时，会触发这个方法；
window.addEventListener("resize",computedMain);

// 2. 请求数据；
$.ajax({
    url:"json/lyric.json",
    type:"get",
    async:false,
    success:function (data) {
        bindHtml(data.lyric)
    }
})
 // 3.绑定数据
function bindHtml(data) {
    data = data.replace(/&#(\d+);/g,function (res,a) {
        //console.log(res);
        // 第一个参数： 代表大正则捕获的内容；
        // 第二个参数： 代表小正则捕获的内容；
        //console.log(a);
        switch (a){
            case "32":
                return " ";
            case "40":
                return "(";
            case "41":
                return ")";
            case "45":
                return "-"
        }
        return res;// 如果a不是特殊的值；直接返回捕获的内容即可；
    });
    let ary =[];// 把获取到的值统一放到数组中；
    data.replace(/\[(\d+)&#58;(\d+)&#46;(?:\d+)\]([^&#]+)(?:&#10;)?/g,function(res,min,sec,val){
        // 将捕获的数据（分钟，秒，歌词）
       ary.push({
           min:min,
           sec:sec,
           val:val
       });
    });
    // 循环拼接数据；
    let  str = ``;
    for(let i=0;i<ary.length;i++){
        let cur = ary[i];
        str+=`<p data-min="${cur.min}" data-sec="${cur.sec}" >${cur.val}</p>`;
    }
    wrapper.html(str);
    // 播放音乐
    music[0].play();
    musicBtn.addClass("select");
    timer = setInterval(computedTime,1000);
}
// 点击btn可以暂停音乐
// tap : zepto的绑定点击事件的方法；
musicBtn.tap(function () {
    // 如果音乐暂停，执行播放；
    if(music[0].paused){
        music[0].play();
        musicBtn.addClass("select");
        timer = setInterval(computedTime,1000)
        return;
    }
    // 暂停音乐；
    music[0].pause();
    musicBtn.removeClass("select");
    clearInterval(timer);
});
let  curT = 0;
let flag = 0;
//  计算滚动条
function computedTime() {
    // 获取当前音乐的播放了多长时间和总时间；时间是秒数；
    let current = Math.floor(music[0].currentTime);
    let duration = Math.floor(music[0].duration);

    let cur =formatTime(current);
    let dur = formatTime(duration);
    $("#start").html(cur);
    $("#end").html(dur);
    if(current>=duration){
        // 当时间满足之后；清定时器；
        clearInterval(timer);
        musicBtn.removeClass("select");
        return;
    }
    let  a = cur.split(":");
    let min = a[0];
    let sec = a[1];
    // 计算滚动条的位置
    $(".lineBg").css("width",current/duration*100+"%");
    // 获取所有的p标签；然后遍历其中和当前时间相同的那个P标签；
    let allP = document.getElementsByTagName("p");
    for(let i=0;i<allP.length;i++){
        let curP = allP[i];
        let minP = curP.getAttribute("data-min");
        let secP = curP.getAttribute("data-sec");
        if(min===minP && sec===secP){
            $(curP).addClass("select").siblings().removeClass("select");
            flag++;
            if(flag>5){
                curT-=0.84;// 一个行高是0.84rem;
                wrapper.css("top",curT+"rem");
            }

        }
    }
}
// 格式化时间
function formatTime(time){
    let  min = Math.floor(time/60);
    let sec = time-min*60;
    //如果计算出结果小于10;则补0；
    min = min <10?"0"+min:min;
    sec = sec<10?"0"+sec:sec;
    return min+":"+sec;
}
复制代码

转载于:https://juejin.im/post/5c826d165188257dd816338d

weixin_34378045

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
QQ音乐(完整版,js,jQuery)

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫