注意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. 使用XML作为配置表，WinForm程序读取配置表来动态显示控件

    一.首先创建一个XML文件定义以下格式(uName:显示的中文字,uKey:代表控件的Name属性,ukeyValue:代表是否显示) 二.项目中定义一个通用类,来存放读取的值 这三个字段对应XML文 ...

  2. 借助 AppleScript 一键打开工作空间

    我有个小毛病:同时只能在一个工程里工作. 假如让我开四五个 Webstorm,在工程里 A 改个Bug,然后又到工程 B 里加个需求,再去工程 C 发个版,切来切去一会儿就懵了. 于是有了这个项目:m ...

  3. 对于两个输入文件，即文件A 和文件B ,请编写MapReduce程序，对两个文件进行合并排除其中重复的内容，得到一个新的输出文件C。

    package org.apache.hadoop.examples; import java.util.HashMap; import java.io.IOException; import jav ...

  4. Connection reset by peer的常见原因及解决办法 RST 大文件上传

    Connection reset by peer的常见原因及解决办法 Connection reset by peer的常见原因 - 简书 https://www.jianshu.com/p/263e ...

  5. Microsoft Windows的消息循环

    https://zh.wikipedia.org/wiki/Microsoft_Windows的訊息迴圈 微软视窗操作系统是以事件驱动做为程序设计的基础.程序的线程会从操作系统获取消息.应用程序会不断 ...

  6. Webpack4.0各个击破（7）plugin篇

    目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...

  7. FridaHook框架学习（2）

    FridaHook框架学习(2) 前言 学习过程参考https://bbs.pediy.com/thread-227233.htm. 逆向分析 安装并运行例子程序,可以看到这个例子是一个验证注册码的程 ...

  8. Java——集合框架之ArrayList,LinkedList,迭代器Iterator

    概述--集合框架 Java语言的设计者对常用的数据结构和算法做了一些规范(接口)和实现(具体实现接口的类).所有抽象出来的数据结构和操作(算法)统称为Java集合框架(Java Collection ...

  9. ACCESS数据库偏移注入

    偏移注入主要是针对知道表,但是不知道字段的ACCESS数据库. 比如我们已经知道了表名是 admin 判断字段数: http://192.168.74.136:8002/Production/PROD ...

  10. Go语言学习笔记（3）——面向对象编程

    把存货赶紧更新一波(捂脸) 1. 类型系统 类型系统,就是说一种编程语言怎么设计的它的类型的体系结构. 比如基础类型啊,复合类型啊,一些可以指向任意对象的类型啊,以及类型的语义,面向对象的特性,接口, ...