需要提示创建JavaScript的功能

我正在处理这段代码来创建一个表，它点亮了不同的单元格，我一次创建了一个javascript函数来做到这一点，但所有的单元格同时点亮。我想帮助，使一个单元同时点亮，然后重置到原来的颜色需要提示创建JavaScript的功能

这里是示例代码

<html> 
<head> 

    <script type="text/javascript"> 
     function change(){ 
      document.getElementById("myTable").rows[1].cells[1].style.backgroundColor ="yellow"; 
      document.getElementById("myTable").rows[2].cells[2].style.backgroundColor ="green"; 
      document.getElementById("myTable").rows[2].cells[0].style.backgroundColor ="blue"; 
      document.getElementById("myTable").rows[0].cells[3].style.backgroundColor ="red"; 
      document.getElementById("myTable").rows[3].cells[1].style.backgroundColor ="orange"; 
     } 

     function reset() { 
      rows[1].cells[1].Value = "" 
      rows[1].cells[1].Value = "" 
      rows[1].cells[1].Value = "" 
      rows[1].cells[1].Value = "" 
      i = 0 
     } 
    </script> 

</head> 
<body> 
    <h2 style="text-align:center-left"> Sky Apprenticeship Test</h2> 
    <table id="myTable" width="80%" border="1"> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 

     <input id="clickMe" type="button" value="Run Program" onclick="change();" /> 

     <input type="button" value="Reset" onClick="this.table.reset()" /> 

    </table> 

</body> 
</html>

来源

2015-12-19 S Turk

看看Math.random函数来获得两个随机数，行和单元格。然后使用setInterval调用该函数，以便它按照您设置的时间间隔运行。如果您需要更多帮助，请添加评论。 – Will

你必须绘制细胞带有计时器后的某个时间。浏览器将重新绘制所有更改，如果在下次重新绘制之前完成所有更改。你会想要在人眼可见的时间间隔内进行更改。如果浏览器在3毫秒或者类似的情况下重绘，那么对每次重绘做一次更改是没有意义的。

var speed = 1000, 
 
    resetSpeed = 500; 
 

 
document.getElementById('clickMe').addEventListener('click', change); 
 
document.getElementById('reset').addEventListener('click', function() { 
 
    reset(document.getElementById('myTable')); 
 
}); 
 

 
function change() { 
 
    Promise.resolve() 
 
    .then(changeColorAndReset.bind(null, 'myTable', 'green', 2, 2)) 
 
    .then(changeColorAndReset.bind(null, 'myTable', 'blue', 2, 0)) 
 
    .then(changeColorAndReset.bind(null, 'myTable', 'red', 0, 3)) 
 
    .then(changeColorAndReset.bind(null, 'myTable', 'orange', 3, 1)) 
 
} 
 

 
function reset(table) { 
 
    Array.prototype.forEach.call(table.rows, function(row) { 
 
    Array.prototype.forEach.call(row.cells, function(cell) { 
 
     cell.style.background = ''; 
 
    }); 
 
    }); 
 
} 
 

 
function changeColor(table, color, x, y) { 
 
    return new Promise(function(resolve) { 
 
     setTimeout(function() { 
 
     document.getElementById(table).rows[x].cells[y].style.backgroundColor = color; 
 
     resolve(); 
 
     }, speed); 
 
    }); 
 
} 
 

 
function changeColorAndReset(table, color, x, y) { 
 
    return changeColor(table, color, x, y).then(function() { 
 
    return new Promise(function(resolve) { 
 
     setTimeout(function() { 
 
     document.getElementById(table).rows[x].cells[y].style.backgroundColor = ''; 
 
     resolve(); 
 
     }, resetSpeed); 
 
    }); 
 
    }); 
 
}

<body> 
 
    <h2 style="text-align:center-left"> my project</h2> 
 
    <table id="myTable" width="80%" border="1"> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 

 
    <input id="clickMe" type="button" value="Run Program"> 
 
    <input id="reset" type="button" value="Reset" />

这可能是最好使用队列（不容易停止动画），而不是承诺，但是这仅仅是一个例子。

来源

2015-12-19 21:58:30 MinusFour

嗨，感谢您的帮助我创建了JavaScript，以便在网页加载时运行，但是我希望函数在下一个函数运行前复位，即一个单元点亮，然后重置，然后下一个单元点亮 –

@Sturk ，继续努力吧。您不妨使用动画库。无论是jQuery或速度可以工作。 – MinusFour

需要提示创建JavaScript的功能

回答

相关问题