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

<!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>
        * {
            margin: 0;
            padding: 0;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        
        .zz {
            height: 100%;
            width: 100%;
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        .box {
            height: 290px;
            width: 700px;
            position: absolute;
            left: 50%;
            display: none;
            top: 50%;
            margin-left: -350px;
            margin-top: -145px;
            box-sizing: border-box;
            background-color: #fff;
        }
        
        .box .move {
            height: 22px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
        }
        
        .box h2 {
            height: 56px;
            line-height: 56px;
            text-align: center;
            font-weight: normal;
            font-size: 28px;
        }
        
        table {
            height: 88px;
            width: 480px;
            margin: 10px auto;
            border-collapse: collapse;
        }
        
        tr,
        td {
            font-size: 20px;
        }
        
        table tr td:nth-child(1) {
            text-align: right;
        }
        
        input {
            height: 32px;
            width: 290px;
            padding-left: 5px;
            border: 1px solid #ccc;
        }
        
        p {
            margin-top: 30px;
            text-align: center;
        }
        
        button {
            width: 200px;
            height: 38px;
            background-color: skyblue;
            border: none;
            cursor: pointer;
        }
        
        .close {
            height: 34px;
            width: 34px;
            line-height: 34px;
            text-align: center;
            font-size: 28px;
            border-radius: 50%;
            position: absolute;
            right: -16px;
            top: -16px;
            cursor: pointer;
            border: 1px solid #aaa;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <p class="begin">点我登陆咯！！</p>
    <div class="zz"></div>
    <div class="box">
        <div class="move"></div>
        <h2>登录会员</h2>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" placeholder="请输入手机号"></td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
        </table>
        <p><button>登录</button></p>
        <div class="close">×</div>
    </div>
</body>
<script>
    var zz = document.querySelector('.zz');
    var box = document.querySelector('.box');
    var begin = document.querySelector('.begin');
    var close = document.querySelector('.close');
    var move = document.querySelector('.move');
    begin.onclick = function() {
        zz.style.display = "block";
        box.style.display = "block";
    }
    close.addEventListener('click', function() {
        zz.style.display = "none";
        box.style.display = "none";
    });
    move.addEventListener('mousedown', function(e) {
        var x = e.pageX - box.offsetLeft;
        var y = e.pageY - box.offsetTop;
        document.addEventListener('mousemove', move);
        function move(e) {
            box.style.left = e.pageX - x + "px";
            box.style.top = e.pageY - y + "px";
        }
        document.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', move);
        });
    });
</script>
</html>

老师，我不知道为什么，拖动元素一直计算错误。您帮我瞅瞅。谢谢

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

求助：老师，为什么我打印出来第一个是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编程模块/正则对象 588楼

$[@])@E_I@A0CJ(0~54M3O{0.png$

问题：第一个alert(bb);不能使用var bb='1111111'; 这个bb 的声明吗，这不是全局变量吗，不就是都能用，老师的视频讲解，如果把函数上面的var bb='1111111';去掉，我才能理解，并认为合理。

为何在这个题目中又使用 var test =‘1111’;的声明了？？

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

<script>
			function info(){
				console.log('我是XXX');
				console.log('我会唱歌');
				function func(){
					console.log('开始表演');
				}
				return func;
			}
			var  r=info();
			r();
		</script>

问题1：我不太懂返回值，renturn返回给调用者，返回到哪里呀，就是说我怎么知道他返回了，然后return这句话的意义是什么。

问题2 ：

var  r=info();
r();

是把上面的函数又重新写成另一个函数r(); 我可以这样理解吗？但是不懂原理

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

$UY}4{CKR@KY@P~T~_ITK1GA.png$

问题一：obj[document]='sxt';中document为什么不加单引号。

问题二：第二张图正常的键值对不就是划线的那个吗，怎么还就错了，后面未划线的那个对在哪里

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

<body>
		<button id="but" name="but2">点我<tton>
		<script>
		var but=document.querySelector('button');
		but.onclick=function(){
			var newBut=but.cloneNode();
			document.body.appendChild(newBut);
		}
		</script>

$EI5D`R2_HO[0TK{3NX2QWIN.png$

我的问题：1、为什么我的代码没有被克隆

我的问题：2、我运行了两次为啥会有多了两个script

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

var 声明的变量没有地址值吗？

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 850px;
            height: 200px;
            background-color: #FF8500;
            margin: 200px auto;
        }
        .top{
            width: 850px;
            height: 50px;
            background-color: #9a6e3a;
        }
        .bottom{
            width: 850px;
            height: 150px;
            background-color: #6F6D6D;
            line-height: 150px;
            text-align: center;
        }
        ul{
            list-style: none;
            width: 800px;
            height: 50px;
            float: left;
        }
        .top li{
            width: 100px;
            height: 50px;
            float: left;
            color: #FFFFFF;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            border-right: 1px solid #4182FA;
            box-sizing: border-box;
            position: relative;
        }
        p{
            width: 50px;
            height: 50px;
            background-color:#FF8500;
            float: right;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: #FFFFFF;
            font-weight: 700;
        }
        .context li:nth-child(2){
            display: none;
        }
        .context li:nth-child(3){
            display: none;
        }
        .top li span{
            position: absolute;
            right: 0;
            top: 0;
            background-color:black;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <ul>
                <li>测试1<span>x</span></li>
                <li>测试2<span>x</span></li>
                <li>测试3<span>x</span></li>
            </ul>
            <p>+</p>
        </div>
        <div>
            <ul>
                <li>hello ~~测试1的内容</li>
                <li>hello ~~测试2的内容</li>
                <li>hello ~~测试3的内容</li>
            </ul>
        </div>
    </div>
    <script>
        var that;
        class Tab{
            //实现tab栏的增查删改的功能
            constructor(){
                //获取元素
                this.container = document.querySelector(".container");
                this.lisTab = this.container.querySelector(".top").querySelectorAll("li"); //tab栏里面li
                this.lisContext = this.container.querySelector(".context").querySelectorAll("li"); //内容里面的li
                this.addBtn = this.container.querySelector("p");
                this.topUl = this.container.querySelector(".top").querySelector("ul"); //获取top下的ul
                that = this;
                this.init()

            }
            //初始化方法给每个li添加绑定事件并设置自定义属性
            init(){
                   for(var i = 0; i < this.lisTab.length; i++){
                        this.lisTab[i].setAttribute("data-index",i);
                        this.lisTab[i].onclick = this.toggle;
                }
                   //给添加按钮绑定事件
                    this.addBtn.onclick = this.add;
            }
            //1.切换功能
            toggle(){
                for(var j = 0; j < that.lisTab.length;j++){
                    that.lisTab[j].style.backgroundColor = "#9a6e3a";
                    that.lisContext[j].style.display = "none"
                }
                this.style.backgroundColor = "#4182FA"; //设置当前的这个li的背景
                //这里不能使用this.lisContext因为函数里面的this指向调用者这里的this指向被点击li
                that.lisContext[this.getAttribute("data-index")].style.display = "block";
            }
            //2.添加tab栏
            add(){
                var li = document.createElement("li");
                that.topUl.appendChild(li);
                li.innerHTML = "测试" + that.lisTab.length
                //appendChild(li)添加元素后元素的长度不会发生改变
            }
            //3.删除
            remove(){}
            //4.修改
            modify(){}
        }
        new Tab(); //实例化一个tab对象
    </script>
</body>
</html>

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

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

<style>

margin: 0;

padding: 0;

}

.container{

width: 850px;

height: 200px;

background-color: #FF8500;

margin: 200px auto;

}

.top{

width: 850px;

height: 50px;

background-color: #9a6e3a;

}

.bottom{

width: 850px;

height: 150px;

background-color: #6F6D6D;

line-height: 150px;

text-align: center;

}

ul{

list-style: none;

width: 800px;

height: 50px;

float: left;

}

.top li{

width: 100px;

height: 50px;

float: left;

color: #FFFFFF;

line-height: 50px;

text-align: center;

font-size: 14px;

border-right: 1px solid #4182FA;

box-sizing: border-box;

position: relative;

}

width: 50px;

height: 50px;

background-color:#FF8500;

float: right;

font-size: 20px;

text-align: center;

line-height: 50px;

color: #FFFFFF;

font-weight: 700;

}

.context li:nth-child(2){

display: none;

}

.context li:nth-child(3){

display: none;

}

.top li span{

position: absolute;

right: 0;

top: 0;

background-color:black;

width: 20px;

height: 20px;

line-height: 20px;

text-align: center;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

<div>

<ul>

<li>hello ~~测试1的内容</li>

<li>hello ~~测试2的内容</li>

<li>hello ~~测试3的内容</li>

</ul>

</div>

var that;

class Tab{

//实现tab栏的增查删改的功能

constructor(){

//获取元素

this.container = document.querySelector(".container");

this.lisTab = this.container.querySelector(".top").querySelectorAll("li"); //tab栏里面li

this.lisContext = this.container.querySelector(".context").querySelectorAll("li"); //内容里面的li

this.addBtn = this.container.querySelector("p");

this.topUl = this.container.querySelector(".top").querySelector("ul"); //获取top下的ul

that = this;

this.init()

}

//初始化方法给每个li添加绑定事件并设置自定义属性

init(){

for(var i = 0; i < this.lisTab.length; i++){

this.lisTab[i].setAttribute("data-index",i);

this.lisTab[i].onclick = this.toggle;

}

//给添加按钮绑定事件

this.addBtn.onclick = this.add;

}

//1.切换功能

toggle(){

for(var j = 0; j < that.lisTab.length;j++){

that.lisTab[j].style.backgroundColor = "#9a6e3a";

that.lisContext[j].style.display = "none"

}

this.style.backgroundColor = "#4182FA"; //设置当前的这个li的背景

//这里不能使用this.lisContext因为函数里面的this指向调用者这里的this指向被点击li

that.lisContext[this.getAttribute("data-index")].style.display = "block";

}

//2.添加tab栏

add(){

var li = document.createElement("li");

that.topUl.appendChild(li);

li.innerHTML = "测试" + that.lisTab.length

}

//3.删除

remove(){}

//4.修改

modify(){}

}

new Tab(); //实例化一个tab对象

</script>

</body>

</html>

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

=;
=;
=;
=;
=.(,,,,,);
.();

这么做符合规定吗？可以这么做吗？

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

复杂数据类型的值存放在堆中，栈中存放的是指向堆中的地址，复杂数据类型的传参，是将地址复制给变量一份，因此指向的都是同一块堆空间，对吧

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

老师基本数据类型中 js认为变量是不可变的，对变量的重新赋值其实是在内存中重新开辟了以块空间，变量名指向了新的空间吧

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

老师 charCodeAt()返回的是不是索引对应的字符串的ascii码啊，a = 97不是unicode吧，或者ascii码和unicode的关系是什么啊

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

document.write()：写入文档元素，如果页面元素加载完毕后才执行会重新写入页面，所以用的很少

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

同学您好