javascript - 表格中的 Javascript 动画不起作用。怎么修?
问题描述
表中 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>
解决方案
在第 137 行,您可以添加~~
(docs)以将从每个单元格的最后一个单元格NaN
获得的值转换为 value 。parseInt(cells[y].innerHTML, 10)
tr
0
例如,在 上Ff
, 的值parseInt
将是NaN
。添加~~
会将其转换为0
.
在此示例中(第 141 行),该NaN
值将是最大值,因此它不会backgroundSize
在第 148 行正确应用。
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>
推荐阅读
- c++ - 需要一个可调整大小的容器用于 std::mutex
- windows-7 - (AvaloniaUI) 在 Windows 7 中使用 OpenFileDialog 时引发 ArgumentException
- swift - 如何在 switch 语句中解开双选项——Swift
- python - 如何打印字符串的最后一次出现加上以下 N 行
- python - Pip 升级失败并出现错误:无效要求:'\xe2\x80\x93upgrade'
- python - python字符串作为变量报告nan
- c# - 检查列表中的分组项目是否在 LINQ 中不是唯一的
- java - 将 Json 解析为包含对象的对象
- ios - 一种在应用程序中处理参数(配置)的方法
- ajax - 确保请求仅在 JAX-RS / Jersey 中是 Ajax