zoukankan      html  css  js  c++  java
  • 解决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文件放到上面去。

  • 相关阅读:
    阿里云 linux centos7安装tomcat
    定义全局的输入框获取焦点指令vfocus
    vue按enter键刷新页面 使用@submit.native.prevent阻止表单默认提交,添加在form标签上
    vue按键修饰符@keyup.enter.native
    阿里云 linux centos7中安装redis
    CRON表达式
    python定时执行nutch爬取任务
    Spring中设置bean作用域
    Cassandra 安装
    cassandra入门
  • 原文地址:https://www.cnblogs.com/zhouyu0001/p/9399332.html
Copyright © 2011-2022 走看看