js中声明变量 用var和不用var

最新推荐文章于 2022-08-30 17:45:49 发布
最新推荐文章于 2022-08-30 17:45:49 发布
阅读量3.9k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38059635/article/details/82154770
版权

var attr = 1  使用var表示声明了一个局部变量

attr =1  不使用var则表示申明了一个全局变量

比如说下面的这个错误，

js部分就是没有使用var定义局部变量造成（已更改，错误点已经标出）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打地鼠</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        body {
            background-image: url(image/bg.jpg);
            /* 光标 */
            cursor: url(image/cursor.png), auto;
        }

        table {
            width: 600px;
            height: 600px;

            margin: 0px auto;
            border-collapse: collapse;
        }

        td {
            width: 150px;
            height: 150px;

            background-image: url(image/hole.png);
            background-repeat: no-repeat;
            background-size: 120px 50px;
            background-position: center bottom;
            text-align: center;
            /* 设置图片从底部出现
            设置垂直方向的出现位置 */
            vertical-align: bottom;
        }

        img {
            width: 80px;
            height: 0px;
            position: relative;
            top: -8px;
        }

        .mouseUp {
            animation: up 0.3s;
            /* 保持动画结束时刻的状态 */
            animation-fill-mode: forwards;
        }

        .mouseDown {
            animation: down 0.1s;
            animation-fill-mode: forwards;
        }

        @keyframes down {
            0% {
                height: 70px;
            }
            100% {
                height: 0;
            }
        }

        @keyframes up {
            0% {
                height: 0px;
            }
            100% {
                height: 70px;
            }
        }

        #defen {
            position: relative;
            top: 50px;
            font-size: 30px;
            background-color: rgba(100, 100, 100, 0.5);
            width: 120px;
            padding: 0px 10px 0px 30px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>

<body>
    <audio src="audio/music.mp3" autoplay loop></audio>
    <audio  id="dazhong"></audio>
    <div id="defen">得分:0</div>
    <table>
        <tr>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
            <td>
                <img src="image/mouse.png" alt="">
            </td>
        </tr>
    </table>

    <script src="jquery.js"></script>
    <script>
        var mouses = document.getElementsByTagName('img')
        // $代表一个jquery对象
        // p = People()
        // $ = jQuery()
        var mouses = $('img')
        var fenshu = 0;

        function showMouse() {
            // 0 ~ 1       0 ~ 15.XXXXXXXXXXXXXXXXXXXXX
            var random = Math.random() * 16
            // Math.floor获取一个不大于该数值的最大整数
            random = Math.floor(random)
            // 获取一个指定的地鼠
            var mouse = mouses.get(random) //这里必须要使用var来定义这个变量，不然在下面调用这个方法的时候，会造成下次调用使用上次的变量引发的错误

            $(mouse).addClass('mouseUp').removeClass('mouseDown')

            // timeout 延时；超时
            setTimeout(function () {
                $(mouse).addClass('mouseDown').removeClass('mouseUp').addClass().addClass().removeAttr().addAttr()
            }, 2500)
        }
        // function s..

        function play() {
            setTimeout(showMouse, 500)
            setTimeout(showMouse, 1000)
            setTimeout(showMouse, 1500)
            setTimeout(showMouse, 2000)
            setTimeout(showMouse, 2500)
            setTimeout(showMouse, 3000)
        }
        setInterval(play , 3000)
        
        // div.onmousedwon  
        // $('.red')  $('#defen') $('div')  $(变量名)
        $('body').mousedown(function(){
            // 更改标签的css样式
            $('body').css('cursor','url(image/cursor-down.png) , auto')
        }).mouseup(function(){
            $('body').css('cursor','url(image/cursor.png) ,auto').css().css().css().css()
        })
        // var body = document.querySelector('body')
        // body.onmousedown = function(){
        //     body.style.cursor = 'url(image/cursor-down.png) ,auto'
        // }
        // body.onmouseup = function(){

        // }
        $(mouses).click(function(){
            // $(this)指的是当前被点击的对象
            $(this).addClass('mouseDown').removeClass('mouseUp')
            
            fenshu += 10 ;
            
            // 更改标签文本
            $('#defen').text('得分:' + fenshu)
            // 更改标签属性
            $('#dazhong').attr('src','audio/dazhong.wav').get(0).play()
        })
        
       
    </script>
</body>

</html>

错误

_古时候
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中变量声明有var和没var的区别示例介绍
12-10
本文来论述JavaScript中变量声明有var和没var的区别，关于Js中的变量声明的作用域是以函数为单位，所以我们经常见到避免全局变量污染的方法是 (function(){ // ... })(); 在函数内部，有var和没var声明的变量是不...
H5 打地鼠游戏
Mr_王小峰的博客
08-25 3613
此游戏用到了jQuery，请自行下载 打地鼠 css样式 body{ height: 100%; width: 100%; /*设置背景图片*/ background-image: url(image/bg.jpg); /*设置外间距为0*/ margin: 0px; /*更改鼠标样式*/ cursor: url(ima
javascript中使用var关键字声明变量和不使用var关键字声明变量，这2者的区别
程宇寒
09-21 3149
javascript中使用var关键字声明变量和不使用var关键字声明变量，这2者的区别 使用var和不使用var的区别(全局变量/局部变量) /* 说明： 1.使用var声明变量，在方法内部是局部变量，在方法外部是全局变量 2.没有使用var声明的变量，在方法内部或外部都是全局变量，但如果是在方 法内部声明，在方法外部使用之前需要先调用方法，告知系统声明了全局变量后方可在方法外部使用。 ...
js中加var的变量和不加var的变量的区别
qq_41911554的博客
07-18 1354
var 到底是什么？ var就是js里面的关键字，他的作用就是声明变量。 var声明的变量的种类 var声明的变量如果是在全局代码中，则这个变量是全局变量。 var声明的变量如果是在局部代码中，则这个变量是局部变量。 var a=1; a=1; 两者的区别在与前者是声明了变量，而后者是给属性进行赋值操作。 加var和不加var的变量与window的关系 1.加不加var的全局变量都会作为window的属性。 2.加var的局部变量不会作为window的属性。 3.没有加var的变量只能作为全局变量
Javascript中函数中定义变量无var
十年砍柴的博客
10-09 1004
前段时间回答了一个关于定义变量时使用关键字 var 与否的区别，总结回顾一下。 1.在函数作用域内 加 var 定义的变量是局部变量，不加 var 定义的就成了全局变量。 使用 var 定义： var a = 'hello World'; function bb(){ var a = 'hello Bill'; console.log(a); } bb() //'hello Bill' console.log(a); //'hello world'
javascript中使用var和不使用var定义变量的区别
AHRL__的博客
02-27 3091
    听人问起这个问题，自己一时答不上来，便查找资料总结了一下。    JavaScript中使用var和不使用var定义变量主要有两个区别：    1.var a = 1; function aaa(){ b = 2; }; console.log(a);//1 //console.log(b);//b if not defined aaa(); console.log(b);//2代码...
关于JavaScript中var声明变量作用域的推断
12-10
一、迷思！由一段代码引发的疑惑 请看如下代码： 代码如下: for... 如果JavaScript中用var声明的变量可视为局部变量，那么能访问到这个变量的作用域就是这个变量的局部作用域。如上例，在console.log行处，依然有j、k
详解js中let与var声明变量的区别
01-21
ES6 新增了let命令，用来声明局部变量，所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。...说明：在ES6之前只有全局作用域和函数作用域，在ES6中新增了块级作用域，用{}花括号表
为什么在js当中没有var就是全局变量
u011927449的博客
07-20 1045
因为，在js中，如果某个变量没有var声明，会自动移到上一层作用域中去找这个变量的声明语句，如果找到，就是用，如果没找到， 就继续向上寻找，一直查找到全局作用域为止，如果全局中仍然没有这个变量的声明语句，那么自动在全局作用域进行声明，这个就 是js中的作用域链，也叫变量提升 代码示例如下： var data = 10; function fn1() { var data = 100; alert(data);//此时的data为100 fn2(); alert(data.
javaScript中使用var和不是用var定义变量的区别
xiaofei的博客
01-20 5297
javaScript与java、c语言虽然有很多相同，但是也存在区别 JavaScript的变量没有块范围 （1）看下面的例子 //定义全局变量 var scope="全集变量"; function test(){ //全局变量被局部变量覆盖 document.writeln(scope+"") //定义scope
不使用var定义的变量
关注我！带你一路 "狂飙" 到底！
08-14 446
demo5 可以看到，变量 a b 都是全局变量，同为window对象的其中一个属性，a 不可以删除，b 可以删除。demo3 直接访问变量 a b 可以正常输出结果，访问window对象的属性 a b结果为 undefined。demo1 可以看到，不管是直接访问变量 a b 或是访问window对象的属性 a b 都能输出相同结果。JavaScript声明变量可以用var声明，也可以不用var声明，两种声明变量的方式有什么区别呢？另外，使用var声明变量也叫显示声明，不用var声明变量也叫隐式声明。
H5经典教程：不使用var定义的变量
qfluohao的博客
04-22 539
js变量 JavaScript声明变量可以用var声明，也可以不用var声明，两种声明变量的方式有什么区别呢？ 注：此处暂不讨论 ES6 中的 let 和 const JavaScript变量分为局部变量和全局变量 简单理解： 在函数中用var声明的变量即为局部变量 在函数外用var声明的变量即为全局变量 但是，这里说的函数中和函数外也不是绝对的，看以下代码及分...
【 javascript】用一篇文章让你搞清楚var、let、const声明变量和不用var声明变量的区别
weixin_55846296的博客
08-30 1885
1、var声明变量和不用var声明变量的区别 2、var 、let、const的区别 以及`js代码运行过程`、 `声明变量` 和 `变量提升` （细细解剖一下）.........
js中加“var”和不加“var”的区别，看完觉得这么多年js白学了
EmotionComputer
09-13 3335
js中加“var”和不加“var”的区别，看完觉得这么多年js白学了 Javascript声明变量的时候，虽然用var关键字声明和不用关键字声明，很多时候运行并没有问题，但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。 var num = 1； 是在当前域中声明变量，如果在方法中声明，则为局部变量（local variable）；如果是在全局域中声明，则为全局变量。 而 nu...
js中为什么要减少使用var推荐使用let呢？
Youyzq的博客
06-21 1057
1.在for循环中使用var会有问题 当使用同步的时候，var还会正常执行但是只要只用了异步,就会出现严重的问题 当我使用异步的时候他的结果，都变成了3但是，不在异步中的还是可以正常得到我们想要的结果。 这就是没有的问题说白了就是利用，制造独立空间，让每个i都是独立的。 es6 语法 2015 年 6 月都推出了，还用var干什么啊，大佬勿喷新手慎用。...
JS中用var声明变量和不用var声明变量的区别
stay hungry,stay foolish!
07-22 988
点击查看 阅前须知：作用域（分为全局和局部），函数会开辟自己的作用域（或"空间"或"过程级"） 变量声明 变量在脚本中的第一次出现是在声明中。变量在第一次用到时就设置于内存中，便于后来在脚本中引用。使用变量之前先进行声明。可以使用 var 关键字来进行变量声明。 var count; // 单个声明。 var count, amount, level; // 用单个 var 关键字声明的多个声...
打地鼠小游戏
colorful_world_t的博客
07-24 224
这里写自定义目录标题 html和css样式代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打地鼠</title> <style type="text/css"> html{ height: 100%; } body{ ma...
js 变量声明 （var使用与不使用的区别）
05-06 8831
S中变量申明分显式申明和隐式申明。  代码如下 复制代码 var i=100;//显式申明 i=100;//隐式申明 在函数中使用var关键字进行显式申明的变量是做为局部变量，而没有用var关键字，使用直接赋值方式声明的是全局变量。　 　 当我们使用访问一个没有声明的变量时，JS会报错。而当我们给一个没有声明的变量赋值时
js不使用var创建变量
cauchy6317的博客
07-16 1021
变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。a是window对象的属性。 https://blog.csdn.net/u010003835/article/details/49682187（这篇很好，大力推荐）...
js中函数内部声明的var变量是全局变量吗
最新发布
07-17
在JavaScript中，函数内部使用 `var` 声明的变量会有不同的作用域规则，而不是全局变量。 使用 `var` 声明的变量，在函数内部声明的情况下，它的作用域是函数作用域。这意味着该变量只在声明它的函数内部可见，并且在函数外部是无法访问的。 ```javascript function myFunction() { var x = 10; // 在函数内部声明的变量 console.log(x); // 输出: 10 } console.log(x); // 报错，x未定义 ``` 上述示例中，在 `myFunction` 函数内部使用 `var` 声明了变量 `x`，并且只能在函数内部访问该变量。在函数外部尝试访问 `x` 会导致错误。 需要注意的是，如果在函数内部没有使用 `var`、`let` 或 `const` 来声明变量，那么该变量会成为全局变量。 ```javascript function myFunction() { x = 10; // 没有使用 var 声明，成为全局变量 console.log(x); // 输出: 10 } myFunction(); console.log(x); // 输出: 10 ``` 在这种情况下，变量 `x` 没有使用 `var` 声明，所以它成为了全局变量，可以在函数内部和外部访问。但是，为了避免意外的全局变量污染，最好在函数内部使用 `var`、`let` 或 `const` 声明变量，并且养成良好的编程习惯。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值