<!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. ThinkPHP中使用Verify类生产验证码不显示的原因

    今天在做网站部署的时候,发现登录页面的验证码显示不出来了,而且不报任何错误. 直接通过url访问该操作也不能显示. 后来在网上查找了一些解决方法. 在调用$verify = new \Think\Ve ...

  2. selenium 配置ie11 浏览器

    1.IEDriverServer下载与配置 用淘宝的镜像地址:https://npm.taobao.org/mirrors/selenium/. 选3.0版本的  IEDriverServer_x64 ...

  3. 有语言基础的人应该如何学习python？

    正好最近在学python,感觉有语言基础的话更多在乎一些语法糖,毕竟其他东西在之前应该接触过了. 笔者C++是起始语言,也接触过java.js,介绍一点python的特点吧.帮助自己巩固所学,也希望能 ...

  4. chanakya

    仅供个人娱乐 参考http://www.saulgoodman.cn/HA-Chanakya.html 靶机信息 https://www.vulnhub.com/entry/ha-chanakya,3 ...

  5. 大都市meg DFS序

    题目描述 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了.不过,她经常回忆起以前在乡间漫步的情景.昔日,乡下有依次编号为1..n的n个小村庄, ...

  6. CRC校验原理和verilog实现方法(三)

    1 代码生成 verilog实现CRC校验,可以充分发挥FPGA的硬件特性,即并行运算的能力. 具体实现方式,可以参考我上一篇博客,关键是用线性反馈移位寄存器表示出多项式,另外注意校验数据高位在先.然 ...

  7. 电脑常用快捷键及常用的DOS命令

    电脑常用快捷键 Ctrl+C:复制 Ctrl+V:粘贴 Ctrl+A:全选 Ctrl+X:剪切 Ctrl+Z:撤销 Ctrl+S:保存 Alt+F4:关闭窗口 Shift+delete:永久删除 Wi ...

  8. 爱了，字节跳动大神最佳整理：582页Android NDK七大模块学习宝典，理论与实践

    前言 时至今日,短视频App可谓是如日中天,一片兴兴向荣.随着短视频的兴起,音视频开发也越来越受到重视,而且薪资水涨船高,以一线城市为例,音视频工程开发的薪资比Android应用层开发高出40%. 但 ...

  9. MySQL Utilities工具教程

    一.MySQL Utilities介绍 MySQL Utilities 提供一组命令行工具用于维护和管理 MySQL 服务器,包括: 管理工具 (克隆.复制.比较.差异.导出.导入)复制工具 (安装. ...

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

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