码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-08-01 11:40:35      阅读:625      评论:0      收藏:0      [点我收藏+]

标签:cti   tran   translate   datetime   sele   ISE   transform   pre   gets   

<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文件放到上面去。

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

标签:cti   tran   translate   datetime   sele   ISE   transform   pre   gets   

原文地址:https://www.cnblogs.com/zhouyu0001/p/9399332.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!