随机获取进度条

最新推荐文章于 2022-06-23 14:20:41 发布

大西瓜啃完了哟

最新推荐文章于 2022-06-23 14:20:41 发布

阅读量603

点赞数

本文链接：https://blog.csdn.net/haihiaandtongtong/article/details/48650295

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>随机获取进度条</title>
    <style>
        .bar {
            margin: 5px 0 3px;
            border: 6px solid #333;
            background: #333;
            overflow: hidden;
            border-radius: 50px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            box-shadow: 1px 1px 1px #777;
            -moz-box-shadow: 1px 1px 1px #777;
            -webkit-box-shadow: 1px 1px 1px #777;
        }

        .bar > span {
            display: block;
            height: 20px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        .color0 > span {
            background-color: #FF9932;
        }
    </style>
    <script src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var delay = 0;
            $('.bar').children('span').each(function () {
                var num = Math.floor(Math.random() * 8) + 2;
                console.log(num);
                $(this)
                        .width(0)
                        .delay(delay)
                        .animate({
                            'width': (num * 10) + '%'
                        }, 3000);
                delay += 1500;
            });
        });
    </script>
</head>
<body>
<div class="bar color0">
    <span></span>
</div>
</body>
</html>