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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画小球</title>
    <style>
        canvas{
            border: 1px solid;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
<canvas>您的浏览器不支持canvas标签</canvas>
<script>
    let mycanvas = document.querySelector('canvas');
    let ctx = mycanvas.getContext('2d');
    let x=50;
    let y=50;
    let speed=-1;
    let speedY=2;
    let timer=setInterval(function () {
        ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
        x+=speed;
        if(x<=20){
            speed=Math.abs(speed);
        }else if(x>=380){
            speed=-speed;
        }
        y+=speedY;
        if(y>=280){
            speedY=-speedY;
        }else if(y<=20){
            speedY=-speedY;
        }
        ctx.beginPath();
        ctx.arc(x,y,20,0,2*Math.PI);
        ctx.fillStyle='skyblue';
        ctx.fill();
        ctx.closePath();

    },30);
</script>
</body>
</html>

为什么写在style标签里面的width=400px和height=300px,小球就没有按实际的大小来跳动,放canvas标签里面就不会,我看语法也没有写错啊!

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 46楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形和路径绘制</title>
    <style>
        canvas{
            border: 1px solid;
        }
    </style>
</head>
<body>
<canvas width="300px" height="300px">您的浏览器不支持canvas标签,请升级或更换浏览器在重试!</canvas>
<script>
    let canvas = document.getElementsByTagName('canvas');
    let ctx = canvas.getContext('2d');
    ctx.fillStyle='blue';
    ctx.fillRect(50,50,50,50);
</script>
</body>
</html>

怎么

document.getElementsByTagName('canvas');

报错

canvas.getContext is not a function

用queryselector就不会报错,不是都是获取元素的吗?

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 47楼

老师你好请问视频里创建一个Obj 把img放进去，然后调用函数添加参数Obj有点没懂这个意思，不用这个也可以实现功能。那这个作用是什么。

07.zip

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 48楼

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cookie案例</title>
    <style type="text/css">
        .loginRegistDiv{
            text-align: center; padding: 15px;
            border: 1px solid black; width:300px; min-height:30px;
        }
        .welcomeDiv{
            text-align: center; padding: 15px;
            border: 1px solid black; width: 300px; min-height:30px;
            display: none;
        }
        .nickNameSpan{
            color: green; font-size: 22px; font-weight: bold;
        }
    </style>
</head>
<body>
<div class="loginRegistDiv">
    <label for="userName">
        <span>用户名:</span><input type="text" id="userName" placeholder='请输入用户名'>
    </label><br/>
    <label for="password">
        <span>密&nbsp;&nbsp;&nbsp;码:</span><input type="text" id="password" placeholder='请输入密码'>
    </label><br/><br/>
    <button class="loginBtn">登录</button>
    <button class="registBtn">注册</button>
</div>
<div class="welcomeDiv">
    欢迎回来，尊敬的：
    <span class='nickNameSpan'>哈哈哈</span>
    <br/><br/>
    <button class="exitBtn">注销登录</button>
</div>
<script>
    //页面逻辑
    ;(function(){
        var loginBtn=document.querySelector('.loginBtn');
        var userNameInput=document.querySelector('#userName');
        var passwordInput=document.querySelector('#password');
        var welcomeDiv=document.querySelector('.welcomeDiv');
        var loginRegistDiv=document.querySelector('.loginRegistDiv');
        var nickNameSpan=document.querySelector('.nickNameSpan');
        var exitBtn=document.querySelector('.exitBtn');
        //表示一个自动登录的功能
        function  getCookie(){
            var cookie=document.cookie;
            var  cookieArr=cookie.split(';');
            var finalObj={};
            for(var i=0;i<cookieArr.length;i++){
                var tempArr=cookieArr[i].trim().split('=');
                finalObj[tempArr[0]]=tempArr[1];
            }
            return finalObj;
        }
        var cookieObj=getCookie();
        if(cookieObj.nickName!=undefined){
            if(cookieObj.nickName.length!=0){
                loginRegistDiv.style.display='none';
                welcomeDiv.style.display='block';
                nickNameSpan.innerHTML=cookieObj.nickName;
            }
        }
        loginBtn.onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange= function () {
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var data=JSON.parse(xhr.responseText);
                        if(data.loginStatusCode==1){
                            loginRegistDiv.style.display='none';
                            welcomeDiv.style.display='block';
                            nickNameSpan.innerHTML=data.nickName;
                        }
                    }
                }
            };
            var formData=new FormData();
            formData.append('uname',userNameInput.value);
            formData.append('upass',passwordInput.value);
            xhr.open('post','cookie案例后台.php',true);
            xhr.send(formData);
        }
        //退出登录按钮
        exitBtn.onclick= function () {
            userNameInput.value='';
            passwordInput.value='';
            loginRegistDiv.style.display='block';
            welcomeDiv.style.display='none';
            //清除cookie
            var expires=new Date(new Date().getTime()+1).toGMTString();
            document.cookie='nickName=beixi;expires='+expires;
        }
    })();
</script>
</body>
</html>

php

<?php
$success=('msg'=>'ok');
$userName=$_POST['uname'];
  $password=$_POST['upass'];
  /*
     假设经过了数据库的出来
     假设已经认证登录成功，需要添加cookie
  */
  //登录成功之后对页面添加cookie
  setcookie('nickName','beixi',time()+3600*24);
  //回馈前端表示登录成功，使用状态码loginStatusCode   0表示失败  1表示成功
  $success['loginStatusCode']=1;
  $success['nickName']='beixi';
 echo  json_encode($success);
?>

页面没有显示是哪里有问题的呢

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 49楼

l老师10分21秒的eve.point.lng中的lng和lat是经纬度吗

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 50楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Document</title>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=webgl&ak=XgpOvmATLiD7xu0G0HEvLECHAAEkRsPp"></script>
    <style>
        #container{
            width: 700px;
            height: 500px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <button>加载地图</button>
    <div id="container"></div><!--  容器 -->
  <script>
      var btn=document.querySelector('button');
      btn.onclick=function(){
        var map =  new BMap.Map("container");
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15); 
        map.enableScrollWheelZoom(true);
        var option={
            anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
            offset:new BMapGL.Size(150, 5),
            type: BMAP_NAVIGATION_CONTROL_LARGE
        }
        map.addControl(new BMap.ScaleControl());//比例尺控件
        map.addControl(new BMap.ZoomControl());//缩放
        map.addControl(new BMap.NavigationControl(option));//平移缩放
        map.addControl(new BMap.MapTypeControl());//地图类型 右上角

      }
  </script>
</body>
</html>

老师为啥控件不显示

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 51楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个小球运动</title><style>canvas{border: 1px solid;}</style>
</head>
<body>
    <canvas width="500px" width="400px">对不起你的浏览器不支持canvas</canvas>
    <script>
        var mycanvas=document.querySelector('canvas');
        var ctx=mycanvas.getContext('2d');
        function Circle(){
            this.r=Math.floor(Math.random()*20+6);
            this.x=Math.floor(Math.random()*(500-this.r));
            this.y=Math.floor(Math.random()*(400-this.r));
            this.dx=Math.floor(Math.random*10);
            this.dy=Math.floor(Math.random*8);
            this.color='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
        }
        Circle.prototype.yd=function(){
            this.x+=this.dx;
            if(this.x<=this.r){
                this.dx=-this.dx
            }else if(this.x>=500-this.r){
                this.dx=-this.dx
            }
            this.y+=this.dy;
            if(this.y<=this.r){
                this.y=-this.dy
            }else if(this.y>=400-this.r){
                this.dy=-this.dy
            }
        }
       Circle.prototype.abs=function(){
           ctx.beginPath();
           ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
           ctx.fillStyle=this.color;
           ctx.fill();
           ctx.closePath();
         

       }
       var arr=[];
           for(var i=0 ;i<4;i++){
               arr[i]=new Circle();
           }
           var timer=setInterval(function () {
               ctx.clearRect(0,0,mycanvas.width,mycanvas.height)
               for(var i=0;i<arr.length;i++){
                   arr[i].yd();
                   arr[i].abs();

               }
           },40)

    </script>
</body>
</html>

老师为啥我的球显示不了

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 52楼

<!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>
        canvas{border: 1px solid red;}
    </style>
</head>
<body>
    <canvas width="300px" height="100px">你得u暗器不智灿canvas</canvas>
    <script>
        var mycanvas=document.querySelector('canvas');
        var ctx=mycanvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeRect(0,0,300,100);
        var counter=0;
        var obj={};
        //请求图片
        var arr=['谢谢惠顾.jpg','中将.jpg']
        for(var i=0;i<arr.length;i++){
            var img=new Image();
             img.src=arr[i];
             obj[i]=img
            img.onload=function(){
                counter++;
                if(counter==arr.length){
                    callback(obj)
                }

            }
        }
        function callback(obj){
            var num=Math.ceil(Math.random()*10);
            if(num==8){
               // mycanvas.style.background='ur('+arr[1]+')'
            }else{
                mycanvas.style.background='ur('+arr[0]+')'
            }

        }
    </script>
</body>
</html>

老师为什么我图片的文字出不来

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 53楼

02后台操作cookie.rar

浏览器打印出来的结果是把PHP文件的文本内容

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 54楼

老师那个video.srcObject的srcObjec是啥意思是video的属性吗还是什么？没看太懂

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 55楼

<!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>
        var expires=new Date(new Date().getTime()+1000*1000);
        document.cookie='password=13456; expires='+expires;
        var temarr=document.cookie.split('=');
        var obj={};
        obj[temarr[0]]=temarr[1];
console.log(document.cookie);
console.log(obj);
    </script>
</body>
</html>

老师这个为啥不行

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 56楼

求老师帮忙看下我的代码哪里出错了，效果一直出不来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas小球动画</title>
    <style>
        canvas{
            border:1px solid;
        }
    </style>
</head>
<body>
    <canvas width="400" height="300">你的浏览器不支持canvas标签</canvas>
    <script>
        var mycanvas=document.querySelector('canvas');
        var ctx=mycanvas.getContext('2d');
        var x=50;
        var y=50;
        var speed=-1;
        var speedY=2;
        //绘制一个小球
        var timer=setInterval(function(){
            ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
            speed+=speed;
            if(x<=20){
                speed=Math.abs(speed);
            }else if(x>=380){
                speed=-speed;
            }
            speedY+=speedY;
            if(y>=280){
                speedY=-speedY;
            }else if(y<=20){
                speedY=-speedY;
            }
            ctx.beginPath();
            ctx.arc(x,y,20,0,2*Math.PI);
            // ctx.stroke();
            ctx.fillStyle='skyblue';
            ctx.fill();
            ctx.closePath();
        },60);
    </script>
</body>
</html>

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 57楼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name='viewport' content='width=device-width,user-scalable=no'>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=iRrV61WA6gpv8wHVoyfMi1EaQtz6eKLG"></script>
    <style type="text/css">
        #container {
            width: 700px;
            height: 500px;
            border: 1px solid darkgray;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

 map.addControl(new BMapGL.NavigationControl());     //平移缩放
 map.addControl(new BMapGL.ScaleControl());      //比例尺
 map.addControl(new BMapGL.OverviewMapControl());     //缩放图
 map.addControl(new BMapGL.MapTypeControl());        //地图类型
</script>
</body>
</html>

平移缩放控件缩略图控件不能正常显示

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 58楼

break可以放在case里面吗

我试了试放在case里面也可以

有什么不一样吗

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 59楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cookie前台操作</title>
</head>
<body>
<script>
    /*var expires = new Date(new Date().getTime()+1000*1000);
    document.cookie="username=taozi;expires="+expires;

    //获取cookie的值
    //1.将cookie得到的字符串转为对象或，split()为分割，用=为分隔符
    var tempArr = document.cookie.split("=");
    //2.创建一个空对象，用来接收分割后的键和值
    var tempObj = {};
    //3.利用下标来接收，=左边为0，=右边为1
    tempObj[tempArr[0]] = tempArr[1];
    console.log(tempObj);
    console.log(tempObj.username);
*/
    //删除一条cookie
    var expires = new Date(new Date().getTime()+1).toGMTString();
    document.cookie = "username=taozi;expires="+expires;
    //获取cookie
    console.log(document.cookie);
</script>
</body>
</html>

老师我想问问我的为什么时间还有而且时间还是不对的呢

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 60楼

同学您好