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

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

JQuery和js实现简单的霓虹灯的更多相关文章

  1. jquery.validate.js的简单示例

    一.官方资料 官网 github 二.html <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  2. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  3. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  4. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  5. jquery.base64.js简单使用

    jquery.base64.js, 加密,使用,先引入jquery,然后引入jquery.base64.js 使用如下 js中加密如下 $.base64.encode(result[i].ipadre ...

  6. jquery.query.js 插件（示例及简单应用）

    帮助文档 var url = location.search; > "?action=view&section=info&id=123&debug&te ...

  7. jquery.cycle.js简单用法实例

    样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...

  8. jquery.query.js 插件（示例及简单应用） —— html之间传值

    帮助文档 var url = location.search; > "?action=view&section=info&id=123&debug&te ...

  9. 一个简单的页面弹窗插件 jquery.pageMsgFrame.js

    页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处: ...

随机推荐

  1. selenium浏览器弹出框alert 操作

    1.简介 在WebDriver中要处理JS生成的alert.confirm以及prompt,需要 switch_to.alert() 来选取(定位)警告弹窗,在对弹窗进行关闭.输入等信息操作. 2.操 ...

  2. CODING 再携手腾讯云 Serverless，让开发者跑步上云

    近年来,腾讯云持续在云原生领域打磨和完善产品矩阵,致力于为开发者上云提供更好的产品和服务.继前段时间 CODING CI 助力腾讯云 Serverless 全新应用控制台.持续保障 Serverles ...

  3. AES 密钥与 RSA 密钥的关系

    AES 加密说明 - 支付宝开放平台 https://opendocs.alipay.com/open/common/104567 AES 密钥是对接口请求和响应内容进行加密,密文无法被第三方识别,从 ...

  4. poj 2112 最优挤奶方案

    Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 16550   Accepted: 5945 ...

  5. BFS DFS与回溯

    https://blog.csdn.net/u014303647/article/details/88328526 cyc: https://github.com/CyC2018/CS-Notes/b ...

  6. 一：整合shiro

    整合shiro 1.原生的整个 1.1 创建项目 1.2 创建Realm 1.3 配置shiro 2.使用Shiro Starter 2.1 项目创建 2.2 创建Realm 2.3 配置Shiro ...

  7. Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理

    Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理 方案一:服务器端用 websocket 接受 rtsp ,然后,推送至客户端 实现步骤: 方案二:使用 ffmpeg + nginx 把 ...

  8. 环境变量jdk版本与java -version显示不一致

    问题描述: 问题产生原因: 1.Path环境变量配置了Oracle 2.C:\windows\System32下,还有java.exe. 问题描述: 今天遇到一个小bug,我电脑环境变量配置的版本是j ...

  9. 复制虚拟机，链接网络问题：没有找到合适的设备：没有找到可用于链接System eth0 的

    http://my.oschina.net/coolfire368/blog/292742 1./etc/udev/rules.d/70-persistent-net.rules 修改也成,修改时留下 ...

  10. dedecms织梦网站栏目增加英文名称的方法

    有时候因为网站功能需求,我们需要为织梦程序的栏目添加英文名称,这里有一个栏目添加英文名称的方法,下面站长和大家分享一下.因为客户需要做这样一个需要中英转换的栏目,在网上找了很多方法,但都不适用,终于被 ...