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

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

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

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

时间排序推荐排序

我自己解决了,谢谢!!!原来是控制和页面输出的符号不一样

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

let alt="";

for (let i=1;i<=5 ; i++) {

let blank="";

for (let j=1;j<=5-i; j++) {

blank+=" ";

}

let stars="";

for (let m=1; m<=2*i-1; m++) {

stars+="*";

}

alt+=blank+stars+"\n";

}

console.log(alt);

document.write(alt+"<br/>");

</Script>

页面输出的效果出了br和n不一样,为什么第一距离页面输出和控制台的不一样呢

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

=;
(=;<=;++){=;
    (=;<=-;++){+=;
    }
    =;
    (=;<=*-;++){
        +=;
    }
    +=++;
}
.();
.()

爲什麽控制臺輸出和頁面輸出的格式不一樣呢？

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

1！+2！+3！+4！+5！求结果

老师我对这个题没有思路不知道该从哪下手，不懂阶乘

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带有hover样式的导航栏</title>
</head>
<body>
        <script>
            // 创建ul并设置样式
            var ul=document.createElement('ul');
            ul.style.cssText='padding: 0; list-style: none;';

            // for循环创建li并设置属性，并设置hover样式
            var titleArr=['旅游','美食','军事','科技','数码'];
            for (var i=0; i<titleArr.length; i++) {
                var li=document.createElement('li');
                li.style.cssText='width: 80px; height: 40px; line-height: 40px;\
                background-color: skyblue; display:inline-block; text-align: center;';
                li.innerHTML=titleArr[i];
                ul.appendChild(li);
                li.onmouseenter=function () {
                    this.style.cssText='background-color: yellow;';
                }
                li.onmouseleave=function () {
                    this.style.cssText='background-color: skyblue;';
                }
            }
            document.body.appendChild(ul);
        </script>
</body>
</html>

鼠标不放上去时，是第一张图的效果，放上去之后就变成2、3图的效果

QQ截图20201211095739.png

QQ截图20201211095751.png

QQ截图20201211095725.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决浏览器事件绑定兼容性问题</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: paleturquoise;
        }
        .div2 {
            margin: 25px auto;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="div1">div1
        <div class="div2">div2</div>
    </div>
<script>
    var div1=document.querySelector('.div1');
    var div2=document.querySelector('.div2');

    function func () {
        console.log('这是div');
    }
    // function func2 () {
    //     console.log('IE里的div');
    // }

    var cleanBug={
        add:function (ele,type,func) {
                if (ele.addEventListener) {
                    ele.addEventListener(type,func);
                }else {
                    ele.attachEvent('on'+type,func);
                }
            },
        remove:function (ele,type,func) {
                    if (ele.removeEventListener) {
                        ele.removeEventListener(type,func);
                    }else {
                        ele.detachEvent('on'+type,func);
                    }
                }    
            }

    cleanBug.add(div1,'click',func);
    // (div2,'click',func);
</script>    
</body>
</html>

老师，我问两个问题：

1、如果两个div是嵌套关系，我给外面的div敲击事件，里面的div点击它也会产生敲击事件？

2、我想给div1和div2各一个敲击事件且让他们打印的值不一样，代码该怎么修改？

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>html事件</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: paleturquoise;
        }
        .div2 {
            margin: 25px auto;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="div1" onclick="text1()">div1
        <div class="div2" onclick="text3(); text2()">div2</div>
    </div>
<script>
    var div1=document.querySelector('.div1');
    var div2=document.querySelector('.div2');
    function text1() {
        console.log('这是第一个函数');
    }
    function text2() {
        div2.setAttribute('onclick',null);
        console.log('这是第二个函数');
    }
    function text3() {
        div2.setAttribute('onclick',null);
        console.log('这是第三个函数');
    }
    // div2.setAttribute('onclick',null);
</script>
</body>
</html>

问题一：我在函数里面写了事件移除的代码，为啥点击div2还是执行了代码？

问题二，既然我们要删除事件了，为啥代码不写在外面呢？就像最后一行注释的代码。

QQ截图20201208222729.png

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

[23,12,43,25,45,66],求出最大值和最大值的下标

老师，求他的最大值下标为什么用indexOf呢，这不是查这个数第一次出现的位置吗，没有一样的数呀

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

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

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

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>
<body>
    <div></div>
    <h2>恐怖分子</h2>
    <button>开枪</button>
    <script>
        
        var h2=document.querySelector('h2');
        document.querySelector('button').onclick=function () {
            h2.style.cssText='color:red;text-align:center;';
            h2.innerHTML='恐怖分子已被击杀！！！！去死吧';
        }

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

老师，如果<h2>标签里面本来就有文本，innerHTML是直接把文本给替换了，而不是在原来文本后面继续添加，我想在原来的文本后面添加，该怎么操作呢？

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* ul {
            list-style: none;
        }
        li {
            display: inline-block; width: 100px; margin: 10px; text-align: center; background-color: skyblue; height: 30px; line-height: 30px;
        }
        a {
            text-decoration: none;
            color: orangered;
        }*/
        li:hover {
            background-color: palevioletred;
        }
        li:hover a {
            color: #ffffff;
        } 
    </style>
</head>
<body>
    <!-- <ul>
        <li><a href="#">丰田</a></li>
        <li><a href="#">本田</a></li>
        <li><a href="#">雷克萨斯</a></li>
        <li><a href="#">马自达</a></li>
    </ul> -->

    <script>
        var Arr=['丰田','本田','雷克萨斯','马自达','尼桑'];
        var ul=document.createElement('ul');
        var ul_style=document.createAttribute('style');
        ul_style.value='list-style: none;';
        ul.setAttributeNode(ul_style);
        for (var i=0; i<Arr.length; i++) {
            var li=document.createElement('li');
            var li_style=document.createAttribute('style');
            li_style.value='display: inline-block; width: 100px; margin: 10px; \
            text-align: center; background-color: skyblue; height: 30px; line-height: 30px;';
            li.setAttributeNode(li_style);
            var a=document.createElement('a');
            a.innerHTML=Arr[i];
            // var a_text=document.createTextNode(Arr[i]);
            var a_style=document.createAttribute('style');
            a_style.value='text-decoration: none; \
            color: orangered;';
            // a.appendChild(a_text);
            a.setAttributeNode(a_style);
            li.appendChild(a);
            ul.appendChild(li);
        }
        document.body.appendChild(ul);
    </script>
</body>
</html>

老师，我写出来之后，网页上确实显示了，但是hover失效了，而且a标签也没有小手了。

QQ截图20201205142438.png

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

<script>
var str='hello sxt! goodbye sxt';
while (str.indexOf('sxt')!=-1){
    var newStr='';
   newStr=str.replace('sxt','xxx');
}
console.log(newStr);
</script>

我这个怎么成死循环了呢，有什么不对吗，老师

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

<script>
  
    var string = 'xiaoMingTongXue';
    var str=string.lastIndexOf('i') ;
    document.write(str);
</script>

老师从末尾处往前数，i所占的位置不是6吗，怎么是5呢，这个末尾处指的是不是Ming呀

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我要成为像马斯克一样的人!</title>
</head>
<body>
    <script>
        function roll() {
        var docTitle=document.title;
        var titleArr=docTitle.split('');
        titleArr.push(titleArr.shift());
        var newTitle=titleArr.join('');
        document.title=newTitle;
    };
    setInterval ('roll()',500);
    
    </script>
</body>
</html>

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

<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编程模块/运算符_数据类型和流程循环语句 435楼

同学您好