1. event對(duì)象和target對(duì)象的兼容性問(wèn)題
問(wèn)題：SCRIPT5007: 無(wú)法獲取未定義或 null 引用的屬性“target”
原因：event兼容問(wèn)題
解決策略(event兼容性處理)：event = event || window.event;
問(wèn)題：SCRIPT5007: 無(wú)法獲取未定義或 null 引用的屬性“nodeName”
原因：target兼容問(wèn)題
解決策略(目標(biāo)元素節(jié)點(diǎn)兼容處理)：target = event.target || event.srcElement;
2. 鼠標(biāo)的三種位置
-
offsetX offsetY
拿的是鼠標(biāo)相對(duì)自身元素的水平距離和垂直距離 相對(duì)的是自身元素左上角（以自身元素左上角為原點(diǎn)）
-
clientX& clientY
拿的是鼠標(biāo)相對(duì)視口的 水平距離和垂直距離 相對(duì)的是視口的左上角（以視口左上角為原點(diǎn)）
-
pageX pageY
拿的是鼠標(biāo)相對(duì)頁(yè)面（第一屏）的水平距離和垂直距離 相對(duì)的是頁(yè)面的左上角（以頁(yè)面左上角為原點(diǎn)）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>24_案例練習(xí)-鼠標(biāo)跟隨移動(dòng)</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. 定時(shí)器
-
單次定時(shí)器（延遲定時(shí)）
一般用來(lái)做延遲效果 定時(shí)炸彈- 基本使用
第一個(gè)參數(shù)是 回調(diào)函數(shù)
第二個(gè)參數(shù)是時(shí)間 毫秒 單位 - 返回值
定時(shí)器的返回值 是一個(gè)ID 唯一的
是從1開始依次向上查 - 取消單次定時(shí)器
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
-
循環(huán)定時(shí)器的設(shè)置和刪除
和循環(huán)類似都是為了重復(fù)去做一件事 eg: 鬧鐘
var timer = null;
clearInterval(timer); -
單次定時(shí)器和多次定時(shí)器同時(shí)出現(xiàn)的ID
- 由上到下從1開始
-
案例練習(xí)--- 閱讀協(xié)議
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>案例練習(xí)-閱讀協(xié)議</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>
-
案例練習(xí)--- 萬(wàn)年歷
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>案例練習(xí)-時(shí)間(萬(wàn)年歷)</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>
-
案例練習(xí)---定時(shí)器原理(異步)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>定時(shí)器原理</title>
</head>
<body>
<script>
// JS代碼是先執(zhí)行同步代碼 再執(zhí)行異步代碼
console.log(1);
setTimeout(function(){
console.log(2);
},5000);
console.log(3);
setTimeout(function(){
console.log(4);
},3000);
console.log(5);
</script>
</body>
</html>
定時(shí)器.jpg
