JQuery和js实现简单的霓虹灯

最新推荐文章于 2022-08-12 23:10:39 发布

awgptb8308

最新推荐文章于 2022-08-12 23:10:39 发布

阅读量164

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ZhengPeng7/p/7630068.html

版权

注意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>

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

转载于:https://www.cnblogs.com/ZhengPeng7/p/7630068.html

awgptb8308

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery和js实现简单的霓虹灯

注意jquery文件的路径要正确.<!DOCTYPE html><html><head> <title></title> <meta charset="UTF-8" /> <script type="text/javascript" src="jquery-3.2.1.js"&...
复制链接

扫一扫