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

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

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

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

时间排序推荐排序

老师，没有很能理解这段代码，能说说嘛？？？？？

WEB前端全系列/第二阶段：JavaScript编程模块/JavaScript基础与变量 346楼

老师你好，自己在做tab选项卡练习的时候，想着利用dom2级事件以及闭包来实现tab选项卡切换，但是在使用闭包的时候遇到了一点问题，导致未能实现最终的效果，还望老师能够指导一下

原生js闭包实现tab选项卡.zip

图片.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横向布局的导航栏</title>
</head>
<!--<style>
    ul{list-style: none;padding: 0;margin: 0;}
    ul li{display:inline-block; width:100px; height:100px;line-height:30px;text-align:center; background-color:skyblue;}
    li a{text-decoration: none;color: white;}
    li:hover{background-color: red;}
    li:hover a{color: greenyellow;}
</style>-->
<style>
    li:hover{background-color: red}
    li:hover a{color: greenyellow}
</style>
<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=['首页','军事','娱乐','新闻',];
    //创建ul标签
    var ul=document.createElement('ul');
    var ul_style=document.createAttribute('style');
    ul_style.value='list-style: none;padding: 0;margin: 0;';
    ul.setAttributeNode(ul_style);

      //创建li标签
        for(var i=0;i<4;i++){
            var li=document.createElement('li');
            var li_style=document.createAttribute('style');
            li_style.value='display:inline-block; width:100px; height:100px;line-height:30px;text-align:center;/ background-color:skyblue;';
            li.setAttributeNode(li_style);
            ul.appendChild(li);

      //创建a标签

            var a=document.createElement('a');
            var a_style=document.createAttribute('style');
            a_style.value='text-decoration: none;color: white;';
            a.setAttributeNode(a_style);
            li.appendChild(a);
            a.innerHTML=arr[i];

        }
  document.body.appendChild(ul);

</script>
</body>
</html>
哪里的问题，我的不显示出来

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

老师，你好，下面这个案例是我做的一个利用鼠标点击事件实现的一个手风琴二级菜单，但是在做的过程中一个有个功能不管怎样调试，都实现不了：那就是当二级菜单处于展开状态时，鼠标点击二级菜单里面的内容，二级菜单不会隐藏；只有当鼠标点击对应的一级菜单时二级菜单才会随着隐藏，并且切换相应的图片状态。还望老师指导一下。

html+css版.zip

图片.png

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

老师你好，基于鼠标事件我做了一个利用js实现的二级菜单，但是出现了如下错误提示，还望点播一下：

js实现.zip

图片.png

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

open('http://www.baidu.com');
window.close();

我这里打开不了页面，试了其他的程序可以，就这两句不行

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

老师你好，关于如下代码的跨域传输遇到了一个问题，希望老师点播一下，谢谢！

<script>
        //page.html的
        var num = 10;
        window.name = 'var num=[1,2,3];';
    </script>

 <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);

            //当iframe加载完毕，意味着window.name的内容已经被赋予完毕
            iframe.onload = function(eve) {
                var iframeWindowName = eve.target.contentWindow.name;
                //console.log(iframeWindowName);
                eval(iframeWindowName); //将字符串解析成代码
                console.log(num);
            }
        }
    </script>

此时当我点击“跨域传输”按钮后则出现了如下情况：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有提示文字的滚动条</title>
    <style>
        div{
            width:30px;
            height:15px;
            border: 1px solid black;
            line-height: 15px;
            align:center;
            position:absolute;
            display:none;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="0"/>  <!--value是当前值-->
<div></div>
<script>
    var div=document.querySelector("div");
    var input=document.querySelector("input");
    var flag=false;
    input.onmousemove=function(){
        div.innerHTML=input.value;
        if(flag) {
            //console.log("(x,y)的值为（" + event.clientX + "," + event.clientY + ")");

            if (event.clientX > 134) {event.clientX = 134;}
            if (event.clientX < 14) {event.clientX = 14;}
            div.style.left = event.clientX + 'px';//style对象的属性值都是字符串，单位包括在字符串中。所以这里用连接符，连接一个字符，使其变成字符串。
            div.style.display = 'block';
        }
    }
    input.onmousedown=function(){//鼠标按下时触发
        flag=true;
        div.style.display='none';
    }
    input.onmouseup=function(){//鼠标抬起时触发
        flag=false;
        div.style.display='none';
    }
</script>
</body>
</html>

我这个绝对定位，距离左边距离的这个功能不能实现。div到第一个位置停止了，但我的程序出来效果图div还可以继续移动

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

<div style="width:200px;height: 200px;background-color: pink"></div>
<script>
   var div = document.querySelector('div');
   //鼠标按下时触发
div.onmousedown=function(){
    div.style.backgroundColor='blue';
}
//鼠标抬起时触发
div.onmouseup=function(){
    div.style.cssText='background-color:red';
}

为什么鼠标抬起时功能不能实现?

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

demo

ncjbcubcj ckjsnbcuszbcjxz clksz nck

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

demo

bjbcjbcjsbcjubcjs bdmds jds

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

<body>
<div style="width: 200px;height: 200px;background-color: pink"></div>
<script>
  var div=  document.querySelector('div');
  var temp=div.addEventListener;
  function  show(){console.log("这是一个div执行函数");}
  div.addEventListener('click',show,true);
  console.log(temp);

  /*var temp=  div.addEventListener('click', function () {
        console.log("这是函数");
    });
  console.log(temp);*/
    var superEvent={
      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();
        }else{

        }
    }
  }
  function  show(){console.log("这是一个div执行函数");}
   superEvent.add(div,'click',show);
</script>
</body>

div.addEventListener;调用这个属性有什么作用。我运行后显示它是一个函数，所以他怎么在if语句中判断true还是false

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

var div=  document.querySelector('div');
/*var temp=div.addEventListener;
console.log(temp);*/

var temp=  div.addEventListener('click', function () {
      console.log("这是函数");
  });
console.log(temp);

这个运行结果为什么显示未定义？

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

老师：getsecret这个是啥意思？我看上课的老师调用用一个函数，用到了这个，但是不知道什么意思

具体代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>封装与公私有</title>
</head>
<body>
<script>
    
         function  People(pname,pability){
         this.pname=pname;
         this.pability=pability;
         var secret='梦';
         this.getSecret=function(){//老师问题在这里
         console.log(secret);
         }
         }
         var beixi=new People('贾先生',function(){
         console.log('敲代码');
         });
         console.log(beixi.pname);
         beixi.pability();
         //console.log(beixi.secret);
         beixi.getSecret();
     
  
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>间隔调用和延迟调用</title>
</head>
<body>
<script>
    var time1=null;
    var time2=null;
    var time3=null;
    time1=setInterval(function (){console.log("hello world1")},2000);
    time2=setInterval(function (){console.log("hello world2")},2000);
    time3=setInterval(function (){console.log("hello world3")},2000);
    console.log(time1);
    console.log(time2);
    console.log(time3);
    clearInterval(3);
</script>
</body>
</html>

老师，为什么每个浏览器返回的定时器的值都不一样呢，谷歌的是345，火狐的是234

QQ图片20210412154628.png

QQ图片20210412154653.png

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

同学您好