有效沟通问答-【官方】百战程序员_IT在线教育培训机构

会员可以在此提问，百战程序员老师有问必答

对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面

截止目前，同学们一共提了 132647个问题

/* 
    瀑布流效果
        1、第二行的第一张图片，应该放在每列的高度最矮的图片下面
 */
// 1、动态设置页面居中
window.onload = function(){
    waterFlow();
}


function waterFlow(){
    // 获取父级容器
    var parentContainer = document.getElementById("container");
    // 获取子元素
    var allChild = document.getElementsByClassName("box");
    // 获取屏幕
    var screenWidth = document.documentElement.clientWidth;
    // 获取一个图片容器的宽度
    var childWidth = allChild[0].offsetWidth;
    // 计算屏幕水平方向最多能摆放的图片个数
    var rowsNum = Math.floor(screenWidth / childWidth) - 1; // 向下取整，预留一张作为空白区
    // 让页面左右居中
    parentContainer.style.cssText = "width:" + rowsNum * childWidth + "px;margin:0 auto;";

    getMinHeightOfCols(allChild,rowsNum);
}

// 2、动态设置图片位置

function getMinHeightOfCols(allChild,rowsNum){
    // 数组存储每列的高度
    var colsHeightArr = [];
    for(var i = 0;i < allChild.length;i++){
        // 判断取出第一行的图片，获取图片对应的高度，放入到数组中
        if(i < rowsNum){    // i=6
            // 获取当前图片的高度
            colsHeightArr[i] = allChild[i].offsetHeight;
        }else{
            // 获取一列高度最小的值
            var minHeightOfCols = Math.min.apply(null,colsHeightArr);
            // 获取最小值对应的下标（（位置）
            var minHeightOfIndex = colsHeightArr.indexOf(minHeightOfCols);
            // 摆放第二张图片的位置 
            allChild[i].style.position = "absolate";
            allChild[i].style.top = minHeightOfCols+"px";
            allChild[i].style.left = allChild[minHeightOfIndex].offsetLeft+"px";

            //高度的合并
            colsHeightArr[minHeightOfIndex]=colsHeightArr[minHeightOfIndex]+allChild[i].offsetHeight;
        }
    }

}

找了好几遍，不知道为什么，总是有那个空隙？

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 136楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
var season=prompt('请输入十以下的数字');
  switch (season) {
    case '1'||'2'||'3':{
      alert('winter');
    }
      break;
    case '5'||'4':{
      alert('spring');
    }
      break;
    case '6'||'7'||'8':{
      alert('summer');
    }
      break;
    case '9'||'10'||'0':{
      alert('automn');
    }
      break;
    default:{
      alert('meiyou');
    }

  }
</script>

</body>
</html>

老师用||或不可以进行选择吗v

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 137楼

一元二元运算符是怎么区分的？

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 138楼

视频17.02的地方如果用：

window.onscroll = function () {
            var result = debounce(backTop, 300)();
        }

的写法防抖依然是失效的

如果想用自调用函数实现防抖是不是只能将debounce的方法直接绑定在onscroll事件上而不是调用debouce函数？

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

<script>
    //打印出1，1，2，3，5，8，13
    var num1=1;
    var num2=1;
    document.write(num1+"<br/>");
    document.write(num2+"<br/>");
    var i=0;
    while (i<5){
        //把num1的值先保存起来，如果不保存的话，就会每次都是和num1=1相加
        var temp=num1;
        //第二次的第一个值是第一次的第二个值  新的num1是上一次的num2
        num1=num2;
        //新的num2是上一次的(num1+temp)
        num2=temp+num2;
        document.write(num2+"<br/>");
        i++;
    }

</script>

老师我想着，把num1赋值给temp，到最后，不是也是num1=1和其他相加吗，老师，我不太懂while循环里面的

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 140楼

var i=1;
        while(i<=100) {
            document.write(i+"<br/>");
            i=i+1;
        }

老师，document和console有啥区别？这俩个应该什么时候用？

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 141楼

求助：老师，为什么我打印出来第一个是undefined，第二个虽然也是undefined，但是展开从里边的prototype是能够找到2的。。

<script>
    function People(name,ability,eyesNum){
        this.name = name;
        this.ability = ability;
        var secret = '我爱你';
        this.getSecret = function(){
            console.log(secret);
        };
        this.eyesNum = eyesNum;
    }
    People.prototype.eyesNum = 2;
    var shiwentao = new People('施文涛',function(){
        console.log('脱发');
    });
    var huojinxing = new People('霍金星',function(){
        console.log('cute');
    });
    console.log(shiwentao.eyesNum);
    console.log(huojinxing);
</script>

WEB前端全系列/第二阶段：JavaScript编程模块/正则对象 142楼

是不是可以这么理解：

如果构造函数被定义在局部作用域，外界无法直接重写构造函数或者原型函数，只能通过调用局部作用域暴露出来的实例化对象的constructor方法来重新指向构造函数和原型。

如果我的理解准确的话，那我认为文档中提到的Person.prototype.costructor确实没有用处，因为不能直接访问构造函数也就意味着不能直接访问到原型，因此想要重写构造函数的原型方法只能通过调用实例的constructor来实现也就是person.constructor.prototype

我认为在文档中标明constructor是实例化对象和原型都有的属性比较好

WEB前端全系列/第二阶段：JavaScript编程模块/面向对象编程 143楼

老师，对于document.body.clientWidth/document.body.clientHeight

document.body.offsetWidth/document.body.offsetHeight

document.body.scrollWidth/document.body.scrollHeight

document.body.scrollTop/document.body.scrollLeft

这几个有点不太明白，我理解是offsetWidth=clientWidth+border；可是在变网页窗口的时候，offsetWidth比clientWidth小。不知道为什么我这么写之后，网页就不显示div了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    </style>
<body style="height: 1000px">
<div style="background: #0d3349;width: 300px;height: 2000px"></div>
</body>
    <script type="text/javascript">
        window.onload=function(){
            document.write("网页可见区域宽："+document.body.clientWidth+"</br>");
            document.write("网页可见区域高client："+document.body.clientHeight+"</br>");
            document.write("网页可见区域宽："+document.body.offsetWidth+"</br>");
            document.write("网页可见区域高offset："+document.body.offsetHeight+"</br>");
            document.write("网页正文全文宽："+document.body.scrollWidth);
            document.write("网页正文全文高："+document.body.scrollHeight);
            document.write("网页被卷去的高："+document.body.scrollTop);
            document.write("网页被卷去的左："+document.body.scrollLeft);
            document.write("网页正文部分上："+window.screenTop);
            document.write("网页正文部分左："+window.screenLeft);
            document.write("网页正文部分上："+window.screenX);
            document.write("网页正文部分左："+window.screenY);
            document.write("屏幕分辨率的高："+window.screen.height);
            document.write("屏幕分辨率的宽："+window.screen.width);
            document.write("屏幕可用工作区高度："+window.screen.availHeight);
            document.write("屏幕可用工作区宽度："+window.screen.availWidth);
            document.write("浏览器高度："+window.outerHeight+"</br>");
            document.write("浏览器宽度："+window.outerWidth+"</br>");
            document.write("浏览器内页面可用高度："+window.innerHeight+"</br>");
            document.write("浏览器内页面可用宽度："+window.innerWidth);
        }
    </script>
</head>
</html>

WEB前端全系列/第二阶段：JavaScript编程模块/面向对象编程 144楼

item没有赋值咋知道item是否等于arr.shift()

WEB前端全系列/第二阶段：JavaScript编程模块/字符串与数组 145楼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <script type="text/javaScript" src="./hello.js"></script>
    <script>

    var num = 3;
    if (num === 3) {
        console.log(num++);//3
        var result = num++;
        console.log(result)//4

    }


    </script>


</body>

</html>

老师，您好，请问一下，为什么这个语句，++在后也能重新赋值，结果为4的？

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 146楼

<!DOCTYPE html>
<html>
<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>
     .boderRed{
         border: 2px solid red;
     }
     .boderGreen{
         border: 2px solid green;
     }
     .colorRed{
         color: red;
     }
     .colorGreen{
         color: green;
     }
    </style>
</head>
<body>
    <form action="" method="post">
      <span class="">用户：</span>
      <input type="text">
      <span></span>
    <button>提交</button>
    </form>
    <script>
var input=document.querySelector('.username');
var span=document.querySelector('.usernameSpan');
var btn=document.querySelector('button');
//自动获取焦点
input.focus();
input.onblur=function(){
    if(input.value.length==11){
    this.className='boderGreen';
    span.className='colorGreen';
    span.innerHTML='正确';
    }else{
        this.className='boderRed';
    span.className='colorRedn';
    span.innerHTML='错误';
   
    }
}
btn.onclick=function(){
   input.focus();
   input.blur();
   input.focus();
   
}
    </script>
</body>
</html>

老师为啥错误的时候不会再获取焦点了？

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

老师，我这怎么回事，404

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

检查了几遍还是这样

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 149楼

老师，我不明白为什么title的类型为字符串呢，其他的都为对象。

<div  id="d"  style="width: 100px;height: 100px;background: red">文本</div>

   <script>
    
   	var t=document.getElementById("d");
   	console.log(typeof(t));
   	 console.log(typeof(document.title));
   	 console.log(typeof(document.head));
   	  console.log(typeof(document.body));

  </script>

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 150楼

同学您好