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

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

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

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

<!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>
        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2{
            width:60px ;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
 <div class="div1">
     <div class="div2"></div>
 </div>
  <script>function fun1 () {
    console.log('div1');
    
}
function fun2 () {
         console.log('div2');}
      var div1=document.querySelector('.div1');
      var div2=document.querySelector('.div2');
      div1.addEventListener('click',fun1,true)
     div2.addEventListener('click',fun2,true)
    </script>
</body>
</html>

老师我哪里写错了怎么用不了普抓机制

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js_名称解释_变量</title>
</head>
<body>
<!-- script标签表示脚本，可在标签中写js代码。也可通过src属性引入外部脚本文件，注意：可以写在html的任意位置，但一般写在body的最后。1.语句，描述：以分号结尾的表达式。2.变量，描述：表示可以发生改变的量，语法：变量一般采用var来声明，举例var num=10； -->
    <script>


        var a=prompt("请输入您的成绩：");
        if(a>60){
            document.write("第五名！");
        }else if(a>70){
            document.write("第四名！");
        }else if(a>80){
            document.write("第三名！");
        }else if(a>90){
            document.write("第二名！");
        }else if(a=100){
            document.write("第一名！");
        }else{
            document.write("不及格！");
        }
    </script>
</body>
</html>

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

 var arr =[21,21,44,54,89,123,77,77];
        var arr1 =[21,21,44,54,89,123,77,77];
        var arr2 =[21,21,44,54,89,123,77,77];

        //1.splice方法删除
        function unique(arr){
            var len=arr.length;
            for(var i=0;i<len;i++){
                for(var j=i+1;j<len;j++){
                    if(arr[i]==arr[j]){
                            arr.splice(j,1);
                            j--;
                            len--;//减少循环次数
                    }
                }
            }
            return arr;
        }
        unique(arr);
        console.log("splice去重后的数组:"+arr);
        
        //2.indexOf方法(不存在的push到新数组中)
        function unique1(arr){
            var resultArr=[];
            for(var i=0;i<arr.length;i++){
                if(resultArr.indexOf(arr[i])==-1){
                    resultArr.push(arr[i]);
                }
            }
            return resultArr;
        }
        unique1(arr1);
        console.log("indexOf方法去重后的数组:"+arr1);

如果直接console.log(unique1(arr1))结果是对的，可我这么写，第一个方法出来结果是对的，第二个为什么还是原数组呢，不知道哪里出问题了

WEB前端全系列/第二阶段：JavaScript编程模块/算法与数据 423楼

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

/**

* 瀑布流效果：

* 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模型 424楼

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

if (arr=="错误") {

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

}

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

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

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

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

this 指向

* 1.事件中的this指向当前DOM元素

* 2.函数内部this的指向由函数的调用方式决定

* 3.定时器中的this永远指向全局，独立调用

* 4.call apply bind 可以强行改变this指向

* 对比

* 区别

* 重点

10分48秒的那段，为什么输出的是20，因为
call( ) 内部必填的是一个this指向还有后面再加入的是参数，老师写的是 10,20，30 这里，把10当作this指向，但是这个会被call忽略，然后就是拿到了剩余的参数 20和30，

在进行20和30的对比，所以输出20

想要对比102030，就写 call( null或者undefined ,10,20,30 )

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

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编程模块/面向对象编程 428楼

<!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编程模块/面向对象编程 429楼

<!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) 430楼

<!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编程模块/字符串与数组 431楼

<!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编程模块/面向对象编程 432楼

        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编程模块/面向对象编程 433楼

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

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

 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 435楼

同学您好