html5 progress

最新推荐文章于 2023-02-14 15:43:17 发布

原创最新推荐文章于 2023-02-14 15:43:17 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #progress

html5 专栏收录该内容

18 篇文章

订阅专栏

本文展示了一个使用HTML5 `progress` 元素结合jQuery实现的自动更新进度条示例。通过JavaScript设置初始值和最大值，并利用定时器每隔一段时间增加进度条的值，直至达到最大值时停止并提示加载完成。

<!doctype html>
<html>
<head>
    <title>progress</title>
    <script type="text/javascript" src="javascript/jquery.js"></script>
    <script type="text/javascript">
        var currentValue = 0;//进度条当前数据
        var maxValue = 100;//进度条最大值
        var myIndex;
        $(function () {
            $('#myProgress').val(currentValue);
            $('#myProgress').attr('max', maxValue);
            myIndex = setInterval(plusValue, 100);
        });
        function plusValue() {
            if (currentValue < maxValue) {
                currentValue++;
                $('#myProgress').val(currentValue);
            } else {
                clearInterval(myIndex);
                alert('加载完成');
            }
        }
    </script>
</head>
<body>
    <progress id="myProgress" ></progress>
</body>
</html>