<!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. 04 AOF日志：宕机了，Redis如何避免数据丢失

    接下来两篇将记录Redis持久化存储两大技术:AOF日志.RDB快照 本篇重点 "AOF日志实现""AOF日志三种写回策略""AOF重写--避免日志过 ...

  2. NOI2021游记

    NOI2021游记 前言 写于 2021.7.28,成绩榜刚出后几个小时.总分 345 拿到银牌 183 名. 我的高中 OI 生活在这里画上句号.结局对我而言虽然不够完美,但是无论怎样都是我人生道路 ...

  3. 解析ArrayList的底层实现（上）

    private static final long serialVersionUID = 8683452581122892189L;//唯一序列号ID private static final int ...

  4. 并发队列ConcurrentLinkedQueue与LinkedBlockingQueue源码分析与对比

    目录 前言 ConcurrentLinkedQueue 使用方法 存储结构 初始化 入队 出队 获取容器元素数量 LinkedBlockingQueue 使用方法 存储结构 初始化 入队 出队 获取容 ...

  5. U 跳转中加入变量参数的写法

    href="{:U('Message/news?id='.$vo['messageid'].'')}" 就是在U方法里如果参数是变量就用 '.$i.'代替 {$i} <a h ...

  6. Cookie、Session、JWT在koa中的应用及实现原理

    目录 Cookie 重要属性 实现原理 cookie签名实现原理 注意事项 Session 实现原理 JWT 使用方式 组成 实际应用 实现原理 前端存储方式 cookie session local ...

  7. CSS样式逐li添加，执行完，清空，反复执行

    function change_light(el) { el.hide() let i = 0; function temp() { if (i > el.length - 1) { el.hi ...

  8. 如何将fidd上抓的包移到jmete中

    1.fiddler的安装配置就不说了, 网上有很多资源, 不会太难 2.使用fiddler抓包, 相信进来看这篇文章的博友都已经会使用fiddler抓包 3.打开jmeter, 添加>测试计划& ...

  9. netty系列之:自动重连

    目录 简介 使用netty建立连接 自动重连接的原理 模拟自动重连 总结 简介 我们在使用客户端和服务器端连接的过程中,可能会因为各种问题导致客户端和服务器的连接发生中断,遇到这种情况,一般情况下我们 ...

  10. Android开发音视频方向学习路线及资源分享，学完还怕什么互联网寒冬？

    接触Android音视频这一块已经有一段时间了,跟普通的应用层开发相比,的确更花费精力.期间为了学习音视频的录制,编码,处理也看过大大小小的几十个项目.总体感觉就是知识比较零散,对刚入门的朋友比较不友 ...