<!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. 使用Elastic Job的分片配置加速任务执行和提高资源利用率

    上一篇,我们介绍了如何使用Elastic Job实现定时任务.解决了使用@Scheduled来实现时候存在的竞争问题,同时也实现了定时任务的高可用执行. 然而,还有一类问题是我们在做定时任务时候容易出 ...

  2. Supervisord 远程命令执行漏洞（CVE-2017-11610）

    漏洞影响范围: Supervisor version 3.1.2至Supervisor version 3.3.2 poc 地址.https://github.com/vulhub/vulhub/tr ...

  3. 为什么 WordPress 镜像用起来顺手？

    有用户朋友问,用已有WordPress镜像好?还是自己动手安装配置好? 答案:用Websoft9的相关镜像好(各大云市场的镜像提供商比较多,"真假李逵"的现象总是有的,我们只对We ...

  4. 浏览器中hook对象属性

    先获取window对象属性 来源: 夜幕爬虫安全论坛 原文链接: http://bbs.nightteam.cn/thread-485.htm?orderby=desc&user=7

  5. Hotel 旅馆， 线段树查询，合并

    C. Hotel 旅馆 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较   题目描述 OIER最近的旅游计划,是到长春净月潭,享受那里的湖光山色, ...

  6. docker版LAMP(PHP+MYSQL+APACHE)配置

    最近在搭测试环境,一开始就在vagant和docker之间来回折腾.两者其实都非常适合用来搭开发环境:但最终让我决定用Docker的原因是因为Vagant在hyper-v下出现了一些奇怪的问题,所以D ...

  7. Java数组06——冒泡排序

    冒泡排序 例子:  package array; ​ import java.util.Arrays; ​ public class ArrayDemon08 {     public static ...

  8. 2021大厂Android面试高频100题最新汇总（附答案详解）

    前言 现在越来越多的人应聘工作时都得先刷个几十百来道题,不刷题感觉都过不了面试. 无论是前后端.移动开发,好像都得刷题,这么多人通过刷题过了面试,说明刷题对于找工作还是有帮助的. 不过这其中有一个问题 ...

  9. 别再用CSV了，更高效的Python文件存储方案

    CSV无可厚非的是一种良好的通用文件存储方式,几乎任何一款工具或者编程语言都能对其进行读写,但是当文件特别大的时候,CSV这种存储方式就会变得十分缓慢且低效.本文将介绍几种在Python中能够代替CS ...

  10. 面试官：实现一个带值变更通知能力的Dictionary

    如题, 你知道字典KEY对应的Value什么时候被覆盖了吗?今天我们聊这个刚性需求. 前文提要: 数据获取组件维护了业务方所有(在用)的连接对象,DBA能在后台无侵入的切换备份库. 上文中:DBA在为 ...