兼容IE6~9的进度条

最新推荐文章于 2019-10-17 23:07:47 发布

GerdonLiu

最新推荐文章于 2019-10-17 23:07:47 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/u011522118/article/details/48806711

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/jquery-1.3.1.min.js"></script>
    <title></title>
    <style>
        progress {
            display: inline-block;
            width: 40%;
            height: 20px;
            border: 0px solid #0064B4;
            background-color: #e6e6e6;
            color: #0064B4;
        }

        ie6-ie9progress ie {
            display: block;
            height: 100%;
            background: #0064B4;
        }

        progress::-moz-progress-bar {
            background: #0064B4;
        }

        progress::-webkit-progress-bar {
            background: #e6e6e6;
        }

        progress::-webkit-progress-value {
            background: #0064B4;
        }
    </style>
    <script>
        if (typeof window.screenX !== "number") {
            document.createElement("progress");
            document.createElement("ie");
        }
        var greVal = 0;
        function pro() {
            greVal += 10;
            if (greVal > 100) {
                return false;
            } else {
                $("progress").css("visibility", "visible").val(greVal);
                $("#sp").html(greVal);
            }
        }
    </script>
</head>
<body>
    <div>
        <progress max="100" value="0" style="visibility:hidden">
            <ie style="width: 10%;"></ie>
        </progress>
        <span id="sp">0</span>%
        <input type="button" id="btn_pro" value="Star" onclick="pro()" />
    </div>
</body>
</html>