随机获取进度条

来源：互联网发布：电子科学与技术知乎编辑：程序博客网时间：2024/06/14 09:25
<!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>
0 0