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

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

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

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

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

图片.png

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

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

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

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

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

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

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

<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) 350楼

demo

ncjbcubcj ckjsnbcuszbcjxz clksz nck

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

demo

bjbcjbcjsbcjubcjs bdmds jds

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

<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) 353楼

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) 354楼

老师：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编程模块/正则对象 355楼

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

元素节点的style属性方法setProperty()、getPropertyValue()和removeProperty()

元素节点特性方法getAttribute()、setAttribute()和removeAttribute()

第一行和第二航的方法有什么区别？什么时候用哪一个

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

老师你好，对于本章节的实操练习，求数组的最大值及最大值的下标这一题，为什么我用函数方法做和直接用for循环做其结果会不一样？对于第一种方法我觉得逻辑是通的，但是所求出来的却不是最大值：

<script>
//方式1
   function getMax(arr){
     // 假设数组中的第一个元素就是最大值
     var max = arr[0];

    //利用for循环求出最大值
     for(var i in arr){
       if(arr[i] > arr[0]) {
         max = arr[i];
       }
     }
     return max;
   }

   function getMaxIndex(arr) {
     var max = arr[0];
     var index = 0;
     for(var i in arr) {
       if(arr[i] > arr[0]) {
         max = arr[i];
         index = i;
       }
     }
     return index;
   }

   var arr = [23,12,43,25,45,66,10,251,0,69];

   console.log(getMax(arr)); // 69
   console.log(getMaxIndex(arr)); // 9

//方式2
   var arr = [23,12,43,25,45,66,10,251,0,69];
   var max=arr[0];
   var index=0;
   for(var i in arr){
     if (arr[i]>max) {
       max=arr[i];
       index=i;
     }
   }
   console.log(max);//251
   console.log(index);//7
</script>

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

<body>
<div>

</div>
<script>
   var div1= document.querySelector('div');//这里必须有引号
   div1.innerText='平安喜乐';
   div1.innerText.setAttribute('color','green');
   div1.setAttribute('style','height:50px;width:50px;background-color:red');
   console.log(div1.getAttribute('style'));
   //div1.removeAttribute('style');
</script>
</body>

这里显示字体设置属性错误，但我不知道为什么错

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

为什么最后一个子标签不是文本，</script>和</body>之间不是有空格吗

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div  class="div1">div1
    <div  id="div2">div2</div>
</div>
<span>这是span标签</span>
<script>
    var div1=document.querySelector('.div1');
    var div2=document.querySelector('#div2');
    var span=document.querySelector('span');
    /*
    1.textContent
    描述：返回当前节点和它的所有后代节点的文本内容。
     var result=document.getElementById('divA').textContent// This is some text
     console.log(result);
     2.nodeValue
     描述：nodeValue属性一般只用于Text节点
     console.log(span.firstChild.nodeValue);
     span.firstChild.nodeValue='新的span值';
     3.childNodes属性
     描述：childNodes属性返回一个节点集合(NodeList)，节点集合中包括当前节点的所有子节点
     例子：
     var childList=div1.childNodes;
     console.log(childList);
     console.log(childList.length);
     console.log(childList instanceof  Array);
     console.log(childList[1]);
     4.firstChild/ lastChild
     描述：返回第一个\最后一个子节点，如果不存在返回null
     console.log(div1.firstChild);
     console.log(div1.lastChild);
     */
        console.log(document.body.firstChild);
        console.log(document.body.lastChild);
</script>
</body>
</html>

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

同学您好