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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 例子
    function info() {
        console.log("我是xxx");
        console.log("我会唱xx");

        function caiyi() {
            console.log("我要表演才艺")

        }
        return caiyi() ;
    }
    info();
    // console.log(result);
//    例子2
    function info2() {
        console.log("我是xxx");
        console.log("我会唱xx");

        function caiyi2() {
            console.log("我要表演才艺")

        }
        return caiyi2 ;
    }
    info2()();
    //例子3
    function info3() {
    console.log("我是xxx");
    console.log("我会唱xx");

    function caiyi3() {
        console.log("我要表演才艺")

    }
    return caiyi ;
}
info3();

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

老师，例1返回值返回的是一个语句，所以只需要调用一次；例2返回值返回的是一个函数，所以需要调用两次；例子3虽有返回值，但是没有调用，所以没用输出“我要表演才艺”；我可以这样理解吗？

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

<!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>
<script>
    // 随机
    function get() {
        var str = '0123456789abcdef';// 定义取值范围
        var color = '#';
        for (var i = 0; i < 6; i++) {
            var num = Math.floor(Math.random() * str.length);// Math.floor 向下取整，Math.random随机
            color += str[num];
        }
        console.log(color.length);
        console.log(color);
    }
    get();
    // hi~老师，我没弄清楚下面这段代码到底是怎么执行的
    /*
    random方法是随机获取0~1之间的小数，floor方法是向下取整，那么不管random获取到什么小数
    floor咔擦一下就把小数全部去掉了，那剩下的也就只有0一个整数了
    那为什么用 Math.floor(Math.random() 乘以数字它就能取到一个随机的数字呢
    */
    console.log(Math.floor(Math.random() * 100));// 取到100以内的随机数。。。
    console.log(Math.floor(Math.random() + 100));// 100
</script>
</body>
</html>

老师~这个我想不明白，求解！！

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

老师，我想利用dom2事件，实现验证用户名和邮箱，点击验证按钮执行，但是我这个代码不知道是怎么回事

<!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>
    <p>
        <input type="text" class="userName" placeholder="用户名为英文、数字和下划线组成，最小6位不超过10位">
        <span class="userSpan"></span>
    </p>
    <p>
        <input type="text" class="number" placeholder="邮箱必须是QQ邮箱格式">
        <span class="emailSpan"></span>
    </p>
        <button>验证</button>
    <script>


        /*
        QQ邮箱是以数字开头，且前面只能位数字，以@qq.com结尾
        */


        var email=document.querySelector('.number');
        var userName=document.querySelector('.userName');
        var btn=document.querySelector('button');
        var emailSpan=document.querySelector('.emailSpan');
        var userSpan=document.querySelector('.userSpan');
        btn.addEventListener(click,function(){
            var userName_value=userName.value;
            var  wtq= /^[\w]{6,10}$/;
            var q=userName_value.test(wtq);
            if(q){
                userSpan.innerHTML="用户名格式正确";
            }else{
                userSpan.innerHTML="用户名格式错误";
            }
        },true);
        btn.addEventListener(click,function(){
            var str=email.value;
            var front=str.substring(0,str.length-7);//字符串删去@qq.com之后形成的字符串
            var reg1=new RegExp('@qq.com$');//字符串的结尾只能是@qq.com
            var reg2=new RegExp('^[0-9]{6,11}$');//新形成的字符串（字符串的开头）只能为数字
            var t=reg2.test(front);
            var w=reg1.test(str);
            if(w&&t){
                emailSpan.innerHTML="邮箱格式正确";
            }else{
                emailSpan.innerHTML="邮箱格式不正确";
            }
        },true);
    </script>
</body>
</html>

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 but=document.querySelector('button');
but.onclick=function(){
    var iframe=document.createElement('iframe');
    iframe.src='page.html';//加载页面
    iframe.style.display='none';
    document.body.appendChild(iframe);
}
window.onload=function(eve){
 var iframeWindowName=eve.target.contentWindow.name;
 eval(iframeWindowName);
 console.log(num);
}
    </script>
</body>
</html>

老师，为啥报错的 contentWindow.name和eval()是啥意思

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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模型 494楼

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

同学您好