使用链式 setTimeout() 模拟播放器

最新推荐文章于 2021-12-15 10:28:29 发布

i'm_zhangting

最新推荐文章于 2021-12-15 10:28:29 发布

阅读量190

点赞数

分类专栏： mini case JavaScript

本文链接：https://blog.csdn.net/weixin_42549581/article/details/114601744

版权

JavaScript 同时被 2 个专栏收录

41 篇文章 2 订阅

订阅专栏

mini case

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BIM施工模拟</title>
    <style>
        .progress-bar {
            width: 0;
            height: 20px;
            background-color: springgreen;
        }
        .btn-play {
            display: inline-block;
            width: 30px;
            height: 30px;
            color: tomato;
            background: transparent url('./icon-play.svg') no-repeat center center;

        }
        .btn-play.active {
            background-image: url('./icon-pause.svg');
        }
        .btn-stop {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: transparent url('./icon-stop.svg') no-repeat center center;
        }
    </style>
</head>
<body>
    <div style="background-color:teal">
        <div class="progress-bar" id="progress-bar"></div>
        <div>
            <a class="btn-play" href="javascript:0;"></a>
            <a class="btn-stop" href="javascript:0;"></a>
        </div>
    </div>    
<script>

var iTotalTime = 60; // 总时间/秒
var iTotalFrames = 1200; // BIM部件总帧数
var iCurFrame = 0; // 已播放帧
var isPlay = ""; // 是否播放
var btnPlay = document.getElementsByClassName('btn-play')[0];
var btnStop = document.getElementsByClassName('btn-stop')[0];
var progressbar = document.getElementById('progress-bar');
btnPlay.onclick = function(){
    btnPlay.classList.toggle('active');
    if(this.className.indexOf('active') > -1){
        isPlay = true;
        setTimeout(function(){
            if(iCurFrame == iTotalFrames){
                btnPlay.classList.remove('active');
            }
            else{  
                if(isPlay){ 
                    iCurFrame++;
                    progressbar.style.width = iCurFrame / iTotalFrames * 100 + '%'; // 直接使用会导致闪烁                    
                    /** 其它处理事件
                    * 显示部分BIM部件...
                    */
                    setTimeout(arguments.callee, iTotalTime*1000/iTotalFrames);
                }
            }
        }, iTotalTime*1000/iTotalFrames)

    }else{
        isPlay = false;
    }
}
btnStop.onclick = function(){
    isPlay = false;
    iCurFrame = 0;
    progressbar.style.width = 0;
    btnPlay.classList.remove('active');
    /** 其它处理事件
    * 显示全部BIM部件...
    */
}

</script>
</body>
</html>

ES5严格模式下用下面方法：

var iTimer = null; // 定时器
var iTotalTime = 60; // 总时间/秒
var iTotalFrames = 1200; // BIM部件总帧数
var iCurFrame = 0; // 已播放帧
var isPlay = ""; // 是否播放
var btnPlay = document.getElementsByClassName('btn-play')[0];
var btnStop = document.getElementsByClassName('btn-stop')[0];
var progressbar = document.getElementById('progress-bar');
btnPlay.onclick = function () {
    btnPlay.classList.toggle('active');
    if (this.className.indexOf('active') > -1) {
        isPlay = true;
        fnProcessingProgress();
    } else {
        isPlay = false;
    }
}
btnStop.onclick = function () {
    iTimer = null;
    isPlay = false;
    iCurFrame = 0;
    progressbar.style.width = 0;
    btnPlay.classList.remove('active');
    /** 其它处理事件
    * 显示全部BIM部件...
    */
}
function fnProcessingProgress() {
    iTimer = window.setTimeout(function () {
        if (iCurFrame == iTotalFrames) {
            btnPlay.classList.remove('active');
        }
        else {
            if (isPlay) {
                iCurFrame++;
                progressbar.style.width = iCurFrame / iTotalFrames * 100 + '%'; // 直接使用会导致闪烁                    
                /** 其它处理事件
                * 显示部分BIM部件...
                */
                setTimeout('fnProcessingProgress()', iTotalTime * 1000 / iTotalFrames); // OR setTimeout(arguments.callee, iTotalTime*1000/iTotalFrames);
                
            }
        }
    }, iTotalTime * 1000 / iTotalFrames)
}