持续更新。。。

 

一、 js动画下载进度条

核心方法：requestAnimation   ，更新动画

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    < >下载进度条</ >
</head>
<body>
    <!--更新屏幕画面:当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次,
    可以让一次动画执行完，接着继续执行-->
    下载中ing。。。
    <div id=\"test\"></div><span id=\"percent\"></span>
    < >
        var start = null;
        var element = document.getElementById(\'test\');
        var per = document.getElementById(\'percent\');
        element.style.position = \'absolute\';

        var sum = 0;
        function step() {
            var num = Math.round(Math.random()*100);
            sum += num;
            element.append(\'=>\')
            var current_per = Math.round(sum/1000*100);
            current_per = current_per>100?100:current_per;
            per.innerText = current_per+\'%\';
            if (sum < 1000) {
                window.setTimeout(function () {
                    window.requestAnimation (step);
                },500)

            }else {
                element.innerHTML = \'<b>下载成功！</b>\'
            }
        }

        window.requestAnimation (step);
    </ >
</body>
</html>

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月14日 星期四

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章