<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. leetcode-278-First Bad Version(注意不要上溢)

    题目描述:(说明中有简单翻译) You are a product manager and currently leading a team to develop a new product. Unf ...

  2. 42.oracle物化视图

    写在前面 先大概列一下数据库表设计的常规流程.方案.要遵循的规则 根据业务切分设计表 逻辑分层(数据库分层) 数据库结构设计与拆分:水平拆分(mysql分片)oracle分区物化视图中间表设计方案 优 ...

  3. localhost, 127.0.0.1, 0.0.0.0

    总结: localhost:是一个域名.域名可以认为是某个ip的别称,便于记忆.通常localhost对应的ip是127.0.0.1,不过这个也可以设置,参见知乎回答 127.0.0.1:是一个回环地 ...

  4. shell-008:检测502

    检测502的方法有多种 1.curl他的状态码(不建议,会对网站造成不必要的访问和多余的日志输出) 2.可以直接检测访问日志 下面用while做成一个死循环监控日志502的状态 #!/bin/bash ...

  5. C# 并发队列ConcurrentQueue

    测试函数 static async Task RunProgram() { var taskQueue = new ConcurrentQueue<CustomTask>(); var c ...

  6. service iptables xxx无效命令的情况下,如何启动/重启iptables

    最近在CentOS 7.6下使用service iptables xxx相关命令,提示如下错误:The service command supports only basic LSB actions ...

  7. 思科 ISR路由器登录内置交换模块的方式

    ISR2900/3900系列 登录:Router#service-module gigabitethernet1/0 session 退出: control+shift+6 x disconnect ...

  8. anyncTask的3个参数(从源码可以发现其中使用了ThreadPoolExcuter线程池)

    AnyncTask异步处理数据并将数据应用到视图的操作场合 一  其中包含这几个方法 1 onPreExcute() 初始化控件,例如进度条2 doInBackground() 具体的执行动作请求数据 ...

  9. 高性能web服务器(热死你)Resin Linux的安装、配置、部署,性能远超Nginx支持Java、PHP等

    高性能web服务器(热死你)Resin Linux的安装.配置.部署,性能远超Nginx支持Java.PHP等 一.    安装resin 1.  下载resin: 下载地址:http://cauch ...

  10. 【Kafka源码】Kafka代码模块

    Kafka源码依赖于Scala环境,首先需要安装scala,这块请自行百度进行安装. 传送门 当然,我们要分析源码,需要下载源码,请自行从github上面下载. 说明:本文使用的kafka版本为0.1 ...