• 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{
                 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>
    

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

  • 相关阅读:
    常用的dos命令
    java环境的配置
    javascript面向对象个人理解
    js如何获取样式?
    springboot新建项目遇到Whitelabel Error Page
    CSS 隐藏页面元素的 几 种方法总结
    优美动听的葫芦丝名曲
    大前端资料合集
    CSS实现背景透明,文字不透明(兼容所有浏览器)
    文字上下无缝滚动效果
  • 原文地址:https://www.cnblogs.com/ZhengPeng7/p/7630068.html
Copyright © 2020-2023  润新知