你好javascript day14

1)鼠标事件

mouseover和mouseout 是冒泡的，可以收到子元素的滑入滑出

mouseenter和mouseleave是不冒泡的，只能收到这个当前容器的进入和离开，子元素不会触发

2）焦点事件和输入事件

焦点事件主要用于表单元素，以及超链接，使用点击或者tab可以切换汇聚焦距

focus 是汇聚焦距一般汇聚焦距时，会有outline样式

blur 是失去焦距

失焦和聚焦主要用来判断表单验证

input 输入事件主要用于多行文本框和文本框

3）按键事件和滚轮事件

keyudwon 按下

keyup 松开

scroll 滚动条事件

// 鼠标滚轮

// IE 和谷歌浏览器

document.addEventListener("mousewheel",mouseHandler);

// 火狐浏览器

document.addEventListener("DOMMouseScroll",mouseHandler);

4）正则表达式基本语法

/^(?=D+d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/

查找、替换，通常用作验证，截取，隐藏，编码

构造函数创建方法

var reg=new RegExp("ab","g");

var reg=/表达式/修饰符

修饰符

g 全部

i 不区分大小写

m 多行匹配

5）正则表达式相关方法

exec

查找符合正则内容，index就是下标，返回一个数组，没找到就会返回null

不能查找多个

var str="eksakjdksadh";

console.log(/sa/g.exec(str));

test

查看字符串是否有满足正则表达式的内容，如果有，返回true，没有就返回false

var reg=/ab/;
var bool=reg.test('absder');
console.log(bool);//true

字符串方法

var str="abcedg";

// 替换

str.replace(/a/,"z");

// 查找返回数组

str.match(/a/);

// 查找元素，返回下标

str.search(/a/);

// 分隔数组

str.split(/a/);

match

var str="abcdabcd";

console.log(str.match(/a/));//查找一个时，与test类似，可以返回一个数组，下标和查找到的内容

console.log(str.match(/a/g));//查找多个，就会把每个查找到的内容返回出来

var str="abcdabcd";

console.log(str.search(/c/));//只能找到一个正在表达式的下标

split

var str="ab?c=3&da=4&bcd=5";

var arr=str.split(/[?&]/g).slice(1);

console.log(arr);

节流

        var bool=false;
   
        var input=document.querySelector("input");
        input.addEventListener("input",inputHandler);

        function inputHandler(e){
            if(bool) return;
            var ids=setTimeout(function(){
                clearTimeout(ids);
                bool=false;
                console.log(input.value);
            },500);
            bool=true;
        }

人物行走

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
         33px;
        height: 33px;
        background-image: url("./img/Actor01-Braver03.png");
        background-position-x: 0px;
        background-position-y: 0px;
        position: absolute;
        left: 0px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      var actor, key;
      var speedX = 2,
        speedY = 2,
        x = 0,
        y = 0,
        count=0,
        time=10;
      init();
      function init() {
        actor = document.querySelector("div");
        document.addEventListener("keydown", mouseHandler);
        document.addEventListener("keyup", mouseHandler);
        setInterval(animation, 16);
      }

    //   帧频  帧

    // 60帧/秒
    //   1000/60=16.666666毫秒



      function mouseHandler(e) {
        if (e.type === "keydown") {
          if (!key) {
            switch (e.keyCode) {
              case 37:
                actor.style.backgroundPositionY = "-33px";
                break;
              case 38:
                actor.style.backgroundPositionY = "-99px";
                break;
              case 39:
                actor.style.backgroundPositionY = "-66px";
                break;
              case 40:
                actor.style.backgroundPositionY = "0px";
                break;
            }
          }
          key = e.keyCode;
        } else {
          key = undefined;
          actor.style.backgroundPositionX="0px";
        }
      }

      function animation() {
        if (!key) return;
        changeActor();
        actorMove();
      }
    //   防抖
      function changeActor() {
        //   因为考虑不能进入太快，当前函数原来是16毫秒进入一次。
        // 现在我们设置一个time，每10次进入一次，这样就造成每160毫秒进入一次，减缓图像改变速度
        // 这就是防抖
        time--;
        if(time>0)return;
        time=10;
        count++;
        if(count>3) count=0;
        actor.style.backgroundPositionX=-count*32+"px";

      }

      function actorMove() {
        switch (key) {
          case 37:
            x -= speedX;
            break;
          case 38:
            y -= speedY;
            break;
          case 39:
            x += speedX;
            break;
          case 40:
            y += speedY;
            break;
        }
        actor.style.left = x + "px";
        actor.style.top = y + "px";
      }
    </script>
  </body>
</html>