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

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

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

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

var grade = 100;
switch (grade) {
    case grade>=90:{console.log("成绩优秀");}
    break;
     case grade<90 && grade>=80:{console.log("成绩良好");}
    break;
    case grade<80 && grade>=70:{console.log("成绩一般");}
    break;
    default:{console.log("成绩较差，望继续努力！");}
}

老师您好，我这段程序为什么执行出来的结果直接跳到最后一句了？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮，div移动</title>
    <style>
        div{
            width: 20px;
            height: 20px;
            background: pink;
            margin-top: 5px;
            position: absolute;
        }
    </style>
</head>
<body>
<button>点击移动div</button>
<div></div>
<script>
    //编写一个button。要求鼠标点击一次能够让页面中的某个div向右移动50像素
    //获取元素
    var but = document.querySelector('button');
    var div = document.querySelector('div');
    //点击button时
    but.onclick=function () {
        var left= div.style.left;
        div.style.left=left+'50px';
        console.log('点击一次')
    }
</script>
</body>
</html>

老师，为什么点击事件每次执行，但只有第一次div块移动了50px，后面执行时div块都没有移动？是哪里不对？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编写带有提示文字的滚动条</title>
    <style>
        div{
            width: 25px;
            height: 25px;
            border: 1px solid;
            line-height: 25px;
            text-align: center;
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="5">
<div></div>
<script>
    //获取元素
    var input = document.querySelector('input');
    var div = document.querySelector('div');
    var flag = false;
    //给input填加滑动事件
    input.onmousemove =function () {
        if (flag){
            //获取鼠标移动时坐标
            //console.log('(x,y):('+event.clientX+','+event.clientY+')');
            var divx = input.clientX;
            //当x坐标大于120（移出滚动条时，div隐藏）
            if (divx>120){
                div.style.display='none';
            }
            ////当x坐标小于14（移出滚动条时，div隐藏）
            if (divx<14){
                div.style.display='none';
            }
            else {
                //拖动时div块显示
                div.style.display='block';
            }
            //div的left属性赋值，div跟随上面的移动
            //style后面赋值必须为字符串
            div.style.left=event.clientX-12.5+'px';
            //把input实时的值赋到div块内
            div.innerHTML=input.value;
        }
    };
    //当鼠标按下时,div显示
    input.onmousedown=function () {
        flag=true;
        div.style.display='block';

    };
    //当鼠标抬起时，div隐藏
    input.onmouseup=function () {
        flag=false;
        div.style.display='none';
    }
</script>
</body>
</html>

老师，我想设置在鼠标移出滚动条范围后，鼠标按住时，div块也隐藏掉，但是并没有实现。这个应该如何实现？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每1s输出内容</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
<div></div>

<script>
    //编写一个div，要求鼠标按下不抬起时。每隔1s输出一句'hello world‘;

    //获取div
    var div= document.querySelector('div');
    var flag = false;
    document.onmousedown=function(){
        if (flag==true){
            setInterval(function () {
                console.log('hello world')
            },1000);
        }
    };
    //鼠标按下时
    div.onmousedown=function () {
        flag=true;
    };
    //鼠标抬起时
    div.onmouseup=function () {
        flag=false;
    }
</script>
</body>
</html>

老师，我想写

编写一个div，要求鼠标按下不抬起时。每隔1s输出一句'hello world‘;

现在完成了鼠标按下时每隔1s输出内容，但无法实现鼠标抬起时停止输出。

为什么我写的鼠标抬起时停止输出不生效呢？是哪里不对呢？

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

老师好，有三个小问题需要指导一下。

1、使用document.write()显示结果时，space空格不起作用，必须使用 &nbsp才可以，console.log()刚好相反；

2、document.write()使用<br/>换行，console.log()使用"/n"换行，类似的区别很多么，有没有相关资料？

3、声明变量为数字时，系统默认这是一个整型，包括在自增自减等运算时都是按照整数处理的，有没有使用小数的情况？小数该怎么声明？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ppt练习题</title>
</head>
<body>
<!--按图完成效果，要求：
(1)导航静态实现
(2)数据内容动态实现
(3)样式要写在style中,用动态实现。-->
<script>
    var arr = ['全部','精华','分享','问答','招聘'];
    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);
    document.body.appendChild(ul);

    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;background: azure;margin: 0 5px;width:35px;height: 30px;line-height: 30px;text-align: center;";
        if (i== 0){
            li_style.value ='display: block;float: left;margin: 0 5px;width:35px;height: 30px;line-height: 30px;text-align: center;background:red;';
        }
        li.setAttributeNode(li_style);
        var a = document.createElement('a');
        a.innerHTML = arr[i];
        li.appendChild(a);
        ul.appendChild(li);
    }
</script>
</body>

</html>

老师，这个第一问是这个思路吗？

2、第二问数据内容动态实现是什么思路呢？是用循环和Input结合吗？把input在for循环中创建吗？判断条件的话应该怎么确定，能让他实现动态循环？

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

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<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 dataParse(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 dataObj=dataParse(document.location.search);
            console.log(dataObj);
            }
    </script>
</body>
</html>

老师 我想请问一下，为什么我的也是用英文的，但是在控制台输出的时候却是加密的样子呢？

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

老师您能全面一点么三种引入的方式您这都没有讲啊。

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

老师，我想自定义一个alert()提示框，实现和alert一样的功能，提示框出现时页面代码停止执行，提示框关闭后页面代码继续执行。这个要怎么实现呢？

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

<div>
<div  class="div1">div1</div>
<div  id="div2">div2</div>
</div>
<button  id="but">点我</button>

<body>

<script>
    var but=document.getElementById('dut');
    var div=document.querySelector('div');
    var div1=document.querySelector('.div1');
    var div2=document.getElementById('div2');
            but.onclick=function () {
            if (div.hasChildNodes()){
                div.removeChild(div.firstChild);
            }else {
                alert('已经没有了');
            }
        }

</script>

老师，这个地方为什么后报错呢？是浏览器不兼容吗？

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

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

        //firstChild / lastChild
        console.log(div1.firstChild);
        console.log(div1.lastChild);
        console.log(document.body.firstChild);
        console.log(document.body.lastChild);
    </script>
    <div>最后的内容</div>
</body>
</html>

老师，我这个代码里的body的lastChild，最后一个子节点，不应该是 div内容或者 #text 吗？为什么还是script？script并不是最后一个子节点吧？

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

老师：

下午好，我尝试了按网页的模式去做练习，但还是实现不了，现在把代码和网页上的报错分别以文字和图片格式发给你，请指导，谢谢！

代码：

=[,,,,];
=.();
=.();
.=;
.();

(=;<.;++){
=.();
=.();
.=;
    .();

 =.();
 =.();
 .();
 .=[];
 .();
 .();
 }
..();

20200808作业.png

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

<script>
var div = document.querySelector("#div");
console.log("网页可见区域宽client" + document.body.clientWidth);
console.log("网页可见区域高client" + document.body.clientHeight);
console.log("网页可见区域宽offset" + document.body.clientWidth);
console.log("网页可见区域高offset" + document.body.clientHeight);
console.log("网页正文全文宽scroll"+document.body.scrollWidth);
console.log("网页正文全文高scroll"+document.body.scrollHeight);
console.log("网页被卷曲的宽scroll"+document.body.scrollLeft);
console.log("网页被卷曲的高scroll"+document.body.scrollTop);
console.log("------------------------------------");
console.log("浏览器宽"+window.outerWidth);
console.log("浏览器高"+window.outerHeight);
console.log("浏览器视口宽（计算滚动条）"+window.innerWidth);
console.log("浏览器视口高（计算滚动条）"+window.innerHeight);
console.log("浏览器视口宽（不计算滚动条）"+document.documentElement.clientWidth);
console.log("浏览器视口高（不计算滚动条）"+document.documentElement.clientHeight);
console.log("返回页面滚动距离X"+window.pageXOffset);
console.log("返回页面滚动距离Y"+window.pageYOffset);
console.log("浏览器距离屏幕X"+window.screenX);
console.log("浏览器距离屏幕Y"+window.screenY);
</script>

在页面中插入一个宽高分别为3000和2000的div，用

document.body.clientHeight

和

document.body.clientHeight

获取的文档可视区域高度为什么都为2000呢？

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

<!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编程模块/正则对象 539楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量提升</title>
</head>
<body>
<script>
    //函数可以像简单值一样作为函数的返回值
    function info() {
        console.log('我是谁');
        console.log('我会干什么');
        function caiyi() {
            console.log('我要表演才艺');
        }
        return caiyi;
    }
    info();   //直接调用，会执行里面的内容
    var result = info();  //返回给调用者
    result();    //直接调用
</script>
</body>
</html>

1、老师，为什么info(); 直接调用没有执行'我要表演才艺’？

2、为什么必须要把info();赋值给一个变量才行，赋值后var result是一个函数吗？老师说的这句是返回给调用者，这是什么意思？caiyi()这个是在哪里执行的？为什么执行了？

3、为什么result();可以直接调用，这句是函数吗？完整的语句执行是怎么执行的？没有看明白这个顺序。

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

同学您好