表中 Javascript 的动画不起作用。 怎么修？

Question

The animations on 1-5 lines in the table works. On the 6 line doesn't. You can see it here in action .

If you remove <td>Ff</td> , the animations work for every line.

 var twoColComp = { init: function (){ var tables = document.getElementsByTagName('table'); for(var i = 0; i < tables.length; i++) { if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)){ return; } var h = tables[i].clientHeight, t = tables[i].getBoundingClientRect().top, wT = window.pageYOffset || document.documentElement.scrollTop, wH = window.innerHeight; if(wT + wH > t + h/2){ this.make(tables[i]); } } }, make : function(el){ var rows = el.getElementsByTagName('tr'), vals = [], max, percent; for(var x = 6; x < rows.length; x++) { var cells = rows[x].getElementsByTagName('td'); for(var y = 1; y < cells.length; y++){ vals.push(parseInt(cells[y].innerHTML, 10)); } } max = Math.max.apply( Math, vals ); percent = 100/max; for(x = 0; x < rows.length; x++) { var cells = rows[x].getElementsByTagName('td'); for(var y = 1; y < cells.length; y++){ var currNum = parseInt(cells[y].innerHTML, 10); cells[y].style.backgroundSize = percent * currNum + "% 100%"; cells[y].style.transitionDelay = x/20 + "s"; } } el.className =+ " two-column-comp" } } window.onload = function(){ twoColComp.init(); } window.onscroll = function(){ twoColComp.init(); }

 body { font-family: sans-serif; max-width: 60em; margin: auto; padding: 1em; } table { width: 100%; background: #eee; padding: 1em; margin: 1em auto; box-sizing: border-box; border: 1px solid #ccc; } th { font-size: 1.2em } td { font-weight: bold; border-bottom: 1px solid #fbfbfb; width: 20%; padding: .5em .25em; background-size: 0% 100%; background-repeat: no-repeat; -webkit-transition: all .75s ease-out; -moz-transition: all .75s ease-out; transition: all .75s ease-out; } td:nth-child(2) { width: 40%; color: white; text-shadow: 1px 2px #222; text-align: right; background-image: -webkit-linear-gradient(to left, #e74c3c, #e74c3c); background-image: -moz-linear-gradient(to left, #e74c3c, #e74c3c); background-image: linear-gradient(to left, #e74c3c, #e74c3c); background-position: right top; } td:nth-child(3) { width: 40%; color: white; text-shadow: 1px 2px #222; background-image: -webkit-linear-gradient(right, #3498db, #3498db); background-image: -moz-linear-gradient(right, #3498db, #3498db); background-image: linear-gradient(right, #3498db, #3498db); background-position: left top; }

 <table> <tr> <th>Name</th> <th>Up</th> <th>Down</th> <th>Name</th> </tr> <tr> <td>A</td> <td>700</td> <td>170</td> <td>Aa</td> </tr> <tr> <td>B</td> <td>435</td> <td>100</td> <td>Bb</td> </tr> <tr> <td>C</td> <td>500</td> <td>175</td> <td>Cc</td> </tr> <tr> <td>D</td> <td>350</td> <td>170</td> <td>Dd</td> </tr> <tr> <td>E</td> <td>1980</td> <td>350</td> <td>Ee</td> </tr> <tr> <td>F</td> <td>2000</td> <td>180</td> <td>Ff</td> </tr> </table>

Answer 1

On line 137, you could add the ~~ (docs) to convert the NaN value obtained from parseInt(cells[y].innerHTML, 10) from the last cell of each tr into the value 0 .

For example, on Ff , the value of parseInt would be NaN . Adding ~~ would convert it to 0 .

In this example (line 141), the NaN value would be the max value, therefore it would not apply the backgroundSize correctly on line 148.

 console.log(Math.max.apply( Math, [2000, 100, NaN] )); console.log(Math.max.apply( Math, [2000, 100, 0] ));

Modified code

 var twoColComp = { init: function (){ var tables = document.getElementsByTagName('table'); for(var i = 0; i < tables.length; i++) { if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)){ return; } var h = tables[i].clientHeight, t = tables[i].getBoundingClientRect().top, wT = window.pageYOffset || document.documentElement.scrollTop, wH = window.innerHeight; if(wT + wH > t + h/2){ this.make(tables[i]); } } }, make : function(el){ var rows = el.getElementsByTagName('tr'), vals = [], max, percent; for(var x = 0; x < rows.length; x++) { var cells = rows[x].getElementsByTagName('td'); for(var y = 0; y < cells.length; y++){ vals.push(~~parseInt(cells[y].innerHTML, 10)); } } max = Math.max.apply( Math, vals ); percent = 100/max; for(x = 0; x < rows.length; x++) { var cells = rows[x].getElementsByTagName('td'); for(var y = 0; y < cells.length; y++){ var currNum = parseInt(cells[y].innerHTML, 10); cells[y].style.backgroundSize = percent * currNum + "% 100%"; cells[y].style.transitionDelay = x/20 + "s"; } } el.className =+ " two-column-comp" } } window.onload = function(){ twoColComp.init(); } window.onscroll = function(){ twoColComp.init(); }

 body { font-family: sans-serif; max-width: 60em; margin: auto; padding: 1em; } table { width: 100%; background: #eee; padding: 1em; margin: 1em auto; box-sizing: border-box; border: 1px solid #ccc; } th { font-size: 1.2em } td { font-weight: bold; border-bottom: 1px solid #fbfbfb; width: 20%; padding: .5em .25em; background-size: 0% 100%; background-repeat: no-repeat; -webkit-transition: all .75s ease-out; -moz-transition: all .75s ease-out; transition: all .75s ease-out; } td:nth-child(2) { width: 40%; color: white; text-shadow: 1px 2px #222; text-align: right; background-image: -webkit-linear-gradient(to left, #e74c3c, #e74c3c); background-image: -moz-linear-gradient(to left, #e74c3c, #e74c3c); background-image: linear-gradient(to left, #e74c3c, #e74c3c); background-position: right top; } td:nth-child(3) { width: 40%; color: white; text-shadow: 1px 2px #222; background-image: -webkit-linear-gradient(right, #3498db, #3498db); background-image: -moz-linear-gradient(right, #3498db, #3498db); background-image: linear-gradient(right, #3498db, #3498db); background-position: left top; }

 <table> <tr> <th>Name</th> <th>Up</th> <th>Down</th> <th>Name</th> </tr> <tr> <td>A</td> <td>700</td> <td>170</td> <td>Aa</td> </tr> <tr> <td>B</td> <td>435</td> <td>100</td> <td>Bb</td> </tr> <tr> <td>C</td> <td>500</td> <td>175</td> <td>Cc</td> </tr> <tr> <td>D</td> <td>350</td> <td>170</td> <td>Dd</td> </tr> <tr> <td>E</td> <td>1980</td> <td>350</td> <td>Ee</td> </tr> <tr> <td>F</td> <td>2000</td> <td>180</td> <td>Ff</td> </tr> </table>