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