模拟播放器倒计时效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟视频播放</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../css/aui.2.0.css">
    <link rel="stylesheet" href="../css/api.css">
    <style>
        html,body{
            background-color: #000;
            width: 100%;
            height: 100%;
        }
        header img{
            position: absolute;
            width: 1.5rem;
            height: 1.5rem;
            left: 1rem;
            top: 1rem;
        }
        #play{
            width: 3rem;
            height: 3rem;
            background: url(../image/message/news_start_ico.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -1.5rem 0 0 -1.5rem;
        }
        footer{
            width: 100%;
            height: 3rem;
            position: fixed;
            bottom: 0;
            left: 0;
        }
        #foot-left{
            width: 3rem;
            height: 3rem;
            float: left;
            position: relative;
            z-index: 100;
        }
        #foot-left img{
            width: 1.5rem;
            height: 1.5rem;
            margin: 0.75rem;
        }
        #foot-right{
            width: 100%;
            height: 3rem;
            line-height: 3rem;
            padding-left: 3rem;
            padding-right: 0.5rem;
            position: relative;
            z-index: -1;
            -webkit-overflow-scrolling: touch;
        }
        #foot-right .time-a,.time-c{
            height: 3rem;
            width: 20%;
            text-align: center;
            line-height: 3rem;
            color: #fff;
        }
        #foot-right .time-a,.time-b{
            float: left;
        }
        #foot-right .time-c{
            float: right;
        }
        #foot-right .time-b{
            width: 60%;
            height: 3rem;
        }
        #progress{
            width: 100%;
            height: 0.25rem;
            margin-top: 1.35rem;
            background-color: #69594f;
        }
        #progress .aui-progress-bar{
            background-color: #fff;
        }
    </style>
</head>
<body>
<header><img src="../image/message/video_off_ico.png" alt=""></header>
<div id="play"></div>
<footer>
    <div id="foot-left">
        <img src="../image/message/news_goon_ico.png" alt="" id="play_switch">
    </div>
    <div id="foot-right">
        <div class="time-a" id="start-time">00:00</div>
        <div class="time-b">
            <div class="aui-progress aui-progress-xxs" id="progress">
                <div class="aui-progress-bar" id="slider"></div>
            </div>
        </div>
        <div class="time-c" id="total-time">00:00</div>
    </div>
</footer>

<script type="text/javascript" src="../script/jquery.min.js"></script>

<script>

    !function (d) {
        var runs = false;

        var video_time = 5;
        if (video_time >= 10) {
            document.querySelector('#total-time').innerText = '00:'+video_time;
        } else {
            document.querySelector('#total-time').innerText = '00:0'+video_time;
        }
        d.querySelector('#play').onclick=function () {
            runs = !runs;
            run('slider',video_time);
        }

        d.querySelector('#play_switch').onclick=function () {
            runs = !runs;
            run('slider',video_time);
        }


        var settime,playtime=0;
        function run(id,time) {
            var i = 0,start;
            if(runs){
                dealswitch('start');
                settime = setInterval(function () {
                        start = parseInt((playtime+1)*time/100);
                        if (start >= 10) {
                            document.querySelector('#start-time').innerText = '00:'+start;
                        } else {
                            document.querySelector('#start-time').innerText = '00:0'+start;
                        }

                        if(playtime != 0){
                            document.querySelector('#'+id).style.width = (playtime++)+'%';
                        } else {
                            document.querySelector('#'+id).style.width = (i++)+'%';
                            playtime = i;
                        }
                        if (playtime == 100) {
                            playtime = 0;
                            runs =  !runs;
                            dealswitch('stop');
                            clearInterval(settime);
                        }
                    },time*10);
            }else{
                clearInterval(settime);
                dealswitch('stop');
            }

        }

        function dealswitch(operation) {
            if (operation == 'stop') {
                $("#play").show();
                $("#play_switch").attr('src','../image/message/news_goon_ico.png');
            } else {
                $("#play").hide();
                $("#play_switch").attr('src','../image/message/news_stop_ico.png');
            }
        }
    }(document);

</script>

</body>
</html>

值得好好参谋。

posted @ 2017-07-14 21:34  TBHacker  阅读(447)  评论(1)  编辑  收藏  举报