<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. python 开发工具IDE pycharm的破解版安装

    打开终端 cd /etc 命令行输入 sudo vim hosts 输入mac密码 输入i,进入编辑模式(注意在英文状态下书写) 粘贴0.0.0.0 account.jetbrains.com到文件最 ...

  2. linux下启动tomcat服务的命令是什么

    Linux下tomcat服务的启动.关闭与错误跟踪,使用PuTTy远程连接到服务器以后,通常通过以下几种方式启动关闭tomcat服务:切换到tomcat主目录下的bin目录(cd usr/local/ ...

  3. switch case执行顺序

    public class SwitchCase { public static void main(String[] args) { System.out.println(switchFun(4)); ...

  4. [BZOJ 1056][HAOI2008]排名系统

    传送门 \(\color{green}{solution}\) \(fhq \_treap\)模板题. 对于 \(+\) 操作,如果当前人不存在,那么直接加入;如果存在,那么先将他删除,再加入.复杂度 ...

  5. 在MVC程序中使用MongoDB数据库

    .net项目中混搭数据库 安装和部署 C#中使用MongoDB MongoDb与关系型数据库区别 开机自启动 关系型数据库和非关系型数据口可以混搭 MongoDB是一个高性能,开源,无模式的,基于分布 ...

  6. c#移位运算符("<<"及">>")详细说明

    以前感觉移位运算符自己挺明白的,也许是学的时间长了,后来一看,忘得差不多了.现在参考一些网上的学习资料,将位移运算符整理一下,作为知识点总结,也算个积累.在讲移位运算符之前,先简单补充一下原码与补码的 ...

  7. PowerDesigner新建CDM设置相同属性

    在 PowerDesigner设计逻辑模型CDM时,在一个包的一个域中,考虑到主外键名称可能冲突的问题,默认两个不同的实体中不能有相同的属性 但实际设计的时候,通常要在两个实体中使用相同的属性名, 比 ...

  8. Cassandra概念学习系列之Windows里下载且安装配置Cassandra(最新的3.11.1版本)(图文详解)

    不多说,直接上干货!  最近我开始在windows环境中使用Cassandra,虽然在Cassandra站点的安装命令非常清楚和精简,我仍然在环境配置上遇到一些问题.所以我想为后来者分享下我的经验. ...

  9. 在Linux上创建webrev(cont)[基于svn]

    在前文中,基于git介绍了webrev工具.实际上,webrev工具还支持hg和svn.最近的工作中不可避免地要使用svn,故在此总结一下如何基于svn在Linux上创建webrev.顺便吐个槽,没有 ...

  10. 10w定时任务,如何高效触发超时

    一.缘起 很多时候,业务有定时任务或者定时超时的需求,当任务量很大时,可能需要维护大量的timer,或者进行低效的扫描. 例如:58到家APP实时消息通道系统,对每个用户会维护一个APP到服务器的TC ...