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>
这就完成了, 其实可以和前面一篇随机色的联系起来, 会更有意思.
JQuery和js实现简单的霓虹灯的更多相关文章
- jquery.validate.js的简单示例
一.官方资料 官网 github 二.html <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
- jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
- jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jquery.base64.js简单使用
jquery.base64.js, 加密,使用,先引入jquery,然后引入jquery.base64.js 使用如下 js中加密如下 $.base64.encode(result[i].ipadre ...
- jquery.query.js 插件（示例及简单应用）
帮助文档 var url = location.search; > "?action=view§ion=info&id=123&debug&te ...
- jquery.cycle.js简单用法实例
样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...
- jquery.query.js 插件（示例及简单应用） —— html之间传值
帮助文档 var url = location.search; > "?action=view§ion=info&id=123&debug&te ...
- 一个简单的页面弹窗插件 jquery.pageMsgFrame.js
页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处: ...
随机推荐
- web项目启动链接mysql巨慢
说明:项目部署到测试服务器上,mysql部署在另一台服务器上,项目第一次启动之后登陆后台很慢,大概30s左右,经查发现第一次访问数据库的时候会通过DNS解析客户端机器域名,mysql还有DNS反向解析 ...
- poj 1038 Bugs Integrated, Inc. 题解
提供一种代码难度比较简单的做法(可能) 状态表示: 设置状态$ f[i][j] $,表示第 \(i\) 行状态为 \(j\) 的最大放置数,因为这是个阴间题,因为题目内存设置很小,所以要用滚动数组,存 ...
- Feign配置日志的打印级别
一.细粒度的配置Feign的日志级别(针对每个微服务配置) 1.java代码方式 (1)在Feign接口注解上面配置configuration /** * @author : maybesuch * ...
- .axios的特点有哪些
从浏览器中创建XMLHttpRequests:node.js创建http请求:支持Promise API:拦截请求和响应:转换请求数据和响应数据:取消请求:自动换成json.axios中的发送字段的参 ...
- Linux常用命令：文件操作命令
Linux系统命令主要包括文件操作.网络命令和性能命令,本文介绍常用文件操作命令. 修改文件属性 文件类型: 普通文件:- 目录文件:d 块设备文件:b,硬盘 字符设备: c,串行端口的接口设备,例如 ...
- 为什么在使用LESS 除法计算时会出问题
hello,各位小伙伴们好,最近一直有小伙伴问我为什么写Less的时候,发现除法有了问题,在生成的css文件中,不给我们输出正确结果了. 直接抛结论: LESS 版本升级,EasyLess插件 新版本 ...
- slowhttptest慢速攻击工具使用详解
参考文章 浅谈"慢速HTTP攻击Slow HTTP Attack" HTTP慢速攻击 Slowhttptest攻击原理 InstallationAndUsage tag: #slo ...
- ThinkPHP 5.0.24 反序列化RCE （Windows下EXP）
直接上exp吧,Windows下. <?php namespace think\process\pipes; class Windows { private $files = []; publi ...
- Language Guide (proto3) | proto3 语言指南（一）定义消息类型
定义消息类型 首先让我们看一个非常简单的例子.假设您想定义一个搜索请求消息格式,其中每个搜索请求都有一个查询字符串.您感兴趣的特定结果页以及每页的结果数.下面是用于定义.proto消息类型的文件. s ...
- Weblogic漏洞利用
Weblogic漏洞 Weblogic任意文件上传(CVE-2018-2894) 受影响版本 weblogic 10.3.6.0.weblogic 12.1.3.0.weblogic 12.2.1.2 ...