表中 Javascript 的動畫不起作用。 怎么修？

Question

表中 1-5 行的動畫有效。 6號線上沒有。 你可以在這里看到它的實際效果。

如果刪除<td>Ff</td> ，則動畫適用於每一行。

 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

在第 137 行，您可以添加~~ (docs)以將從每個tr的最后一個單元格的parseInt(cells[y].innerHTML, 10)獲得的NaN值轉換為值0 。

例如，在Ff ， parseInt的值將是NaN 。 添加~~會將其轉換為0 。

在此示例中（第 141 行）， NaN值將是最大值，因此它不會在第 148 行正確應用backgroundSize 。

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

修改代碼

 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>