<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中样式问题的更多相关文章

  1. TypeError: Cannot red property 'style' of null 错误解决

    错误信息如下: JSP代码如下: <c:if test ="${not empty excelErrors}"> <div id="excelError ...

  2. Cannot read property 'style' of null

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  3. Uncaught TypeError: Cannot set property 'onclick' of null解决办法

    如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...

  4. Hexo server报错TypeError: Cannot read property 'utcOffset' of null解决方法

    最近刚刚开始使用Hexo,新建了一篇article,运行hexo server时候总是报错Cannot read property 'offset' of null. 最后发现是因为手贱把_confi ...

  5. echarts Cannot read property 'getAttribute' of null 问题的解决方法

    今天在使用echarts练习官方给的实例的时候,代码没有问题 却总是报错“Cannot read property 'getAttribute' of null” 找了好久的文档没有看明白 ... 最 ...

  6. 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null

    今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...

  7. Cannot set property 'innerHTML' of null 问题的解决

    错误第一次写web 前端代码,出现了“Cannot set property ‘innerHTML’ of null”的错误代码,然后不知道原因在哪? 解决方案在网上查了下资料,原来是js 代码从上往 ...

  8. JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...

  9. day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    转行学开发,代码100天.初写了最简的一段Js代码,即通过document中的innerHTML方法修改一个<p>标签的内容,报以下错误. -"Uncaught TypeErro ...

随机推荐

  1. [原创]php任务调度器 hellogerard/jobby

    目录 简介 安装 标准使用 选项 项目实践 简介 一个强大的php层面上的定时任务调度器, 无需修改系统层面的crontab 实际中, php 结合 crontab 来实现定时任务是一种经得住考验的实 ...

  2. CentOS 7 安装方式汇总

    U盘安装 通过U盘安装 CentOS 的过程和安装Windows非常相似,首先将 CentOS 镜像文件刻录到U盘(或者光盘),设置固件(BIOS或者UEFI)从U盘启动,然后逐步设置即可. 使用 V ...

  3. Python 全栈开发:str(字符串)索引和切片

    str(字符串)索引和切片 str(字符串)索引: #计算机中大部分索引以0为开始 s = 'mylovepython' s1 = s[0] s2 = s[4] s3 = s[-1] print(s1 ...

  4. cool kickass

    I can stay like this alllllllllll daaaaaaaaayyyyyy.

  5. 封装 原生 fetch

    1, 简介 fetch方法是 Fetch API的一个方法,提供了一种简单.合理的方式来跨网络异步获取资源. 与原来的XMLHttpRequest比较,fetch更容易与其他的技术结合:比如servi ...

  6. MySQL error2003错误原因以及解决方案

    转自:http://hi.baidu.com/tianxia339/item/8e8849111461ea7e7a5f2540 出现ERROR 2003 (HY000): Can't connect ...

  7. disable Nouveau kernel driver

    nano /etc/modprobe.d/blacklist-nouveau.conf with the following contents: blacklist nouveau options n ...

  8. Nginx 的信号控制

    摘自:Nginx服务器初识:Nginx启动.停止与信号控制 名称 功能 说明 HUP 重启   QUIT 从容关闭   TERM 快速关闭   INT 从容关闭   USR1 切换日志文件 通常用在切 ...

  9. js处理json数据,java处理json数据

    一.js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象. 例如: var people = { "programmers" ...

  10. ASP.NET Core 的启动和运行机制

    目录 ASP .NET Core 的运行机制 ASP .NET Core 的启动 ASP .NET Core 的管道和中间件 参考 ASP .NET Core 的运行机制 Web Server: AS ...