HTML5-<progress>标签做进度条

Posted on 2015-11-07 15:52  Luca_LJX  阅读(1419)  评论(0)    收藏  举报

<progress>标签有两个属性：value和max，value表示<progress>标签当前值，max定义一个最大值，value必须小于等于max。

例子：利用<progress>标签做一个下载进度条：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body{

            font-size: 13px;

        }

        p{

            padding: 0px;

            margin: 0px;

        }

        .inputbtn{

            border: solid 1px #ccc;

            background-color: #eee;

            line-height: 18px;

            font-size: 12px;

        }

    </style>

</head>

<body>

    <P id="pTip">开始下载</P>

    <progress value="0" max="100" id="proDownFile"></progress>

    <input type="button" value="下载" class="inputbtn" onclick="Btn_Click();">

    <script type="text/javascript">

        var intValue = 0;

        var intTimer;

        var objPro = document.getElementById('proDownFile');

        var objTip = document.getElementById('pTip');

        //定时事件

        function Interval_handler(){

            intValue++;

            objPro.value = intValue;

            if (intValue >= objPro.max) {

                clearInterval(intTimer);

                objTip.innerHTML = "下载完成!";

            }else{

                objTip.innerHTML = "正在下载" + intValue + "%";

            }

        }

        //下载按钮单击事件

        function Btn_Click(){

            intTimer = setInterval(Interval_handler, 100);

        }

    </script>

</body>

</html>