解决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文件放到上面去。
解决Cannot read property 'style' of null中样式问题的更多相关文章
- TypeError: Cannot red property 'style' of null 错误解决
错误信息如下: JSP代码如下: <c:if test ="${not empty excelErrors}"> <div id="excelError ...
- Cannot read property 'style' of null
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- Uncaught TypeError: Cannot set property 'onclick' of null解决办法
如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...
- Hexo server报错TypeError: Cannot read property 'utcOffset' of null解决方法
最近刚刚开始使用Hexo,新建了一篇article,运行hexo server时候总是报错Cannot read property 'offset' of null. 最后发现是因为手贱把_confi ...
- echarts Cannot read property 'getAttribute' of null 问题的解决方法
今天在使用echarts练习官方给的实例的时候,代码没有问题 却总是报错“Cannot read property 'getAttribute' of null” 找了好久的文档没有看明白 ... 最 ...
- 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null
今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...
- Cannot set property 'innerHTML' of null 问题的解决
错误第一次写web 前端代码,出现了“Cannot set property ‘innerHTML’ of null”的错误代码,然后不知道原因在哪? 解决方案在网上查了下资料,原来是js 代码从上往 ...
- JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...
- day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
转行学开发,代码100天.初写了最简的一段Js代码,即通过document中的innerHTML方法修改一个<p>标签的内容,报以下错误. -"Uncaught TypeErro ...
随机推荐
- 使用python 模仿mybinlog 命令 二进制分析mysql binlog
出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该声明. ...
- mfix中输出DEM颗粒的固相速度到网格
基于mfix-19.1.2版本 方法一:直接输出差值网格固相速度 注:这种方式只适用于garg 2012颗粒差值格式在DEM中,默认是无法输出固相速度的网格值的: 但是通过搜索des文件夹下V_s关键 ...
- BigDecimal加减乘除运算(转)
java.math.BigDecimal.BigDecimal一共有4个够造方法,让我先来看看其中的两种用法: 第一种:BigDecimal(double val) Translates a doub ...
- shiro学习笔记_0700_整合ssm
现在最流行的框架就是ssm,学到最后,shiro在实际开发中,也就的整合框架.首先spring是少不了的,shiro也提供了和spring的整合包. 首先,新建maven项目: maven依赖: &l ...
- LINUX 查找替换命令 总结
find /var/ -name "*.php" > /home/tmp 在/var/目录下查找 所有以.php后缀结尾的文件 结果很多,就 > 输出结果到/home ...
- 【html5】cookie、sessionStorage、localStorage
第四条补充: cookie中包含domain和path,所有向该域下该路径发送的请求头部都会包含这个cookie: session浏览器关闭后消失,只能由最初给对象存储数据的页面访 ...
- 如何为 Go 设计一个通用的日志包
需求 一个通用的日志包,应该满足以下几个需求: 兼容 log.Logger,标准库大量使用了 log.Logger 作为其错误内容的输出通道,比如 net/http.Server.ErrorLog,所 ...
- 发布aar到jcenter
准备工作 创建bintray账号; 在https://bintray.com/, 选择如下图中,方框内"Sign Up Here": 选择合适的方式,创建账号: 新建仓库: Add ...
- java算法----------二叉树的遍历
二叉树的遍历分为前序.中序.后序和层序遍历四种方式 首先先定义一个二叉树的节点 //二叉树节点 public class BinaryTreeNode { private int data; priv ...
- ASP.NET Core 集成 WebSocket
1. 环境 AspNetCore Web 2.0 (MVC) Windows 10 IIS 10 Express/IIS VS 2017 2.如何配置 在已有的或者新创建的 AspNet Core M ...