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