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

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

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

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

时间排序推荐排序

//动态设置页面左右居中

/**

* 瀑布流效果：

* 1.第二行的图片第一张图片应该放在每列的高度最矮的图片下面

* 2.

window.onload = function () {

waterFlow();

// 准备上拉加载数据

var dataImage = {

data: [

{ src: "./imges/9.jpg" },

{ src: "./imges/1.jpg" },

{ src: "./imges/2.jpg" },

{ src: "./imges/3.jpg" },

{ src: "./imges/4.jpg" },

{ src: "./imges/5.jpg" },

{ src: "./imges/6.jpg" },

{ src: "./imges/7.jpg" },

{ src: "./imges/8.jpg" },

{ src: "./imges/10.jpg" },

]

}

window.onscroll = function () {

if (checkReachBottom()) {

console.log("触底了");

}

function waterFlow() {

///获取父级容器

var parentCotainer = 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;

//居中

parentCotainer.style.cssText = "width:" + rowsNum * childWidth + "px;margin:0 auto;";

getMinHeightOfCols(allChild, rowsNum);

}

waterFlow();

//2 .动态图片位置

function getMinHeightOfCols(allChild, rowsNum) {

//获取存储每列的高度

var colsHeightArr = [];

for (var i = 0; i < allChild.length; i++) {

//判断取出第一行图片，并获取高度，放入到数组中

if (i < rowsNum) {//当i大于最多数时自动跳到下一行

//获取当前图片高度

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.判断页面触底

1. 逻辑 : 滚动高度 +页面可视窗口高度；

2. 业务：滚动高度 +视口高度 > 文档总高度 - 最后一张图片高度

function checkReachBottom() {

//获取滚动高度

var scorllHeight = document.documentElement.scrollTop;

//获取视口高度

var pageHeight = document.documentElement.clientHeight;

//文档总高度

//获取最后一个元素

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

var lastChildBox = allChild[allChild.length - 1];//最后一个元素

var lastChildBoxTop = allChild[allChild.length - 1].offsetHeight;//最后一个元素距离顶部高度

return lastChildBoxTop < pageHeight + scorllHeight ? true : false;

}

老师我这个设置完后只要滑动就触发那个触底函数了

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

var arr = "错误这个失败";

if (arr=="错误") {

console.log("处理失败");

}

老师我如果想要这样，这个arr里面只要有“错误”字样，就输出处理失败，我该怎么写呢

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

这个通过控制按键火柴人移动，和释放技能的程序可以做吗

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

setInterval(function(){console.log('这是第1个定时器')},2000);
setInterval(function(){console.log('这是第2个定时器')},2000);
setInterval(function(){console.log('这是第3个定时器')},2000);
clearInterval(2);
clearInterval(1);

老师，我这代码清除 1 2 为啥输出的是 2 3 ，不是应该只输出3 吗

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

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>数据解析</title>
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" name="userName"></br>
        年龄：<input type="text" name="age"></br>
        性别：<input type="text" name="sex"></br>
        <input type="submit">
    </form>
    <button>解析数据</button>
    <script>
        var but=document.querySelector("button");
        function dataParse(outInfo) {
            var obj = {};
            var infoStr = outInfo;
            //先获取？后面的内容
            var realInfo = infoStr.slice(1);
            var proArr = realInfo.split("&");
            for (var i = 0; i < proArr.length; i++) {
                var tempArr = proArr[i].split("=");
                obj[tempArr[0]] = tempArr[1];
            }
            return obj;
        }
        but.onclick=function(){
            var dataObj=dataParse(document.location.search);
            console.log(dataObj);
            }
    </script>
</body>
</html>

老师 我想请问一下，为什么我的也是用英文的，但是在控制台输出的时候却是加密的样子呢？

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

<!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>
<style>
    div {
        width: 30px;
        height: 30px;
        background-color: pink;
        position: absolute;
        line-height: 15px;
        text-align: center;
    }
</style>

<body>
    <input type="range" min="0" max="100" value="50">
    <div id="box"></div>

    <script>

        var input = document.querySelector("input")
        var div = document.getElementById('box');
        var flag = false;
        input.onmousedown = function () {
            console.log("(x,y):(" + event.clientX + "," + event.clientY + ")");
        }

    </script>
</body>

</html>

老师，我是什么步骤错了，鼠标事件一直没效果，是没获取到input吗

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

<!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>
        document.write('hello<br/>world');
        document.write('<br/>');
        document.write('hello' + '<br/>' + 'world');

        alert('hello\nworld');
        alert('hello' + '\n' + 'world');

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

老师您好我想问一下代码里的<br/> 和\n 加不加引号有区别吗

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义右键菜单</title>
    <style>
        *{margin: 0;padding: 0}
      ul{
          list-style: none;
          width: 190px;
          height: 125px;
          background-color: darkgrey;
          position: absolute;
          display: none;
      }
        ul li{
            border: 1px solid skyblue;
            padding: 4px;
            cursor: pointer;
            transition: 0.5s;
        }
        ul li:hover{
            background-color: skyblue;
            color: #fff;
        }
    </style>
</head>
<body>

<ul>
    <li>我想尚学堂了!</li>
    <li>您真要离开此页面吗?</li>
    <li>去百度搜索页面中的内容</li>
    <li>输入内容后去百度搜索</li>
</ul>
<textarea cols="80" rows="20"></textarea>
<input type="text">
<script>
    let ul=document.querySelector('ul');
    //禁用系统的右键
    document.oncontextmenu=function (eve) {
        return false; //return false 表示禁用事件
    };
    //鼠标抬起出现鼠标右键菜单
    document.onmouseup=function (eve) {
        //eve.button 判断鼠标点的是那个按键
        if (eve.button==2){
            ul.style.display='inline-block';
            //设置鼠标的位置
            ul.style.left=eve.clientX+'px';
            ul.style.top=eve.clientY+'px';
        }else {
            ul.style.display='none';
        }

    }
    //点击某一个菜单选项时触发的事件(事件委托)
    ul.onmousedown=function (eve) {
        if (eve.target.innerHTML=='我想尚学堂了!'){
            alert('那就去吧!');
        }else if (eve.target.innerHTML=='您真要离开此页面吗?'){
            if (confirm('您真要离开此页面吗?')){
                window.close();
            }
        }else if (eve.target.innerHTML=='去百度搜索页面中的内容'){
            let result = document.getSelection().toString();
            open('https://www.baidu.com/s?wd='+result);
        }else {eve.target.innerHTML=='输入内容后去百度搜索'}{
            let value = document.querySelector('input').value;
            open('https://www.baidu.com/s?wd='+value);
        }
    }


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

怎么会取不到input框的值,去百度搜索呢,老师

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

        var timer1=null;
        var timer2=null;
        var timer3=null; 
        timer1=setInterval(function(){console.log('这是第1个定时器')},2000);
        timer2=setInterval(function(){console.log('这是第2个定时器')},2000);
        timer3=setInterval(function(){console.log('这是第3个定时器')},2000);
        console.log(timer1);
        console.log(timer2);
        console.log(timer3) 
        //clearInterval(2);
        clearInterval(timer1);

还有，按老师的代码，为啥视频中先输出的是123 ，而我这先输出的是234 ，这是什么情况

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

老师，为啥ul采用事件委托时用 onclick，第三个效果就没法实现呢？

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

 function yangcolor(){
            var str="0123456789abcdef";//定义取值范围
            var color="#";
            for(var i=0;i<6;i++){
               var num=Math.floor(Math.random()*str.length);
               color+=str[num]
            }
            console.log(color);
        }

老师，为啥我运行不出来？

WEB前端全系列/第二阶段：JavaScript编程模块/Math与Date 431楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    li{background-color: skyblue}
    li:hover{
        background-color: #ff6700;
    }
</style>
<body>
    <button id="button1">获取元素</button>
    <button id="button2">设置元素</button>
    <button id="button3">删除元素</button>

<script>
    var div1=document.createElement('div');
    div1.style.cssText='width:100%;position:relative;background:red;';
    var div2=document.createElement('div');
    div2.style.cssText='width:80%;position: absolute;left: 50%;transform: translateX(-50%)';
    document.body.appendChild(div1);
    var arr=['首页','军事','科技','新闻','游戏'];
    var ul=document.createElement('ul');
    ul.style.cssText='margin:0;padding:0;list-style;text-align: center;background:pink;';
    for (var i=0;i<arr.length;i++){
        var li=document.createElement('li');
        li.style.cssText='display: inline-block;  width: 100px;height: 30px;  line-height: 30px;\
                        text-align: center;  margin-left:5px';
        var a=document.createElement('a');
        a.style.cssText=' text-decoration: none;color: white;';
        a.innerHTML=arr[i];
        li.appendChild(a);
        ul.appendChild(li);
    }
    div2.appendChild(ul);
    div1.appendChild(div2);
    document.body.appendChild(div1);

    var button=document.querySelector('div');
    document.querySelector('#button1').onclick=function () {
       console.log( button.getAttribute('style'));
    };
    document.querySelector('#button2').onclick=function () {
        button.setAttribute('style','display:none');
    };
    document.querySelector('#button3').onclick=function () {
        button.removeAttribute('style');
    }
</script>

</body>
</html>

老师为啥我div1颜色设置不出来

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

function count() {

let arr = [];

for(let i = 0;i < 3;i++) {

arr.push(function() {

return i*i;

})

}

return arr

}

let a = count();

for(let i = 0;i < 3;i++) {

console.log(a[i]());

}

</script>

为什么这样调用后出来的结果是0，1，4，而不是视频中那样所有结果都一样呢？

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

这个lis[i].onmouseleave写在里面和外面有什么区别呢？我觉得因为用到了i所以应该写在里面但是写在外面好像也没问题。

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

<script>

    var x=1;
    var y=1;
    document.write(x+"</br>");
    document.write(y+"</br>");
    for (var z=1;z<10;z++){
        var i=x;
        var x=y;
        var y=i+x;
        z++;
        document.write(y+"</br>")
    }

</script>

老师，这里的z为什么不是小于6？

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

同学您好