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

时间：2025-04-26 08:38:16
<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文件放到上面去。

相关文章