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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义左键菜单案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            background: #9f9f9f;
            min-width: 250px;
            display: inline-block;
            position: absolute;
            display: none;
        }
        ul li{
            height: 30px;
            line-height: 30px;
            padding: 5px 20px;
            cursor: pointer;
            transition: 0.3s;
        }
        ul li:hover{
            background: #b3d4fc;
            color: #ffffff;
        }
    </style>
</head>
<body>
<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>去百度搜索页面中选中的内容</li>
</ul>
<textarea cols="80" rows="30"></textarea>
<script>
    var ul =document.querySelector("ul");
    //禁用右键菜单
    document.oncontextmenu=function (eve) {
        return false;
    };
    document.onmouseup=function (eve) {
        //判断鼠标用的哪个按钮
        // 0 左键 1 滑轮 2 右键
        if(eve.button==2){
            ul.style.display="inline-block";
            //设置鼠标点击的位置
            ul.style.left=eve.clientX+"px";
            ul.style.right=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=='去百度搜索页面中选中的内容'){
            var resukt=document.getSelection().toString();
            window.open('http://www.baidu.com/s?wd='+resukt);
        }else{
            var result= prompt('输入内容然后去百度搜索');
            window.open('http://www.baidu.com/s?wd='+result);
        }
    }
</script>
</body>
</html>

这种应该没有错吧，感觉和视频里有点不一样

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

最后的练习第2道题的打印和无打印什么意思呢？

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

<!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>
div{ width: 50px;
height: 50px;
background-color: pink;
position: absolute;
top: 50px;

}
</style>
</head>
<body>
<div></div>
<input type="range" max="100" min="0" value="0" >
<script>
var div=document.querySelector('div');
var input=document.querySelector('input');


input.onmousedown=function(){ input.onmousemove=function(){
var move=event.clientX;
div.style.left=move+'px';
console.log(event.clientX);
}

}






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

老师。鼠标移动这个事件在没触发mousedown事件也能触发的吗

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

<!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>
    <button>跨域传输</button>
    <script>
        //如果想要另一个页面的信息，必须先加载这个页面
        var btn=document.querySelector("button");
        btn.onclick=function(){
            var iframe=document.createElement("iframe");
            iframe.src="02跨域传输.html";//加载保留信息的页面
            iframe.style.display="none";
            document.body.appendChild(iframe);
            //当iframe加载完毕，意味着window.name的内容已经被赋予完毕
            iframe.onload=function(eve){
                var iframeWindow= eve.target.contentWindow.name;
                console.log(iframeWindow);//打印的是放在name里面的全部字符串
                eval(iframeWindow);//将字符串解析成代码使用
                console.log(num);//这里就可以用其他界面的内容
            }
        }
    </script>
</body>
</html>

老师这个是什么问题

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

最后的练习第2道题的打印和无打印什么意思呢？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div class="div1">div1</div>
    <div id="div2">div2</div>
</div>
<button id="but">点我</button>
<script>
    var div=document.querySelector('div');
    var div1=document.querySelector('.div1');
    var div2=document.querySelector('#div2');
    var but=document.querySelector('button');

    but.onclick=function () {
      var span=document.createElement('span');
      span.innerHTML='SPAN';
      span.style.color='red';
      div.replaceChild(span,div2);
    }
</script>
</body>
</html>

老师，控制台报错，哪里错了？

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

这两段代码里 function里的num都没加var ，不都是全局变量了吗，为啥下面console.log（num）就打印出来100，上面就打印出来10呢？不太明白，麻烦老师详细讲解一下

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      background-color: #eaffea;
      list-style: none;
      font-size: 14px;
      width: 150px;
      display: block;
      position: relative;
      cursor: pointer;
      /*把鼠标变成小手*/
      display: none;
      z-index: 999;
    }
    li{
      padding-left: 20px;
      line-height: 25px;
    }
    li:hover{
      background-color: #fffdef;

    }
  </style>
</head>

<body>
<ul>
  <li>查看网页源代码</li>
  <li>刷新网页（F5）</li>
  <li>离开网页</li>
  <li>跳转到百度</li>
  <li>根据文本框内容搜索</li>
  <li>输入内容搜索</li>
</ul>
<div style="margin: 20px auto;width: 500px;position: relative">
  <span>搜索内容：</span><input type="text" style="width: 300px;">
</div>
<script>
  window.onload=function(){
    var ul=document.querySelector('ul');
    //系统右键菜单禁用事件【contextmenu】
    document.oncontextmenu = function (eve) {
      return false;
    };//return false表示事件禁用

    document.onmouseup=function (eve) {
      // console.log(eve.button);//查看鼠标哪个键被点击 左键0 滑轮1 右键2
      if (eve.button==2){
        ul.style.display='block';
        ul.style.left=event.clientX+'px';
        ul.style.top=event.clientY+'px';
      }else {
        ul.style.display='none';
      }
    }
    //事件委托
    ul.onmousedown=function (eve) {
      // console.log(eve.target.innerHTML);//根据这个来判断是哪一个li
      if (eve.button==2||eve.button==0){
        if (eve.target.innerHTML=='查看网页源代码'){
          alert('我不告诉你！！！');
          ul.style.display='none';
        } else if (eve.target.innerHTML=='刷新网页（F5）'){
          window.location.reload();
        } else if (eve.target.innerHTML=='离开网页'){
          var a=confirm('Do you sure 要离开网页？？？？？');
          // console.log(a);
          if (a){
            window.close();
          } else {
            ul.style.display='none';
          }
        }else if (eve.target.innerHTML=='跳转到百度'){
          window.location.replace('http://www.baidu.com');
        }else if (eve.target.innerHTML=='根据文本框内容搜索'){
          var resukt=document.getSelection().toString();
          window.open('http://www.baidu.com/s?wd='+resukt);
        }
      }
    }
  }

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

老师，当点击鼠标右键的时候，ul的display属性取值为block或inline-block ，都会使得我本来设置的文本框向下移动；请问老师怎么设置能够使文本框在ul出现时依旧保持之前的位置

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

我已经跳转到百度官网，为什么下面获取域名不是"www.baidu.com",后面的if语句也无法执行

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

function getData() {

//获取父级元素

var parentData = document.getElementsByClassName("content");

//获取所有的子元素

var allChild = document.getElementById("box1");

//获取屏幕的宽度

var scereenWidth = document.documentElement.clientWidth;

//获取一张图片宽度

var childwidth = allChild[0].offsetWidth;

//计算水平方向能摆放的个数

var rowNum = Math.floor(scereenWidth / childwidth);

console.log(rowNum);

}

getData();

老师控制台一直报错是怎么回事

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="div1">
    <div class="div2">
        这是div2
    </div>
    <button>点我</button>
</div>
    <script>
        /*node方法
        1.appendChild()
        node1.appendChild(node2)  将节点2插入在node1最后面
        注意 js创建的节点对象之间没有文本对象
        2、hasChildNodes()  此方法返回一个布尔值  是否有子节点
        3、cloneNode（布尔值） 克隆节点，布尔值如果true 则克隆子节点 如果为flase 则不克隆子节点
          克隆节点不会克隆原节点的事件 但是会复制属性和内容   

        */
     var div1=document.querySelector('.div1');
     var div3=document.createElement('div');
     var div4=document.createElement('div');
     var but=document.querySelector('button');
     div3.innerHTML='lalal';
     div1.appendChild(div3);
     div1.appendChild(div4)
     console.log(div1.childNodes);
     var num=1;
     var str='这是第'+num+'克隆';
     but.onclick=function(){
        var clonebut=but.cloneNode(true);
       clonebut.innerHTML=str;
         div1.appendChild(clonebut);
      num+=1;
         console.log(num);
     }

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

老师这个事件里面的num累加怎恶保存到全局变量num

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

<!DOCTYPE html>
<html lang="en">
<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 f(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 infoStr=f(document.location.search);
        console.log(infoStr);

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

这种应该没有什么吧

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

body>
    <div id="root">
        <button id="btu">
            <p id="text">内容</p>
        </button>
    </div>
    <script>
        var root=document.getElementById("root");
        var btu=document.getElementById("btu");
        var text=document.getElementById("text");
        root.onclick=function(){
            console.log("div");
        }
        btu.onclick=function(){
            console.log("btu");
        }
        text.onclick=function(){
            console.log("text");
        }
    </script>

老师，为啥第一段要打印div，不能打印root吗？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
</head>
<body>
<script>
    function Person(name,age,height,a) {
     this.userName=name;
     this.userAge=age;
     this.userHeight=height;
     this.userAbilitty=a;
    }
    var beixi=newPerson=("贾先生","18","60",function () {console.log("敲代码");})
    var shishi=newPerson=("刘诗诗","16","40",function () {console.log("2");})
    console.log(beixi);
    console.log(shishi);
</script>
</body>
</html>

老师我这个怎么是这样的怎么只出来最后一项内容呢？

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

老师好，控制提示框移动范围时，使用“if else”可以实现，但使用“switch”时没有效果。

应该是我的switch语句没写对（第35行代码），怎么写才正确？求指导，谢谢。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
<style>
    input{
        width: 300px;
        margin: 100px 600px 0px;
    }
    #tips{
        width: 30px;
        height: 25px;
        margin: 0px 750px;
        padding: 0;
        font-size: 18px;
        text-align: center;
        border: 1px solid aqua;
        position: absolute;
        display: none;
    }
</style>
</head>
<body>
    <input type="range" min="0" max="100" value="50">
    <div id="tips"></div>
<script>
    var input=document.querySelector('input');
    var tips=document.getElementById('tips');
    function move(){
        input.onmousemove=function () {
            var x=event.clientX;
            var Y=event.clientY;
            // 使用switch语句控制提示框移动范围????????????????????????????????????????
/*            switch (x) {
                case x<600:tips.style.left=-150+'px';
                    break;
                case x>900:tips.style.left=150+'px';
                    break;
                case x>=600&&x<=900:tips.style.left=(x-750)+'px';
                    break;
            }*/
            // 使用if语句控制提示框移动范围
            if (event.clientX>900){
                x = 900;
            }else if (event.clientX<600){
                x = 600;
            }else{
                tips.style.left=(x-750)+'px';
            }

            tips.innerHTML=input.value;

            // console.log('(x,y):('+x+','+'y'+')');
        }
    };
    input.onmousedown=function () {
        tips.style.display='block'
        move();
    };
    input.onmouseup=function () {
        tips.style.display='none'
        input.onmousemove=null;
    }
</script>
</body>
</html>

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

同学您好