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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
var season=prompt('请输入十以下的数字');
  switch (season) {
    case '1'||'2'||'3':{
      alert('winter');
    }
      break;
    case '5'||'4':{
      alert('spring');
    }
      break;
    case '6'||'7'||'8':{
      alert('summer');
    }
      break;
    case '9'||'10'||'0':{
      alert('automn');
    }
      break;
    default:{
      alert('meiyou');
    }

  }
</script>

</body>
</html>

老师用||或不可以进行选择吗v

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

一元二元运算符是怎么区分的？

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

<script>
    //打印出1，1，2，3，5，8，13
    var num1=1;
    var num2=1;
    document.write(num1+"<br/>");
    document.write(num2+"<br/>");
    var i=0;
    while (i<5){
        //把num1的值先保存起来，如果不保存的话，就会每次都是和num1=1相加
        var temp=num1;
        //第二次的第一个值是第一次的第二个值  新的num1是上一次的num2
        num1=num2;
        //新的num2是上一次的(num1+temp)
        num2=temp+num2;
        document.write(num2+"<br/>");
        i++;
    }

</script>

老师我想着，把num1赋值给temp，到最后，不是也是num1=1和其他相加吗，老师，我不太懂while循环里面的

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

var i=1;
        while(i<=100) {
            document.write(i+"<br/>");
            i=i+1;
        }

老师，document和console有啥区别？这俩个应该什么时候用？

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

求助：老师，为什么我打印出来第一个是undefined，第二个虽然也是undefined，但是展开从里边的prototype是能够找到2的。。

<script>
    function People(name,ability,eyesNum){
        this.name = name;
        this.ability = ability;
        var secret = '我爱你';
        this.getSecret = function(){
            console.log(secret);
        };
        this.eyesNum = eyesNum;
    }
    People.prototype.eyesNum = 2;
    var shiwentao = new People('施文涛',function(){
        console.log('脱发');
    });
    var huojinxing = new People('霍金星',function(){
        console.log('cute');
    });
    console.log(shiwentao.eyesNum);
    console.log(huojinxing);
</script>

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

老师，对于document.body.clientWidth/document.body.clientHeight

document.body.offsetWidth/document.body.offsetHeight

document.body.scrollWidth/document.body.scrollHeight

document.body.scrollTop/document.body.scrollLeft

这几个有点不太明白，我理解是offsetWidth=clientWidth+border；可是在变网页窗口的时候，offsetWidth比clientWidth小。不知道为什么我这么写之后，网页就不显示div了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    </style>
<body style="height: 1000px">
<div style="background: #0d3349;width: 300px;height: 2000px"></div>
</body>
    <script type="text/javascript">
        window.onload=function(){
            document.write("网页可见区域宽："+document.body.clientWidth+"</br>");
            document.write("网页可见区域高client："+document.body.clientHeight+"</br>");
            document.write("网页可见区域宽："+document.body.offsetWidth+"</br>");
            document.write("网页可见区域高offset："+document.body.offsetHeight+"</br>");
            document.write("网页正文全文宽："+document.body.scrollWidth);
            document.write("网页正文全文高："+document.body.scrollHeight);
            document.write("网页被卷去的高："+document.body.scrollTop);
            document.write("网页被卷去的左："+document.body.scrollLeft);
            document.write("网页正文部分上："+window.screenTop);
            document.write("网页正文部分左："+window.screenLeft);
            document.write("网页正文部分上："+window.screenX);
            document.write("网页正文部分左："+window.screenY);
            document.write("屏幕分辨率的高："+window.screen.height);
            document.write("屏幕分辨率的宽："+window.screen.width);
            document.write("屏幕可用工作区高度："+window.screen.availHeight);
            document.write("屏幕可用工作区宽度："+window.screen.availWidth);
            document.write("浏览器高度："+window.outerHeight+"</br>");
            document.write("浏览器宽度："+window.outerWidth+"</br>");
            document.write("浏览器内页面可用高度："+window.innerHeight+"</br>");
            document.write("浏览器内页面可用宽度："+window.innerWidth);
        }
    </script>
</head>
</html>

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

item没有赋值咋知道item是否等于arr.shift()

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

<!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>

    <script type="text/javaScript" src="./hello.js"></script>
    <script>

    var num = 3;
    if (num === 3) {
        console.log(num++);//3
        var result = num++;
        console.log(result)//4

    }


    </script>


</body>

</html>

老师，您好，请问一下，为什么这个语句，++在后也能重新赋值，结果为4的？

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

<!DOCTYPE html>
<html>
<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>
    <style>
     .boderRed{
         border: 2px solid red;
     }
     .boderGreen{
         border: 2px solid green;
     }
     .colorRed{
         color: red;
     }
     .colorGreen{
         color: green;
     }
    </style>
</head>
<body>
    <form action="" method="post">
      <span class="">用户：</span>
      <input type="text">
      <span></span>
    <button>提交</button>
    </form>
    <script>
var input=document.querySelector('.username');
var span=document.querySelector('.usernameSpan');
var btn=document.querySelector('button');
//自动获取焦点
input.focus();
input.onblur=function(){
    if(input.value.length==11){
    this.className='boderGreen';
    span.className='colorGreen';
    span.innerHTML='正确';
    }else{
        this.className='boderRed';
    span.className='colorRedn';
    span.innerHTML='错误';
   
    }
}
btn.onclick=function(){
   input.focus();
   input.blur();
   input.focus();
   
}
    </script>
</body>
</html>

老师为啥错误的时候不会再获取焦点了？

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

老师，我这怎么回事，404

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

检查了几遍还是这样

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

老师，我不明白为什么title的类型为字符串呢，其他的都为对象。

<div  id="d"  style="width: 100px;height: 100px;background: red">文本</div>

   <script>
    
   	var t=document.getElementById("d");
   	console.log(typeof(t));
   	 console.log(typeof(document.title));
   	 console.log(typeof(document.head));
   	  console.log(typeof(document.body));

  </script>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编写一个带有hover样式的导航栏，要求采用鼠标事件实现</title>
</head>
<body>
    <script>
        var arr = ["首页","军事","新闻","我们"];
        var ul = document.createElement('ul');
        var ul_style = document.createAttribute('style');
        ul_style.value="list-style: none;margin: 0px;padding: 0px;";
        ul.setAttributeNode(ul_style);
        for (var i = 0;i<arr.length;i++){
            var li = document.createElement("li");
            var li_style = document.createAttribute("style");
            li_style.value="display: block;float: left;width: 150px;height: 50px;" +
                "line-height: 50px;text-align: center;background:pink;margin-left:100px;";
            li.setAttributeNode(li_style);
            var a = document.createElement("a");
            var a_style = document.createAttribute("style");
            a_style.value="text-decoration: none;";
            a.setAttributeNode(a_style);
            a.innerHTML=arr[i];
            li.appendChild(a);
            ul.appendChild(li);
        }
        document.body.appendChild(ul);
        
        //li事件
        var li = document.querySelector('li');
        li.onmouseover = function () {
            li.style.background='yellow';
        };
        li.onmouseout = function () {
            li.style.background="pink";
        };
        
        //超链接事件
        var a = document.querySelector('a');
        a.onmouseover = function () {
            a.style.color="white";
        };
        a.onmouseleave = function () {
            a.style.color="#ccc";
        };
    </script>
</body>
</html>

老师，你好，请问一下怎么设置属性能让每个li元素都有鼠标事件，我这样设置的只有第一个li产生了鼠标事件？

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

创建类就类似于封装一个创建对象的函数，用new关键

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM0级事件</title>
</head>
<style>
    .div1{
        width: 200px;
        height: 200px;
        background-color:pink;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color:blue;
        margin: 25px auto;
    }
</style>
<body>
<div class="div1" >div1
 <div class="div2">div2</div>
</div>
<script>
    var div1=document.querySelector('div1');
    var div2=document.querySelector('div2');
    /*
    DOM0级事件
    描述：在js脚本中，直接通过on+事件名的方式绑定的事件称为DOM0级事件
    语法：元素.on+事件名=function(){}
     */
 div2.onclick=function(){
        console.log('这是div2');
    }
</script>
</body>
</html>

老师，为什么我的会提示这个错误

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

同学您好