1. event对象和target对象的兼容性问题
问题：SCRIPT5007: 无法获取未定义或 null 引用的属性“target”
原因：event兼容问题
解决策略(event兼容性处理)：event = event || window.event;
问题：SCRIPT5007: 无法获取未定义或 null 引用的属性“nodeName”
原因：target兼容问题
解决策略(目标元素节点兼容处理)：target = event.target || event.srcElement;
2. 鼠标的三种位置
-
offsetX offsetY
拿的是鼠标相对自身元素的水平距离和垂直距离 相对的是自身元素左上角（以自身元素左上角为原点）
-
clientX& clientY
拿的是鼠标相对视口的 水平距离和垂直距离 相对的是视口的左上角（以视口左上角为原点）
-
pageX pageY
拿的是鼠标相对页面（第一屏）的水平距离和垂直距离 相对的是页面的左上角（以页面左上角为原点）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>24_案例练习-鼠标跟随移动</title>
<style>
img {
position: absolute;
left: 0;
top: 0;
width: 300px;
}
</style>
</head>
<body>
<img src="./img/1.jpg" alt="">
<script>
window.onmousemove = function(event){
var img = document.querySelector('img');
img.style.left = event.clientX + 'px';
img.style.top = event.clientY + 'px';
}
</script>
</body>
</html>
3. 定时器
-
单次定时器（延迟定时）
一般用来做延迟效果 定时炸弹- 基本使用
第一个参数是 回调函数
第二个参数是时间 毫秒 单位 - 返回值
定时器的返回值 是一个ID 唯一的
是从1开始依次向上查 - 取消单次定时器
var timer = null;
clearTimeout(timer);
- 基本使用
var timer = setTimeout(function(){
console.log(11111);
},5000);
var timer1 = setTimeout(function(){
console.log(11111);
},2000);
console.log(timer); // 1
console.log(timer1); // 2
-
循环定时器的设置和删除
和循环类似都是为了重复去做一件事 eg: 闹钟
var timer = null;
clearInterval(timer); -
单次定时器和多次定时器同时出现的ID
- 由上到下从1开始
-
案例练习--- 阅读协议
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>案例练习-阅读协议</title>
</head>
<body>
<button disabled>确定(5s)</button>
<script>
var btn = document.querySelector('button');
var n = 5;
var timer = null;
timer = setInterval(function(){
if(n > 1){
n--;
btn.innerHTML = '确定(' + n + 's)';
}else{
btn.innerHTML = '确定';
btn.disabled = false;
clearInterval(timer);
}
},1000);
</script>
</body>
</html>
-
案例练习--- 万年历
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>案例练习-时间(万年历)</title>
</head>
<body>
<span></span>
<script>
function getNowDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var time = date.toLocaleTimeString();
return year + '年' + month + '月' + day + '日' + time;
}
var span = document.querySelector('span');
setInterval(function(){
span.innerHTML = getNowDate();
},1000)
</script>
</body>
</html>
-
案例练习---定时器原理(异步)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>定时器原理</title>
</head>
<body>
<script>
// JS代码是先执行同步代码 再执行异步代码
console.log(1);
setTimeout(function(){
console.log(2);
},5000);
console.log(3);
setTimeout(function(){
console.log(4);
},3000);
console.log(5);
</script>
</body>
</html>
定时器.jpg
