es6初级之箭头函数实现隔行变色
无论是使用哪种方式实现隔行变色的效果，它的思路都是一样的：
1.定义很多个div
2.给div 加背景
3.鼠标移动到div上时，当前div 背景变色
4.鼠标移出div时，当前div背景恢复
以上4点就是隔行变色的思路流程，任何形式的实现方式，都要依照以上的思路来，否则将不会达到效果-----这是本质。因为经常会弄反，写着写着就忘记之前要干什么事了，所以此处写出来，当做提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
border: 1px solid #000;
margin: 10px;
border: 1px solid #000;
height: 10px;
padding: 10px;
}
.even-color {
background: #eee;
}
.odd-color {
background: #ccc;
}
.active {
background: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
js 常规实现方式（es5）:
window.onload = function() {
var adiv = document.querySelectorAll("div");
var oldColor = '';
adiv.forEach(function(ele, index) {
ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';
});
adiv.forEach(function(ele, index) {
ele.onmouseover = function() {
oldColor = this.className;
this.className = 'active';
}
ele.onmouseout = function() {
this.className = oldColor;
}
});
}
js es6实现方式：
window.onload = function() {
let adiv = document.querySelectorAll("div");
let oldColor = '';
adiv.forEach((ele, index) => {
ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';
});
adiv.forEach((ele, index) => {
ele.onmouseover = () => {
oldColor = ele.className;
ele.className = 'active';
};
ele.onmouseout = () => {
ele.className = oldColor;
}
});
};
js es6 及html5 ele.classList.add() & ele.classList.remove() 方法实现：
window.onload = function() {
let adiv = document.querySelectorAll("div");
let oldColor = '';
adiv.forEach((ele, index) => {
ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';
});
adiv.forEach((ele, index) => {
ele.onmouseover = () => {
ele.classList.add('active');
};
ele.onmouseout = () => {
ele.classList.remove('active');
}
});
}
运行结果都是相同的：
es6初级之箭头函数实现隔行变色的更多相关文章
- es6 初级之箭头函数
1.先看一个例子: <script> function show() { console.log('aluoha'); } show(); </script> 2. 改写成简单 ...
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...
- ES6学习之箭头函数
ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...
- 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- ES6系列之箭头函数
本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...
- JS ES6中的箭头函数（Arrow Functions）使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...
- es6学习笔记--箭头函数
基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...
- codewars--js--Reverse or rotate?----es6变量，箭头函数，正则取块
问题描述: 对输入的str按照sz个数进行分块,若一块内所有数字的立方和是偶数,则倒序:否则,向左移动一位.然后将修改过的块整合到一个字符串,作为输出. The input is a string s ...
- 从 ES6 高阶箭头函数理解函数柯里化
前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的 ...
随机推荐
- maven的包冲突
maven的间接引用会引入其他未声明的包,maven自身的冲突解决方案,最终引用的包可能不是希望的版本. 直接声明期望的版本号,就没有间接引用的问题. 子模块很多时,可以使用dependencyMan ...
- C语言强化——数组
打印九九乘法表 #include<stdio.h> int main() { int num = 1; for (int i = 1;i <= 9;++i) { for (int j ...
- [UE4]使用DataTable
- MySQL5.7修改默认密码、随机密码
mysql5.7以后默认生成随机密码,修改root用户密码 1.修改配置参数Linux: /etc/my.cnf Windows: C:\ProgramData\MySQL\MySQL Server ...
- 递归&栈帧空间
递归函数: 自己调用自己的函数 def digui(n): print(n) if n > 0: digui(n-1) print(n) digui(5) 执行结果: 5 4 3 2 1 0 0 ...
- kafka的安装 （单机）
https://blog.csdn.net/q282176713/article/details/81112988
- Tomcat+Nginx+Redis+MySQL实现反向代理、负载均衡、session共享
一.环境准备 时间同步 关闭防火墙 联通网络,配置yum源 软件包链接:https://pan.baidu.com/s/1qYbtpnQ 二.安装nginx 1.解决依赖关系 [root@nginx- ...
- Linux TCP/IP调优-Linux内核参数注释
固定文件的内核参数 下列文件所在目录: /proc/sys/net/ipv4/ 名称 默认值 建议值 描述 tcpsyn_retries 5 1 对于一个新建连接,内核要发送多少个SYN连接请求才决定 ...
- Android数据传递，使用广播BroadcastReceiver；
Android数据传递有很多种,Intent意图传递或使用Bundle去传递,接口监听回调传递数据,也可以把数据保存起来,使用的时候去读取等等等...,"当你知道足够多的数据传递的方式之后, ...
- Error running app: Default Activity not found ; 安卓程序运行不了，也不报错。
我最近copy一个工程,写完了去运行时不能运行,项目不报错,就是运行的地方有个叉号:尝试很多办法后准备重新New一个时发现:"10:17 Error running app: Default ...