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

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

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

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

<!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>
        function fun1(a,b) {
            var sum=a+b;
        console.log(sum);
            
        }
        function fun1(a,b,c) {
            var sum=a-b-c;
            console.log(sum);
            
        }
        fun1(1,2,3);
    </script>
</body>
</html>

老师，js是不是没有方法重载这个概念的？

WEB前端全系列/第二阶段：JavaScript编程模块/函数与对象 526楼

老师，我在做分辨率和缩放率的测试时，发现在div设置了背景图后，div内的文字本来是居中的，一般的分辨率也正常，但是在电脑的缩放率300%和分辨率变得很大，到达4000左右的时候，就会出现文字不居中了的情况了？这是为什么呢？背景图在设置为宽100%，高为auto，不就是自适应页面大小的，文字设置了center，我觉得就不会出现这种情况的。实在不明白了，麻烦老师了，正常图和问题图如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,
 maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>flex</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script
    <![endif]-->
    <script src="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"></script>
    <script src="https: //cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body{
            width: 100%;
            height: 100%;
            background: #0d3349;
        }
        body{
            min-width: 768px;
        }
        #div{
            width: 100%;
            height: 100%;
            background: #00c2de;
        }
        #div1{
            background: #bd362f;
            background-image:url(static/images/shouye-biaoti.png);
            background-size: 100% auto;
            background-repeat: no-repeat;
            width: 100%;
            height: 15%;
            margin-top: 1%;

        }

        h1{
            text-align: center;
            font-size: 0.7rem;
            font-weight: 700;

        }

    </style>
</head>
<script>
    function setRem() {
        var whdef = 100 / 1920
        var bodyWidth = document.body.clientWidth
        console.log(bodyWidth)
        console.log(window.screen.width)
        var rem = bodyWidth * whdef
        document.getElementsByTagName('html')[0].style.fontSize = rem + 'px'
    }
    window.addEventListener('load', setRem)
    window.addEventListener('resize', setRem)
</script>
<body  style="font-size: 60px">
<div id="div">
        <div id="div1" >
            <h1 >标题</h1>
        </div>
</div>
</body>
</html>

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

老师，您好，这个hash表，为什么存入object引用速度更快呢？在object里面它不应该是键名么，是怎么返回值的呢

WEB前端全系列/第二阶段：JavaScript编程模块/编程风格 528楼

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// var divs = document.getElementsByTagName("div");

// //给元素设置内容:innerHTML

// console.log(divs[1]);

// divs[1].innerHTML = "new box2";

// var allElements = document.getElementsByTagName('*');

// console.log(allElements);

var divs = document.getElementsByClassName("box");

console.log(divs);

divs[0].innerHTML = "new box1";

</script>

</body>

</html>

2023-02-08.png

老师这咋回事，咋还报错呢

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

老师，打印等腰三角形的练习，没有达到效果，请帮忙看一下，谢谢

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script>
 var alt="";
  for (var i=1;i<=5;i++){
      var blank="&nbsp";
      for (var j=1;j<=5;j++){//空白三角形
          blank=+"&nbsp" ;
      }
      var stars="";
      for (var m=1;m<=2*i-1;m++){
          stars+="*";
      }
      alt+=blank+stars+'<br/>';
  }
    document.write(alt);

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

效果图：

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

<script>
  function baozi(mianfen,zhurou,dacong) {
      console.log(mianfen);
      console.log(zhurou);
      console.log(dacong);
      return '包子';
  }
  baozi('面粉','猪肉','大葱');
  console.log('包子');
</script>

老师，我看下面有人提问说怎么不是包子，您说是没有打印出来，我就写了，为啥不对呢，怎么结果是包子，面粉，猪肉，大葱呢，是我加的不对吗，返回值的意思不太懂

WEB前端全系列/第二阶段：JavaScript编程模块/函数与对象 531楼

    <style>
        .div1{width: 200px;height: 200px;background-color: blue;}
        .div2{width: 100px;height: 100px;background-color: yellow;margin: 25px auto;}
    </style>
</head>
<body>
<div class="div1">div1
    <div class="div2">div2</div>
</div>
<script>
var div1=document.querySelector('.div1');
div1.attachEvent('onclick',function () {
    console.log('这是div1一次');

})
</script>

老师，我就是用IE浏览器的，为什么还报错呀，是因为版本的问题吗

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

老师您好，您演示的代码中，当点击button按钮时，没有正常变成黄色。我去问了Ai,我试了一下，是可以的。

这个是Ai提示的（在 clickBtn 方法里，this 指向的是 Tab 实例，并非被点击的按钮。所以，这里应该把 this.className = "active" 改成 btn.className = "active"。）

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

circlelis[i].idxx = i;这个.idxx是什么意思

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

open('http://www.baidu.com');
window.close();

我这里打开不了页面，试了其他的程序可以，就这两句不行

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

提交按钮的时候这样子如果我又两个按钮那不是按哪一个都能提交嘛？

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

var up = document.querySelector(".up");
var lis = up.querySelectorAll("li");
var down = document.querySelector(".down");
var divs = down.querySelectorAll("div");
up.onmouseenter = function(e){
    var li = e.target;
    var num=0;
    for(var i=0;i<lis.length;i++){
        lis[i].removeAttribute("class")
        divs[i].removeAttribute("class")
        if(lis[i]===li) num=i;
    }
    li.setAttribute("class","select");
    div[num].setAttribute("class","div-select")
}

我想问一下这样写为什么不对，我感觉逻辑没错啊，用class为up的来事件代理 li 当触摸具体的li时触发用 target来找出谁触发的先清空属性在单独加上

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有提示文字的滚动条</title>
    <style>
        div{
            width: 25px;
            height: 25px;
            border: 1px solid black;
            line-height: 25px;
            text-align: center;
            position: absolute;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="5">
<div></div>
<script>
    var input=document .querySelector("input");
    var div=document .querySelector("div");
    var flage=false;
    input.onmousemove=function () {
        if (flage){
            console .log('(x,y):('+event.clientX+','+event.clientY+')')
            div.style .left=event.clientX+'left';
        }
    }
    input.onmousedown=function () {
    flage=true;
    }
    input.onmouseup=function () {
    flage=false;
    }
</script>
</body>
</html>

老师为什么我的event也有横线？

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

<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <style>
8        #someDiv{
9            width: 100px;
10            height: 100px;
11            background: red;
12        }
13    </style>
14</head>
15<body>
16    <div id="someDiv"></div>
17    <script>
18        var div = document.getElementById('someDiv');
19        var opacity = 1;
20        var fader = setInterval(function() {
21          opacity -= 0.05;
22          if (opacity > 0) {
23            div.style.opacity = opacity;
24          } else {
25            clearInterval(fader);
26          }
27        }, 30);
28
29    </script>
30</body>
31</html>

老师，这是课堂上的例子，不是很理解为什么透明度降到0.05就停了，加了等号也一样

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

window.onload = function() {
    waterFlow();
    // 准备上拉加载的数据
    var dataImage = {
        data: [
            { src: "./images/1.jpeg" },
            { src: "./images/2.jpeg" },
            { src: "./images/3.jpeg" },
            { src: "./images/4.jpeg" },
            { src: "./images/5.jpeg" },
            { src: "./images/6.jpeg" },
            { src: "./images/7.jpeg" },
            { src: "./images/8.jpeg" },
            { src: "./images/9.jpeg" },
            { src: "./images/10.jpeg" },
            { src: "./images/11.jpg" },
        ]
    };
    window.onscroll = function() {
        if (checkReachBottom()) {
            console.log("hhh");
            var parentContainer = document.querySelector(".container");
            for (var i = 0; i < dataImage.data.length; i++) {
                var img = document.createElement("img");
                img.setAttribute("src", dataImage.data[i].src);
                var boximg = document.createElement("div");
                boximg.setAttribute("class", "boximg");
                boximg.appendChild(img);
                var box = document.createElement("div");
                box.setAttribute("class", "box");
                box.appendChild(boximg);
                parentContainer.appendChild(box);

            }
            // 新加载的数据要添加瀑布流效果
            waterFlow();
        }
    }
};
// 1. 动态设置页面左右居中
function waterFlow() {
    // 获取父级容器
    var parentContainer = document.querySelector(".container");
    // console.log(parentContainer);
    //获取所有子元素
    var allChild = document.querySelectorAll(".box");
    // console.log(allChild);
    //获取屏幕宽度
    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 = "absolute";
            allChild[i].style.top = minHeightOfCols + "px";
            allChild[i].style.left = allChild[minHeightOfIndex].offsetLeft + "px";
            // 高度合并
            colsHeightArr[minHeightOfIndex] = colsHeightArr[minHeightOfIndex] + allChild[i].offsetHeight;

        }
    }
};

// 3. 判断页面触底
// 逻辑：滚动高度+视口高度=文档总高度
// 业务：滚动高度+视口高度>文档总高度-100px（或者是最后一张图片的高度）
function checkReachBottom() {
    // 获取滚动高度
    var scrollHeight = document.documentElement.scrollTop;
    // 获取视口高度
    var pageHeight = document.documentElement.clientHeight;
    // 获取最后一个元素
    var allChild = document.querySelectorAll(".box");
    var lastChildTop = allChild[allChild.length - 1].offsetTop; //最后一个元素
    return lastChildTop < pageHeight + scrollHeight ? true : false;
}

老师，为什么我把网页缩小，上拉加载就能成功，网页最大化不行呢？

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

同学您好