18.JavaScript之进度条

作者: 讲武德的年轻人 | 来源:发表于2019-08-22 15:20 被阅读0次

18.JavaScript之进度条
js之进度条
Android自定义控件之圆形进度条
sys模块
橡皮筋进度条ElasticProgressBar
Android SeekBar的使用，进度条的另一种实现方式
技多不压身，我是烘焙人
Android控件之SeekBar
自定义进度条PictureProgressBar——从开发到开源
Android进度条

<body>
    <div id="divid" style="width:20px;height:20px;background: red;position:relative;"></div>
    <script>
        // hardcode：所有常数都是通过在代码中硬写，后期更改以及维护很麻烦
        // 写代码步骤：1.调通demo；2.改善代码
        function startLonger(){
            var div = document.getElementById('divid');
            var width = Number.parseInt(div.style.width); //div.style.width的值是'20px'
            // console.log(width);
            if(width<300){
                width+=5;
                div.style.width = width + 'px';
                setTimeout('startLonger()',20);
            }else{
                div.style.width = '300px';
                setTimeout('startShorter()',20);
            }
            
        }
        function startShorter(){
            var div = document.getElementById('divid');
            var width = Number.parseInt(div.style.width);
            // console.log(width);
            if(width>=20){
                width-=5;
                div.style.width = width + 'px';
                div.style.left = (300 - width) + 'px';
                setTimeout('startShorter()',20);
            }else{
                div.style.width = '20px';
                div.style.left = '280px'
                // setTimeout('startLonger()',20);
            }
            
        }
        setTimeout('startLonger()',20);
    </script>
</body>

浏览器出现红色进度条：

让进度条沿正方形边长走一圈

html

<div id="divid" style="width:20px;height:20px;background: red;position:relative;"></div>

js

var MAX = 300; //div的最长长度或宽度
var EDGE = 20; // div的最短长度或高度
var LENGTH = MAX - EDGE;
var INTERVAL = 20; //动画刷新的时间间隔，单位ms
var PERIOD = 1000;// 从EDGE涨到MAX，或从MAX小到EDGE的时间
var SPEED = Math.floor((LENGTH/PERIOD)*INTERVAL);

// 上面，变长
function startLongerTop(){
    var div = document.getElementById('divid');
    var width = Number.parseInt(div.style.width);
    if(isNaN(width)){return;}
    if(width<MAX){
        width+=SPEED;
        div.style.width = width + 'px';
        setTimeout('startLongerTop()',INTERVAL);
    }else{
        div.style.width = MAX + 'px';
        setTimeout('startShorterTop()',INTERVAL );
    }
}

// 上面，变短
function startShorterTop(){
    var div = document.getElementById('divid');
    var width = Number.parseInt(div.style.width);
    if(isNaN(width)){return;}
    if(width>=EDGE){
        width-=SPEED;
        div.style.width = width + 'px';
        div.style.left = (MAX - width) + 'px';
        setTimeout('startShorterTop()',INTERVAL );
    }else{
        div.style.width = EDGE + 'px';
        div.style.left = (LENGTH) + 'px';
        setTimeout('startLongerRight()',INTERVAL );
    }
}

// 右面，变长
function startLongerRight(){
    var div = document.getElementById('divid');
    var height = Number.parseInt(div.style.height);
    if(isNaN(height)){return;}
    if(height<MAX){
        height+=SPEED;
        div.style.height = height + 'px';
        setTimeout('startLongerRight()',INTERVAL);
    }else{
        div.style.height = MAX + 'px';
        setTimeout('startShorterRight()',INTERVAL );
    }
    
}

// 右面，变短
function startShorterRight(){
    var div = document.getElementById('divid');
    var height = Number.parseInt(div.style.height);
    if(isNaN(height)){return;}
    if(height>EDGE){
        height-=SPEED;
        div.style.height = height + 'px';
        div.style.top = (MAX - height) + 'px'
        setTimeout('startShorterRight()',INTERVAL);
    }else{
        div.style.height = EDGE + 'px';
        setTimeout('startLongerBottom()',INTERVAL );
    }
    
}

// 下面，变长
function startLongerBottom(){
    var div = document.getElementById('divid');
    var width = Number.parseInt(div.style.width);
    if(isNaN(width)){return;}
    if(width<MAX){
        width+=SPEED;
        div.style.width = width + 'px';
        div.style.right = MAX + 'px';
        div.style.left = (MAX - width) + 'px';
        setTimeout('startLongerBottom()',INTERVAL);
    }else{
        div.style.width = MAX + 'px';
        setTimeout('startShorterBottom()',INTERVAL );
    }
    
}

// 下面，变短
function startShorterBottom(){
    var div = document.getElementById('divid');
    var width = Number.parseInt(div.style.width);
    if(isNaN(width)){return;}
    if(width>=EDGE){
        width-=SPEED;
        div.style.width = width + 'px';
        div.style.left = '0px';
        setTimeout('startShorterBottom()',INTERVAL );
    }else{
        div.style.width = EDGE + 'px';
        div.style.left = '0px';
        setTimeout('startLongerLeft()',INTERVAL );
    }
}

// 左面，变长
function startLongerLeft(){
    var div = document.getElementById('divid');
    var height = Number.parseInt(div.style.height);
    if(isNaN(height)){return;}
    if(height<MAX){
        height+=SPEED;
        div.style.height = height + 'px';
        div.style.top = (MAX - height) + 'px';
        setTimeout('startLongerLeft()',INTERVAL);
    }else{
        div.style.height = MAX + 'px';
        setTimeout('startShorterLeft()',INTERVAL );
    }
    
}

// 左面，变短
function startShorterLeft(){
    var div = document.getElementById('divid');
    var height = Number.parseInt(div.style.height);
    if(isNaN(height)){return;}
    if(height>EDGE){
        height-=SPEED;
        div.style.height = height + 'px';
        div.style.top = '0px'
        setTimeout('startShorterLeft()',INTERVAL);
    }else{
        div.style.height = EDGE + 'px';
        setTimeout('startLongerTop()',INTERVAL );
    }
    
}

setTimeout('startLongerTop()',INTERVAL);

最后进度条可以沿正方形走。