In the previous chapter, we used native JSS Realize all selection , No choice , Anti selection effect , In this chapter, we will realize the effect of color separation , Interlaced color means that the odd and odd rows in a table have the same color , Even and even rows have the same color , Odd and even rows have different colors , The effect of color separation between odd and even .

The effect picture of interlaced color is as above , Odd lines with background color antiquewhite, Even lines have a background color of aqua Odd and even , When the mouse moves to a certain line , The background color of the line turns red , Restore the original color when the mouse is removed .
Page's html The code is as follows :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title> Interlaced heterochromaticity </title> <style> div { padding: 20px; margin: 5px; border: solid 1px
#000; } </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> </body> </html>

This is the original outline of the page , existence 11 individual div, each div Defined the corresponding style , control div Has the effect of a table row , But at this time, the background color of each line is only a monotonous transparent color , Next, we write code to achieve the effect of odd and even color .

First, you need to define the odd and even rows and the background color of the currently selected row .
.odd { background-color: aqua; } .even { background-color: antiquewhite; }
.active { background-color: red; }
stay css Three are defined in class Style of , each class The style of defines only the background color , Now let's see js How is the code implemented .
var BgChange = function () { this.aDiv =
document.getElementsByTagName("div"); this.init = function() { for(var i = 0; i
< this.aDiv.length; i++) { if(i%2 == 0) { // Even lines this.aDiv[i].className = "odd";
} else { // Odd lines this.aDiv[i].className = "even"; } } }; }

As always , The BgChange Class has aDiv Class member properties , Record each line div Node of , stay init Loop through each div, If the current line number is divided by 2 be equal to 0, Then assign class by odd, otherwise class Assigned as even.

Next, we should monitor the mouse move in and remove events , When the mouse moves into a row , The background color changes to red , Restore to original color on removal , The code is shown below :
this.changeBgColor = function () { oldClassName = ""; // Loop through each div for(var i
= 0; i < this.aDiv.length; i++) { // Register mouse move in events for each line this.aDiv[i].onmouseover =
function () { oldClassName = this.className; this.className = "active"; };
this.aDiv[i].onmouseout = function () { this.className = oldClassName; } } };

One of the methods is used oldClassName To record the class, When the mouse removes the kitchen onmounseout Restore the original color when the event occurs , complete BgChange The class code is as follows :
var BgChange = function () { this.aDiv =
document.getElementsByTagName("div"); this.init = function() { for(var i = 0; i
< this.aDiv.length; i++) { if(i%2 == 0) { // Even lines this.aDiv[i].className = "odd";
} else { // Odd lines this.aDiv[i].className = "even"; } } }; this.changeBgColor =
function () { oldClassName = ""; // Loop through each div for(var i = 0; i <
this.aDiv.length; i++) { // Register mouse move in events for each line this.aDiv[i].onmouseover = function ()
{ oldClassName = this.className; this.className = "active"; };
this.aDiv[i].onmouseout = function () { this.className = oldClassName; } } }; }
The driver code is as follows :
window.onload = function () { var bgChange = new BgChange(); bgChange.init();
bgChange.changeBgColor(); }

Technology
©2019-2020 Toolsou All rights reserved,
Python Basic knowledge and notes Programmer Tanabata Valentine's Day confession code NOI2019 travels China's longest high speed rail officially opened ! The fastest way to finish the race 30.5 hour C Language programming to find a student's grade Software testing BUG describe ESP8266/ESP32 System : Optimize system startup time Unity Scene loading asynchronously ( Implementation of loading interface ) Baidu , Ali , Tencent's internal position level and salary structure , With job suggestions !PYTHON Summary of final review