js基础3作业1

实现点击按钮，滚动条走动和百分比走动
方法一：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>进度条</title>
        <style type="text/css">
            #btn{
                width: 100px;
                height: 40px;
                background-color: lightblue;
                font-size: 25px;
                border-radius: 10px;
                float: left;
            }
            
            #divm{
                width: 500px;
                height: 40px;
                float: left;
                text-align: center;
                font-size: 35px;
                color: gold;
            }
            #rate{
                position: absolute;
                left: 350px;
                top: 8px;
            }
            
            .divs{
                width: 5px;
                height: 40px;
                /*background-color: blue;*/
                float: left;
            }
        </style>
    </head>
    <body>
        <button id="btn" onclick="loadd()">开始</button>
        <p id="rate"></p>
        <div id="divm">
            <script>
                for(var i = 0; i < 100; i++){
                    document.write("<div id=")
                    document.write(i)
                    document.write(" class='divs'></div>")
                }
                var odivs = document.getElementsByClassName('divs')
                var count = 0
                var rate = document.getElementById('rate')
                function loadd(){
                    var timer = setInterval(function (){
                        odivs[count].style.backgroundColor='blue'
                        count++
                        if (count >= 100){
                            clearInterval(timer)
                        }
                        rate.innerHTML = count + '%'
                    }, 250)
                }
            </script>
        </div>
    </body>
</html>