频道栏目
首页 > 资讯 > JavaScript > 正文

js定义变量的时候var和不带var的作用具体代码演示

17-01-16        来源:[db:作者]  
收藏   我要投稿

这里的代码是正确的,没有任何问题

var oDiv=document.getElementById('oDiv');
    var i=index=0;

    //定义蛇
    function snake(x,y,pro) {
        //坐标
        this.x=x;
        this.y=y;
        pro.style.left=x+'px';
        pro.style.top=y+'px';
        document.getElementById('oDiv').appendChild(pro);

        //定义蛇移动的时候位置的变化


        //移动
        this.left=function () {
                      alert('1');

        };
        this.right=function () {

        };
        this.up=function () {

        };
        this.down=function () {

        };
        this.eat=function () {

        };
        this.dead=function () {

        };
    }
     //当按键无效时发出响声
      function music() {

      }


//蛇的移动
function move(event) {

    switch (event.keyCode)
    {
        case 38: snakes.up(); break;
        case 40: snakes.down();break;
        case 39: snakes.right();break;
        case 37: snakes.left(); break;
        default: alert('错误');


    }

}
//初始化过程;
   window.onload=function () {

       //在随机位置出产生一个节点,并返回其坐标
       var x=Math.round(Math.random()*100);
       var y=Math.round(Math.random()*10);
       //产生一个节点
       pro=document.createElement('div');
       pro.style.width=20+'px';
       pro.style.height=20+'px';
       pro.style.background='red';
       pro.style.position='absolute';
       //定义一条蛇
       snakes=new snake(x,y,pro);

       if(event) move(event);


   }

而下面这段代码,在定义pro和snakes的时候用到了var,导致snakes在move()这个函数中是无效的变量,

主要还是变量作用域的时候,但定义变量的时候如果在多个函数中会用到最好是不加var

var oDiv=document.getElementById('oDiv');
    var i=index=0;

    //定义蛇
    function snake(x,y,pro) {
        //坐标
        this.x=x;
        this.y=y;
        pro.style.left=x+'px';
        pro.style.top=y+'px';
        document.getElementById('oDiv').appendChild(pro);

        //定义蛇移动的时候位置的变化


        //移动
        this.left=function () {
                      alert('1');

        };
        this.right=function () {

        };
        this.up=function () {

        };
        this.down=function () {

        };
        this.eat=function () {

        };
        this.dead=function () {

        };
    }
     //当按键无效时发出响声
      function music() {

      }


//蛇的移动
function move(event) {

    switch (event.keyCode)
    {
        case 38: snakes.up(); break;
        case 40: snakes.down();break;
        case 39: snakes.right();break;
        case 37: snakes.left(); break;
        default: alert('错误');


    }

}
//初始化过程;
   window.onload=function () {

       //在随机位置出产生一个节点,并返回其坐标
       var x=Math.round(Math.random()*100);
       var y=Math.round(Math.random()*10);
       //产生一个节点
      var pro=document.createElement('div');
      pro.style.width=20+'px';
       pro.style.height=20+'px';
       pro.style.background='red';
       pro.style.position='absolute';
       //定义一条蛇
       var snakes=new snake(x,y,pro);

       if(event) move(event);


   }
相关TAG标签
上一篇:css3变形效果2D
下一篇:边框图片效果
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站