master

分支 (1)

管理

管理

master

miu_vue
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>miu</title>
    <style>
    /*进度条样式*/

    .progressBar {
        width: 100%;
        height: 2px;
    }

    .progressBar div {
        position: absolute;
    }

    .progressBar .progressBac {
        width: 100%;
        height: 2px;
        background: rgba(56, 64, 63, 0.5);
    }

    .progressBar .speed {
        width: 100%;
        height: 2px;
        left: -100%;
        background: linear-gradient(to right, rgb(240, 220, 64), rgb(140, 170, 64));
    }

    .progressBar .drag {
        position: absolute;
        left: -8px;
        top: -14px;
        margin: 10px 10px 10px 0;
        width: 20px;
        height: 25px;
        border-radius: 5px;
    }
    </style>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <audio src="" id="mainAudio">
        你的浏览器不支持播放器
    </audio>
    <div style="position: fixed;bottom: 5px;z-index: 10;width: 100%;">
        <div id="time" style="color: rgba(255,255,255,0.8);">
            <div class="tiemDetail">
                <span class="currentTime" id="currentTime">00:00</span>/
                <span class="allTime" id="allTime">00:00</span>
            </div>
        </div>
        <section class="progressBar">
            <div class="progressBac"></div>
            <div class="speed" id="speed"></div>
            <img src="data:image/png;base64,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" style="z-index: -9;" class="drag" id="drag"/>
        </section>
    </div>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
    var audio = document.getElementById("mainAudio");
    // var ROOT = '/';
    var ROOT = 'http://flippancy.ngrok.cc//';

    function timeChange(time, timePlace) { //默认获取的时间是时间戳改成我们常见的时间格式
        var timePlace = document.getElementById(timePlace);
        //分钟
        var minute = time / 60;
        var minutes = parseInt(minute);
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        //秒
        var second = time % 60;
        seconds = parseInt(second);
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        var allTime = "" + minutes + "" + ":" + "" + seconds + "";
        timePlace.innerHTML = allTime;
    }

    //播放事件监听
    function playCotrol() {
        audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
            function() {
                addListenTouch(); //歌曲加载之后才可以拖动进度条
                var allTime = audio.duration;
                timeChange(allTime, "allTime");
                setInterval(function() {
                    var currentTime = audio.currentTime;
                    timeChange(currentTime, "currentTime")
                }, 1000);
            }, false);
        audio.addEventListener("play",
            function() {
                dragMove();
            }, false);
        audio.addEventListener("ended", function() {}, false)
    }

    var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离  //设一个全局变量记录上一次内部块滑动的位置

    //1拖动监听touch事件
    function addListenTouch() {
        document.getElementById("time").addEventListener("touchstart", touchStart, false);
        document.getElementById("time").addEventListener("touchmove", touchMove, false);
        document.getElementById("time").addEventListener("touchend", touchEnd, false);
        var drag = document.getElementById("drag");
        var speed = document.getElementById("speed");
    }

    //touchstart,touchmove,touchend事件函数
    function touchStart(e) {
        e.preventDefault();
        var touch = e.touches[0];
        startX = touch.pageX;
        x = 0;
    }

    function touchMove(e) { //滑动
        e.preventDefault();
        var touch = e.touches[0];
        x = touch.pageX - startX; //滑动的距离
        //drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式
        drag.style.left = aboveX + x - 8 + "px"; //
        speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px";
    }

    function touchEnd(e) { //手指离开屏幕
        e.preventDefault();
        if (x != 0) {
            aboveX = parseInt(drag.style.left);
            var touch = e.touches[0];
            var dragPaddingLeft = drag.style.left;
            var change = dragPaddingLeft.replace("px", "");
            numDragpaddingLeft = parseInt(change);
            var currentTime = (numDragpaddingLeft / (window.innerWidth)) * audio.duration;
            audio.currentTime = currentTime;
        } else {
            var currentTime = (e.changedTouches[0].pageX / (window.innerWidth)) * audio.duration;
            audio.currentTime = currentTime;
        }
    }
    //拖动的滑动条前进
    function dragMove() {
        setInterval(function() {
            drag.style.left = ((audio.currentTime / audio.duration) * (window.innerWidth) - 8) + "px";
            speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth)) + "px";
        }, 500);
    }

    Date.prototype.format = function(format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(), //day
            "h+": this.getHours(), //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
            "S": this.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(format))
                format = format.replace(RegExp.$1,
                    RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    }

    function GetDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1; //获取当前月份的日期
        var d = dd.getDate();
        if (m < 10) {
            m = '0' + m.toString();
        } else {
            m = m.toString();
        }
        if (d < 10) {
            d = '0' + d.toString();
        } else {
            d = d.toString();
        }
        var date = new Object();
        date.ny = y.toString() + '-' + m;
        date.r = d.toString();
        return date;
    }
    </script>
</body>

</html>