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

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

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

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

时间排序推荐排序

var x = 10;

var y = 20;

console.log(x++ + y);//30

自增和自减：++在前先加后运算，++在后先运算后加？

那这个题就是10+20=30，这个先运算的话，为什么运算之后没有+1呢？这里有点搞不懂，有没有通俗易懂的理解呢？

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

for循环定位
// for(a=0;a<10;a++){
//     for(b=0;b<10;b++){
//         document.write("("+a+','+b+')')
//     }
//     document.write('<br>')
// }

// while循环定位

a=0;
while(a<10){
    a++;
    b=0;
    while(b<10){
        b++;
    }
    document.write("("+a+','+b+')')
}

老师怎么用while循环啊做了一下午

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

   <script>
        var arr =[1,41,51,1,21,1,51,15,347,232,41,123,1,]
        var unique = function (arr){
            return Array.from(new Set(arr));    
        }
        newArr= unique(arr);
        console.log(newArr);
        var Quicksort =function(arr){
            if(arr.length<=1){
                return arr;
            }
            var pivotIndex = Math.floor(arr.length/2);
            var pivot = arr.splice(pivotIndex,1)[0];
            var left =[];
            var right =[];
            for (var i =0;i<arr.length;i++){
                if(arr[i]<pivot){
                    left.push(arr[i]);
                }else{
                    right.push(arr[i]);
                }
            }
            return Quicksort(left).concat([pivot],Quicksort(right));
        }
        console.log(Quicksort(newArr)); 
        

    </script>


去重加排序

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

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

<style>

margin: 0;

padding: 0;

}

.container{

width: 850px;

height: 200px;

background-color: #FF8500;

margin: 200px auto;

}

.top{

width: 850px;

height: 50px;

background-color: #9a6e3a;

}

.bottom{

width: 850px;

height: 150px;

background-color: #6F6D6D;

line-height: 150px;

text-align: center;

}

ul{

list-style: none;

width: 800px;

height: 50px;

float: left;

}

.top li{

width: 100px;

height: 50px;

float: left;

color: #FFFFFF;

line-height: 50px;

text-align: center;

font-size: 14px;

border-right: 1px solid #4182FA;

box-sizing: border-box;

position: relative;

}

width: 50px;

height: 50px;

background-color:#FF8500;

float: right;

font-size: 20px;

text-align: center;

line-height: 50px;

color: #FFFFFF;

font-weight: 700;

}

.context li:nth-child(2){

display: none;

}

.context li:nth-child(3){

display: none;

}

.top li span{

position: absolute;

right: 0;

top: 0;

background-color:black;

width: 20px;

height: 20px;

line-height: 20px;

text-align: center;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

<div>

<ul>

<li>hello ~~测试1的内容</li>

<li>hello ~~测试2的内容</li>

<li>hello ~~测试3的内容</li>

</ul>

</div>

var that;

class Tab{

//实现tab栏的增查删改的功能

constructor(){

//获取元素

this.container = document.querySelector(".container");

this.lisTab = this.container.querySelector(".top").querySelectorAll("li"); //tab栏里面li

this.lisContext = this.container.querySelector(".context").querySelectorAll("li"); //内容里面的li

this.addBtn = this.container.querySelector("p");

this.topUl = this.container.querySelector(".top").querySelector("ul"); //获取top下的ul

that = this;

this.init()

}

//初始化方法给每个li添加绑定事件并设置自定义属性

init(){

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

this.lisTab[i].setAttribute("data-index",i);

this.lisTab[i].onclick = this.toggle;

}

//给添加按钮绑定事件

this.addBtn.onclick = this.add;

}

//1.切换功能

toggle(){

for(var j = 0; j < that.lisTab.length;j++){

that.lisTab[j].style.backgroundColor = "#9a6e3a";

that.lisContext[j].style.display = "none"

}

this.style.backgroundColor = "#4182FA"; //设置当前的这个li的背景

//这里不能使用this.lisContext因为函数里面的this指向调用者这里的this指向被点击li

that.lisContext[this.getAttribute("data-index")].style.display = "block";

}

//2.添加tab栏

add(){

var li = document.createElement("li");

that.topUl.appendChild(li);

li.innerHTML = "测试" + that.lisTab.length

}

//3.删除

remove(){}

//4.修改

modify(){}

}

new Tab(); //实例化一个tab对象

</script>

</body>

</html>

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

<!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模型 545楼

我怎么感觉这个选择题选B也可以

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

=[]=.().()

数组不是可以包含任何类型吗；数组方法在使用时都必须是字符串的形式吗？

=[]=.().()

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 850px;
            height: 200px;
            background-color: #FF8500;
            margin: 200px auto;
        }
        .top{
            width: 850px;
            height: 50px;
            background-color: #9a6e3a;
        }
        .bottom{
            width: 850px;
            height: 150px;
            background-color: #6F6D6D;
            line-height: 150px;
            text-align: center;
        }
        ul{
            list-style: none;
            width: 800px;
            height: 50px;
            float: left;
        }
        .top li{
            width: 100px;
            height: 50px;
            float: left;
            color: #FFFFFF;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            border-right: 1px solid #4182FA;
            box-sizing: border-box;
            position: relative;
        }
        p{
            width: 50px;
            height: 50px;
            background-color:#FF8500;
            float: right;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: #FFFFFF;
            font-weight: 700;
        }
        .context li:nth-child(2){
            display: none;
        }
        .context li:nth-child(3){
            display: none;
        }
        .top li span{
            position: absolute;
            right: 0;
            top: 0;
            background-color:black;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <ul>
                <li>测试1<span>x</span></li>
                <li>测试2<span>x</span></li>
                <li>测试3<span>x</span></li>
            </ul>
            <p>+</p>
        </div>
        <div>
            <ul>
                <li>hello ~~测试1的内容</li>
                <li>hello ~~测试2的内容</li>
                <li>hello ~~测试3的内容</li>
            </ul>
        </div>
    </div>
    <script>
        var that;
        class Tab{
            //实现tab栏的增查删改的功能
            constructor(){
                //获取元素
                this.container = document.querySelector(".container");
                this.lisTab = this.container.querySelector(".top").querySelectorAll("li"); //tab栏里面li
                this.lisContext = this.container.querySelector(".context").querySelectorAll("li"); //内容里面的li
                this.addBtn = this.container.querySelector("p");
                this.topUl = this.container.querySelector(".top").querySelector("ul"); //获取top下的ul
                that = this;
                this.init()

            }
            //初始化方法给每个li添加绑定事件并设置自定义属性
            init(){
                   for(var i = 0; i < this.lisTab.length; i++){
                        this.lisTab[i].setAttribute("data-index",i);
                        this.lisTab[i].onclick = this.toggle;
                }
                   //给添加按钮绑定事件
                    this.addBtn.onclick = this.add;
            }
            //1.切换功能
            toggle(){
                for(var j = 0; j < that.lisTab.length;j++){
                    that.lisTab[j].style.backgroundColor = "#9a6e3a";
                    that.lisContext[j].style.display = "none"
                }
                this.style.backgroundColor = "#4182FA"; //设置当前的这个li的背景
                //这里不能使用this.lisContext因为函数里面的this指向调用者这里的this指向被点击li
                that.lisContext[this.getAttribute("data-index")].style.display = "block";
            }
            //2.添加tab栏
            add(){
                var li = document.createElement("li");
                that.topUl.appendChild(li);
                li.innerHTML = "测试" + that.lisTab.length
                //appendChild(li)添加元素后元素的长度不会发生改变
            }
            //3.删除
            remove(){}
            //4.修改
            modify(){}
        }
        new Tab(); //实例化一个tab对象
    </script>
</body>
</html>

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

老师，如果这样写，console.log(console.log("文本")) console.log(a());这两种写法有问题吗？ a()表示调用这个函数了，结果是“文本”，在写这个console.loga(a()) ,就表示打印“文本”，为什么是结果运行了两遍。一遍为文本，一遍为unfined。我不知道哪里错了。

    <script>
   var  a=function( ){
      console.log("文本")
  }
  console.log(a);
  console.log(a());
  console.log(console.log("文本"))
  </script>

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

老师，能详细讲一下这里的定位吗？不明白

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>带有提示文字的滚动条</title>
    <style>
        div{
            width:25px;
            height:25px;
            border: 1px solid  black;
            line-height: 25px;
            text-align: center;
            position: absolute;
            display: none;
        }
    </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 flag=false;
  input.onmousedown=function(){
      var left= event.clientX;
      if(left>135){left=135;}
      if(left<14){left=14;}
      div.style.left=left+'px';
      div.innerHTML=input.value;
      div.style.display='block';
  }
</script>
</body>
</html>

老师按下后div里的数随机出现，按住移动鼠标div里的数不随鼠标的移动发生变化。

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

<!DOCTYPE html>

<head>

<style>

body {

height: 4000px;

}

</style>

</head>

<body>

function showScrollTop() {

var scrollTop = document.documentElement.scrollTop;

console.log(scrollTop);

}

function debounce(fn, delay) {

var timer = null;

return function() {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(fn, delay);

}

window.addEventListener('scroll', debounce(showScrollTop, 300));

</script>

</body>

</html>

闭包我是理解的，可是这个函数为什么不是从var timer=null开始执行？

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

老师，这个到底包不包括最后一个。下标从2-5，会不会返回5？

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

麻烦老师是否可以讲解一下冒泡排序，看不明白；

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //函数当做函数的返回值
    function info(){
        console.log("我是谁"+"会唱歌");
        function caiyi() {
            console.log('表演才艺')
        }
        return caiyi;
    }
   info();//打印的是  我是谁会唱歌
    
   console.log(info());//打印的是 我是谁会唱歌+函数caiyi();

   var result=info();
   result();//打印的是 我是谁会唱歌+表演才艺
</script>
</body>
</html>

有两个无问题请老师帮忙解答一下谢谢

问题1：

 info();和console.log(info());这两个打印出来的效果为什么不一样。
 
 问题2：
   return caiyi;返回的是什么，函数caiyia();还是函数里面的内容。

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

同学您好