JQuery和js实现简单的霓虹灯

注意jquery文件的路径要正确.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <style type="text/css">
        td{
            width: 200px;
            height: 30px;
            float: left;
            align: center;
            padding-left: 100px;
        }
    </style>
</head>
<body>
    <table align="center">
        <tr><td>只是第一行.</td></tr>
        <tr><td>只是第二行.</td></tr>
        <tr><td>只是第三行.</td></tr>
        <tr><td>只是第四行.</td></tr>
    </table>
</body>
<script type="text/javascript">
var time = setInterval(neonLights, 1000);
var flag = 0;
$('table').css("align", 'center');
function  neonLights(){
    if (flag % 2 == 0) {
            $("tr:even").css("background", '#2579BF');
            $("td:even").get(0).innerHTML = "RGB = #2579BF";
            $("td:even").get(1).innerHTML = "RGB = #2579BF";

            $("tr:odd").css("background", '#FB9752');
            $("td:odd").get(0).innerHTML = "RGB = #FB9752";
            $("td:odd").get(1).innerHTML = "RGB = #FB9752";
    }
    else{
            $("tr:even").css("background", '#FB9752');
            $("td:even").get(0).innerHTML = "RGB = #FB9752";
            $("td:even").get(1).innerHTML = "RGB = #FB9752";

            $("tr:odd").css("background", '#2579BF');
            $("td:odd").get(0).innerHTML = "RGB = #2579BF";
            $("td:odd").get(1).innerHTML = "RGB = #2579BF";
    }
    flag++;
}
</script>
</html>

这就完成了, 其实可以和前面一篇随机色的联系起来, 会更有意思.

posted @ 2017-10-05 21:36  默盒  阅读(648)  评论(0)  编辑  收藏  举报