会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132647个问题
WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 256楼

瀑布流布局.rar

获取不到图片的高度,只能获取到第一张,其他的获取到的都是10,不知道是什么原因,麻烦老师帮看一下

微信截图_20211227180256.png

微信截图_20211227181220.png微信截图_20211227180125.png微信截图_20211227181136.png


WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 257楼
WEB前端全系列/第二阶段:JavaScript编程模块/字符串与数组 259楼
WEB前端全系列/第二阶段:JavaScript编程模块/运算符_数据类型和流程循环语句 260楼
WEB前端全系列/第二阶段:JavaScript编程模块/运算符_数据类型和流程循环语句 261楼

老师 原型的本身是类??

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*            
          描述:原型prototype是js为函数提供的一个对象型属性
              说明:向原型中添加的方法和属性能能够被类的对象共同拥有
               本质:原型的存在是给类的对象添加公有属性
              当访问的属性没有在类的对象中没找到,到Car的原型找
              作用:节约内存空间,让类的对象享有这个属性



              原型的属性
              1.constructor  构造器  指向类的本身
              2._proto_   指向原型本身,提供给本类创建的对象使用
        */
        function Car(){}
        Car.prototype.lun1="左前轮";
        var car1=new Car();
        console.log(car1.lun1);

        function People(hobby){
            //私有属性
            var secret='梦';
           
            // 特权函数,利用闭包实现;读取私有属性
            this.getSecret=function(){
                return secret
            }
            // 公共属性,每个类得对象共同拥有,但属性值不一样;
            this.hobby=hobby;
        }
        //每个类的对象共有的属性,且属性值一样,放在原型上,节省内存空间
        People.prototype.eyes=2
        function CarOne(){

        }
        console.log(CarOne.prototype);
        var CarOne1=new CarOne();
        console.log(CarOne1.__proto__);

    </script>
</body>
</html>

image.png

WEB前端全系列/第二阶段:JavaScript编程模块/正则对象 262楼
WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 265楼
WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 266楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22</title>
    <style>
        .div1{
            width: 400px;
            height: 400px;
            background-color: orange;
            position: relative;
        }
        .div2{
            width: 100px;
            height: 100px;
            /* padding: 150px; */
            position: absolute;
            left:150px;
            top: 150px;
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>

    <script>
        var div1=document.querySelector('.div1');
        var div2=document.querySelector('.div2');
function test1(){
    console.log('div1事件发生在'+event.currentTarget.className);
    console.log('div1事件触发者'+event.target.className);
}
function test2(){
    console.log('div2事件发生在'+event.currentTarget.className);
    console.log('div2事件触发者'+event.target.className);
}
div1.addEventListener('click',test1,true);
div2.addEventListener('click',test2,true)

    </script>
</body>
</html>

老师为什么不能改成捕获传递  我点击大的div1,test2()方法第一次就可被调用   再刷新后点击反应了?

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 267楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 2000px;
       background: linear-gradient('skyblue','pink');
       
        }
    </style>
</head>
<body>
    <span>密码:</span><input type="password"><span class="passwordSpan"></span>
   
    <script>
        var password=document.querySelector('input');
        var passwordSpan=document.querySelector('.passwordSpan');
        var flag=false;
       
        // document.body.onkeydown=function(){
        //     if(event.keyCode==20){
        //         flag=!flag;
        //     }
        //     if(flag){
        //         passwordSpan.innerHTML='现在是大写';
               
        //     }else{
        //      passwordSpan.innerHTML='现在是小写'
        //     }
        // }
        // document.body.onkeydown=function(){
        //     if(event.keyCode==40){
        //         window.onscroll=function(){
        //              var top=document.body.scrollTop||document.documentElement.scrollTop;
                   
        //         top=top-500;
        //         document.body.scrollTop=top;
        //         document.documentElement.scrollTop
        //         console.log(document.body.scrollTop||document.documentElement.scrollTop);
        //         }
               
        //     }
        //     if(event.keyCode==38){
        //         window.onscroll=function(){
        //              var top=document.body.scrollTop||document.documentElement.scrollTop;
        //         top=top+500;
        //         document.body.scrollTop=top;
        //         document.documentElement.scrollTop;
        //         console.log(document.body.scrollTop||document.documentElement.scrollTop);
        //         }
               
        //         }
        //     }
      window.onscroll=function(){
        console.log("top"+document.documentElement.scrollTop||document.body.scrollTop);
      }

        window.onkeydown=function(){
            console.log(event.keyCode);
            if(event.keyCode==65){
                var top=document.documentElement.scrollTop||document.body.scrollTop;
                top-=100;
                document.documentElement.scrollTop=top;

                document.body.scrollTop=top;
             
            }
            if(event.keyCode==68){
                var top=document.documentElement.scrollTop||document.body.scrollTop;
                top+=100;
                document.documentElement.scrollTop=top;

                document.body.scrollTop=top;
             
            }
        }
    </script>
</body>
</html>

老师 系统自带箭头滚动功能怎么搞 我设置了上箭头向上滚动200  还是2 来滚动

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 268楼
WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 269楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           .div1{
            background-color: blue;
            width: 500px;
            height: 500px;
        }
        .div2{
            background-color:pink;
            width: 200px;
            height: 200px;
            margin: 150px;
        }
    </style>
</head>
<body>
    <div class="div1">
        div1
        <div class="div2">div2</div>
    </div>
    <!-- 鼠标事件
    1.单击:click
    2.双击:dblclick
    3.鼠标按时:mousedown
    4.鼠标抬起:mouseup
    5.鼠标移动时:mousemove

    6鼠标移入时候/移出事:(不冒泡) mouseenter/mouseleave
     7鼠标移入时候/移出事:(不冒泡) mouseover/mouseout

    -->
    <script>
    var div1=document.getElementsByClassName('div1');
    var div2=document.getElementsByClassName('div2');
    function test1() {
        console.log('这是div1');
       
    }
    function test2() {
        console.log('这是div2');
       
    }
    var EVe={
       AA: function(ele,event,fun,bool){
         if(ele.addEventListener){
           ele.addEventListener(event,fun,bool)
         }else{
                ele.attaEvent('on'+event,fun,bool)
         }
       }
    }
      EVe.AA(div1,'click',test1,false)
    </script>
</body>
</html>

啥问题

image.png

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 270楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637