【Web前端】学习中遇到的问题（长期更新）

前言

这篇博客就用来记载自己在 web 前端学习中遇到我的一些问题。

2016年11月24日

Cannot set property ‘onmouseover’ of null

在做 js 动画效果时，自己从头手写代码，发现以下问题：

<script type="text/javascript">
var show = document.getElementById("show");
show.onmouseover = function() {
alert("11");
}
</script>

鼠标不管滑动还是点击，随便我怎么弄都没有反应，打开 chrome 调试工具发现一个错误：

Uncaught TypeError: Cannot set property ‘onmouseover’ of null

at file:///E:/webPractice/jsAnimation/speed.html:33:26

一头雾水，遂 google 之，发现是没有加载第一句语句，找不到 show ，于是仔细对比以前粘的代码，发现修改如下：

<script type="text/javascript">
window.onload = function() {
var show = document.getElementById("show");
show.onmouseover = function() {
alert("11");
}
}
</script>

说明节点需要先加载完才能执行 onmouseover 事件。

background 和 background-color 的区别

background 可以设置 背景颜色、背景图片、定位等

background-color 只能设置 背景颜色

设置 background-color: #aaa; 时仅仅改变了背景色，但此时有一个默认的的 background:repeat; 而设置 background: #aaa; 后，相当于同时设置了 background:no-repeat;

即

{
background-color: #aaa;
background:no-repeat;
}

等同于

{
background: #aaa;
}

慕课网 Js 速度动画 2-1 写错代码导致抖动 Bug 问题。

我的代码：

function show() {
clearInterval(timer);
var oDiv = document.getElementById("div1");
var timer = setInterval(function() {
if (oDiv.offsetLeft == 0) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + 10 + "px";
}
}, 30);
}

function hide() {
clearInterval(timer);
var oDiv = document.getElementById("div1");
var timer = setInterval(function() {
if (oDiv.offsetLeft == -200) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft - 10 + "px";
}
}, 30);
}

正确代码

var timer = null;
function show() {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
if (oDiv.offsetLeft == 0) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + 10 + "px";
}
}, 30);
}

function hide() {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
if (oDiv.offsetLeft == -200) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft - 10 + "px";
}
}, 30);
}

原因：没有在外全局声明 timer，导致定时器清除不成功。

2016年11月25日

一些宽高问题

javascript 中 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变

clientWidth、offsetWidth、clientHeight区别

IE6.0、FF1.06+：

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

offsetWidth = width

offsetHeight = height

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width

拼写错误问题！

这种问题都经常犯，以前用 IDE 自动生成且有检测功能习惯了，这里特地记载一下，以免再犯！细心细心！

日期操作相关

在对秒数进行判断补 0 的时候，在 check 函数中没有 return i，导致 undefined。