需要提示创建JavaScript功能

时间:2015-12-19 21:28:43

标签: javascript html

我正在编写这个代码来创建一个表,它一次点亮一个不同的单元格,我已经设法创建一个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>

1 个答案:

答案 0 :(得分:0)

您必须在计时器之后的某个时间绘制细胞。如果您在下次重绘之前完成所有更改,浏览器将重新绘制所有更改。您希望在人类视线可见的间隔内进行更改。如果浏览器以3毫秒或类似的速度重新粉刷,那么每次重绘都没有意义。

&#13;
&#13;
(~(1 << 31)).toString(2) === ~((1 << 31).toString(2))
//----------------------------^ see the parenthesis
&#13;
$('div').keyup(function(){
    //make here for loop which replace all emoticons
    $(this).text().replace(':(', 'stupid.jpg');
});
&#13;
&#13;
&#13;

最好使用队列(不容易停止动画)而不是承诺,但这只是一个例子。