解决Cannot read property 'style' of null中样式问题

<script type="text/javascript">
        function updateTime(){
            var timeNow = new Date();
            var hour = timeNow.getHours();
            var minute = timeNow.getMinutes();
            var second = timeNow.getSeconds();
            var millisecond= timeNow.getMilliseconds();

            //获取表盘上的指针进行旋转
            var sec = document.getElementById('seconds');
            var min = document.getElementById("minutes");
            var h = document.getElementById("hours");
            //指针旋转
            sec.style.transform = 'rotateZ(' +(second*360/60 + millisecond * 6/1000)+ 'deg)';
            min.style.transform = 'rotateZ(' + (minute*360/60) + 'deg)';
            h.style.transform = 'rotateZ(' + (hour*360/12 + minute*30/60) +'deg)';
        }
        setInterval(function () {
            updateTime();
        }, 50)
        updateTime();
        var scales = document.querySelectorAll('.scale');
        var nums = document.querySelectorAll('.num');
        for(var i = 0; i < scales.length;i++){
            scales[i].style.transform = 'rotateZ(' + (i*30)+ 'deg) translateY(-200px)';
            nums[i].style.transform = 'rotateZ(' + (i*-30)+ 'deg)';
        }
    </script>
    <div id="all">
        <div class="second" id="seconds"></div>
        <div class="minute" id="minutes"></div>
        <div class="hour" id="hours"></div>
        <div class="scale"><span class="num">12</span></div>
        <div class="scale"><span class="num">1</span></div>
        <div class="scale"><span class="num">2</span></div>
        <div class="scale"><span class="num">3</span></div>
        <div class="scale"><span class="num">4</span></div>
        <div class="scale"><span class="num">5</span></div>
        <div class="scale"><span class="num">6</span></div>
        <div class="scale"><span class="num">7</span></div>
        <div class="scale"><span class="num">8</span></div>
        <div class="scale"><span class="num">9</span></div>
        <div class="scale"><span class="num">10</span></div>
        <div class="scale"><span class="num">11</span></div>

    </div>

问题在于先写的JS,后写的HTML代码,因此,程序在执行时,先编译的js,这时,HTML还未被解析,因此style属性不能被解析,解决方法就是将HTML文件放到上面去。

猜你喜欢

转载自www.cnblogs.com/zhouyu0001/p/9399332.html
今日推荐