<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            #rect {
                width: 120px;
                height: 100px;
                margin-bottom: 200px;
                background-color: black;
                /*补全代码*/
                animation-duration: 10s;
                animation-name: rect;
                animation-iteration-count: infinite;
            }
            @keyframes rect {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <!-- 补全代码 -->
    	<div id="rect"></div>
        <input id="range" type="range" step="1" onchange="handleRangeChange(this.value)"/>
        
        <script type="text/javascript">
            // 补全代码
            let rectEl = document.getElementById('rect');
            let rangeEl = document.getElementById('range');
            
            function handleRangeChange(val) {
                rectEl.style.animationDuration = parseInt(parseInt(val) + 9+((parseInt(val) -1)*(-2))) + 's';
            }
        </script>
    </body>
</html>