<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <ul>

            <li>HTML</li>

            <li>CSS</li>

            <li>JS</li>

            <li>JQ</li>

            <li>HTML5</li>

            <li>CSS3</li>

            <li>ES6</li>

        </ul>

    </body>

    <script>

        //使用let声明变量i,i就只在本轮循环中有效;如果使用var进行变量声明的话,就是全局变量,最后输出的就都是第8个

        var list = document.getElementsByTagName('li');

        for(let i = 0; i < list.length; i++){

            list[i].onmouseover = function(){

                str = list[i].innerText;

                this.innerText += '我是第' + (i+1) + '个'

                this.style.fontSize = '22px'

                this.style.color = '#f00'

            }

            list[i].onmouseout = function(){

                this.style.color = 'black'

                this.style.fontSize = '16px'

                this.innerText = str;

            }

        }

    </script>

</html>

用 let 声明的变量只在当前作用域中起作用，循环一次｛｝中就会有一个 i 值，当点击元素之后，就会获取到当前环境中的 i 值，从而结果是对应的。

如果用 var 声明且不添加自执行的匿名函数的话，for循环会先执行完毕，当点击元素的时候才会执行绑定的点击事件，点击事件环境中没有 i 值，就会沿着作用域向上找，找到的就是for循环中的 i 值。这个时候for循环已经执行完毕了，i值为7，所以无论划过哪一个按钮，弹出结果都是11

使用let实现循环小例子的更多相关文章

  1. Python,while循环小例子--猜拳游戏(三局二胜)

    Python,while循环小例子--猜拳游戏(三局二胜) import random all_choice = ['石头', '剪刀', '布'] prompt = '''(0)石头 (1)剪刀 ( ...

  2. JS的for循环小例子

    1.输出1-100的和 var sum = 0; for(var i=1;i<=100;i++){ sum = sum + i; } document.write(sum); 2.输出1-100 ...

  3. Shell的 for 循环小例子

    <1> 上例子 for i in f1 f2 f3; do @echo $i; done 执行结果: f1 f2 f3 但是,请注意:如果是在makefile 中写,要写成这个样子: al ...

  4. Python,for循环小例子--99乘法表

    一.99乘法表 for i in range(1, 10): for j in range(1, i + 1): print('%sx%s=%s ' % (j, i, j * i), end='') ...

  5. [Python]Python 使用 for 循环的小例子

    [Python]Python 使用 for 循环的小例子: In [7]: for i in range(5): ...: print "xxxx" ...: print &quo ...

  6. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  7. 一:AndEngine的小例子

    首先导入架包,下载:http://download.csdn.net/detail/duancanmeng/4060082 lib文件夹中 像我们写android程序entends Activity一 ...

  8. Ruby小例子

    1.ruby定义函数与执行函数案例 def fact(n) ) end end print fact() 结果: 24 2.一个小例子 words = [)] print "guess?\n ...

  9. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

随机推荐

  1. React优化

    这里主要分析在函数式react中的优化,类组件有生命周期函数定义较明确 React的核心特征之一是单向数据流(props自上往下流) 这会导致一个问题:当父组件state更新后,其自身及其所有chil ...

  2. ODOO14笔记---系统升级崩溃后进不去系统解决办法

    一.通过pycharm升级模块:  2.对于已安装odoo模块,升级报错系统崩溃的解决办法:---执行以下SQL     update ir_module_module set state ='ins ...

  3. Mac OS系统安装pymssql 报错

    Mac OS系统安装pymssql 一开始报错:缺少Cython,于是pip install Cython 然后还是报错:解决办法如下操作: 首先安装freetds 在 FreeTDS stable ...

  4. jvm源码解读--15 oop对象详解

    (gdb) p obj $15 = (oopDesc *) 0xf3885d08 (gdb) p * obj $16 = { _mark = 0x70dea4e01, _metadata = { _k ...

  5. Vue--启动后到加载第一个页面的过程

    地址栏http://localhost:8088/#/填写密码登录后自动跳转到http://localhost:8088/#/home/msg/workerpush 一\ 得先跳转到login页面 { ...

  6. SaltStack 任意文件读写漏洞（CVE-2020-11652）

    漏洞影响 SaltStack < 2019.2.4 SaltStack < 3000.2 同CVE-2020-11651 poc git clone https://github.com/ ...

  7. 数据库技术中的触发器(Trigger)——和ContentObserver功能类似

    刚总结过ContentObserver的作用和特点,顺便总结下数据库技术中的触发器(Trigger),触 发 器 分 为 表 触 发 器 . 行 触 发 器

  8. 2020年度钻石C++C学习笔记（2）--《博学谷》

    2020年度钻石C++C--<博学谷> 1．以下标示符中命名合法的是A A.__A__ B.ab.c C.@rp D.2Y_ 2．设 a 和 b 均为 double 型变量,且a=5.5. ...

  9. Jetpack MVVM 实战项目，附带源码+视频，收藏！

    从读者的反馈来看,近期大部分安卓开发已跳出舒适圈,开始尝试认识和应用 Jetpack MVVM 到实际的项目开发中. 只可惜,关于 Jetpack MVVM,网上多是 东拼西凑.人云亦云.通篇贴代码  ...

  10. MobSF移动安全扫描平台本地化部署与简单汉化

    在之前的文章MobSF移动安全扫描平台环境搭建与试用中,我们用docker进行了搭建,那么我们如何在本地直接搭建呢,其实也是很简单的. 本地化部署 我们在本地安装 其实是很简单的,里面有两个文件,在不 ...