javascript加载滚动条实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        #outBox{
            width:600px;
            height:30px;
            border:1px solid #333;
        }
        #inBox{
            background-color:#abcdef;
            height:30px;
            width:0%;
        }
    </style>
</head>
<body>
    <h1>滚动条实例</h1>
    <hr>
    <div id="outBox">
        <div id="inBox"></div>
    </div>
    <script>
        //获取div
        var inBox = document.getElementById('inBox');
        
        //定时调用
        var timer = setInterval(run, 100);
        
        var m = 0;
        //定义函数
        function run(){
            m ++;
            inBox.style.width = m+'%';
            //判断
            if (m >= 100) {
                clearInterval(timer);
            }
        }
        
    </script>
</body>
</html>