<!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. 微信小程序云开发-数据库-更新数据

    一.js文件代码使用.update更新数据 写一个更新数据的函数,函数内使用.update更新数据.一定要通过.doc指定修改哪一条数据.  二.wxml文件修改数据的按钮 在wxml文件中写[修改] ...

  2. odoo里API解读

    Odoo自带的api装饰器主要有:model,multi,one,constrains,depends,onchange,returns 七个装饰器. multimulti则指self是多个记录的合集 ...

  3. 第一篇 -- Sprint Tool Suite配置和Hello World编写

    首先需要安装 1. Sprint Tool Suite(本次所用版本:spring-tool-suite-3.8.3.RELEASE-e4.6.2-win32-x86_64) 2. Tomcat(本次 ...

  4. 第五十三篇 -- MFC美化界面2

    IDC_STATIC 1. 设置字体样式 方法1:在OnInitDialog()函数中使用以下语句 CFont * f; f = new CFont; f->CreateFont(50, // ...

  5. python序列化proto时对repeated修饰数据进行赋值(常用类型和其他类型)

    说一下对proto文件中数据使用时的书写方法,因为笔者也经常弄混淆 一.repeated修饰符,该列表是常用类型,比如int message C2GS_GoodsList { repeated int ...

  6. jvm源码解读--17 Java的wait()、notify()学习

    write and debug by 张艳涛 wait()和notify()的通常用法 A线程取得锁,执行wait(),释放锁; B线程取得锁,完成业务后执行notify(),再释放锁; B线程释放锁 ...

  7. 添加xxx到右键菜单

    1. 添加notepad++到右键菜单[1] 添加到 右键菜单 将以下内容保存为 OpenWithNotepad++.reg 文件,双击运行即可(其中可执行文件路径和菜单项名称请自行替换): 注: 下 ...

  8. centos 7 网络静态IP配置文件

    TYPE=EthernetPROXY_METHOD=noneBROWSER_ONLY=noBOOTPROTO=staticIPADDR=10.86.128.160GETWAY=10.86.128.1P ...

  9. 手撸一个SpringBoot-Starter

    1. 简介 通过了解SpringBoot的原理后,我们可以手撸一个spring-boot-starter来加深理解. 1.1 什么是starter spring官网解释 starters是一组方便的依 ...

  10. 关于MySQL8的WITH查询学习

    目录 前言 示例 练习 总结 前言 对于逻辑复杂的sql,with可以大大减少临时表的数量,提升代码的可读性.可维护性 MySQL 8.0终于开始支持with语句了,对于复杂查询,可以不用写那么多的临 ...