<!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. P4774-屠龙勇士-扩展中国剩余定理

    屠龙勇士 很久很久以前,巨龙突然出现,带来了灾难带走公主又消失不见.王国十分危险,世间谁最勇敢,一位英雄出现-- 学习于该大佬博客 那么你就是这位英雄,不过不同的是,你面对的是一群巨龙,虽然巨龙都不会 ...

  2. 【NOIP2007】Hanoi双塔问题

    题目描述 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个相同的圆盘,注意这两个圆盘是不加区分的(下图为n=3的情形). 现要将这些圆盘移到C柱上 ...

  3. TheadLocal与synchronized

    深入比较TheadLocal模式与synchronized关键字 ThreadLocal模式synchronized关键字都用于处理多线程并发访问变量的问题,只是二者处理问题的角度和思路不同. 1)T ...

  4. 浏览器WEB Browser 常识

    浏览器WEB Browser 浏览器发展史 浏览器诞生与发展 浏览器的诞生 早期浏览器 Netscape Internet Explorer 与浏览器战争 chrome的崛起 时代之泪 IE浏览器终成 ...

  5. 论文笔记：（2019）GAPNet: Graph Attention based Point Neural Network for Exploiting Local Feature of Point Cloud

    目录 摘要 一.引言 二.相关工作 基于体素网格的特征学习 直接从非结构化点云中学习特征 从多视图模型中学习特征 几何深度学习的学习特征 三.GAPNet架构 3.1 GAPLayer 局部结构表示 ...

  6. Spring Cloud分区发布实践(5)--定制ServiceInstanceListSupplier

    现在我们简单地来定制二个 ServiceInstanceListSupplier, 都是zone-preference的变种. 为了方便, 我重新调整了一下项目的结构, 把一些公用的类移动到hello ...

  7. Java数组02——三种初始化及内存分析

    内存分析 三种初始化 例子  package array; ​ public class ArrayDemon02 {     public static void main(String[] arg ...

  8. CentOS后台服务管理类

    目录 一.service 后台服务管理(临时,只对当前有效) 二.chkconfig 设置后台服务的自启配置(永久) 三.CentOS7 后添加的命令:systemctl 一.service 后台服务 ...

  9. 遇到的JDBC的一些简单错误

    遇到的JDBC的一些简单错误 复习java swing的使用的时候,把东西都写好了,但是在进行数据库连接的时候,出现了错误 java.lang.ClassNotFoundException: com. ...

  10. Linux sudo权限提升漏洞CVE-2021-3156 POC及复现过程

    漏洞简介 2021年1月26日,国外研究团队披露了sudo 中存在的堆溢出漏洞(CVE-2021-3156).利用该漏洞,非特权账户可以使用默认的sudo配置主机上获取root权限,该漏洞影响1.8. ...