• 你好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));//查找多个,就会把每个查找到的内容返回出来
     
     
    search
            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>
  • 相关阅读:
    来自CSDN的精华网址
    图片及生成缩略图
    那位对DataGrid控熟悉?能否请教一下
    关于用.NET写邮件发送系统的问题
    JavaScript]几种常用的表单输入判断
    VB C# 语法对比图
    给上传的图片加上一个水印
    那位对DataGrid控熟悉?能否请教一下
    一句话木马的免杀(转)
    SOAP注入攻击详解(转)
  • 原文地址:https://www.cnblogs.com/zqm0924/p/13166465.html
Copyright © 2020-2023  润新知