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
页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处: ...
随机推荐
- Python+Selenium+Unittest实现PO模式web自动化框架（7）
1.TestDatas目录的功能 TestDatas目录下存放的是测试数据,比如:登录功能的测试用例数据. # --^_^-- coding:utf-8 --^_^-- # @Remark:登录测试数 ...
- HTML Standard系列：Event loop、requestIdleCallback 和 requestAnimationFrame
HTML Standard系列:Event loop.requestIdleCallback 和 requestAnimationFrame - 掘金 https://juejin.im/post/5 ...
- WPF显示命名空间不存在对应名称
3个办法 1 切换到Release模式,再生成.生成成功后切换回Debug模式就不报错了.这是Release模式下找不到我们自定义的控件导致的报错.所以切换为Release后生成则可以解决此问题. 2 ...
- Excel 如何使用 函数 实现传说中的 多条件中位数 （MEDIANIFS）？
数据科学交流群,群号:189158789,欢迎各位对数据科学感兴趣的小伙伴的加入! 实际上Excel中根本没有MEDIANIFS,但我们可以通过一些方式进行实现: 比如如下图的需求,需要求这一列中,1 ...
- Excel通配符
数据科学交流群,群号:189158789 ,欢迎各位对数据科学感兴趣的小伙伴的加入!
- Java 跨域 Json字符转类对象
前言 解析json 测试类 测试结果 前言 对于从其他服务器的url获得数据,我们一般都为json数据传输,比如服务器B要从服务器A的url获得分页信息,得到json字符后如果可以方便快捷操作要转为自 ...
- 小希的迷宫B - B
上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...
- Windows10 ping通 虚拟机上的Linux-CentOS7操作系统
我是按照Oracle VM VirtualBox 安装CentOS7操作系统这个博客安装Linux操作系统的. 我们这里只关心网卡的配置,网卡一: 网卡二: 我按照上面那个博客安装Linux操作系统之 ...
- POJ - 3693 Maximum repetition substring（重复次数最多的连续重复子串）
传送门:POJ - 3693 题意:给你一个字符串,求重复次数最多的连续重复子串,如果有一样的,取字典序小的字符串. 题解: 比较容易理解的部分就是枚举长度为L,然后看长度为L的字符串最多连续出现 ...
- 灯光照射，圆形探测类问题（解题报告）<分层差分><cmath取整>
题目描述 一个n*n的网格图上有m个探测器,每个探测器有个探测半径r,问这n*n个点中有多少个点能被探测到. 输入输出格式 输入格式: (1<=r<n<=5000) (1<=m ...