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
页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处: ...
随机推荐
- 使用Bat自动打包并通过FTP发送到备份服务器——实战测试
这个bat文件要求本地安装有winrar解压软件,位置是:C:\Program Files\WinRAR\WinRAR.exe 如果执行报错,请检查你复制我的代码是否有问题,有些复制粘贴进去后因为一些 ...
- 从零开始学Java (五)条件选择
if switch while do while for break continue 这块对于有语言基础的人来说可以跳过了. 注意有个equals方法. 1 public class Main { ...
- springboot项目-声明式事务失效
1.项目背景 集成了shiro配置 2. 项目分析 由于ShiroFilterFactoryBean实现了FactoryBean接口,所以它会提前被初始化.又因为SecurityManager,Sec ...
- python atexit模块学习
python atexit模块 只定义了一个register模块用于注册程序退出时的回调函数,我们可以在这个函数中做一下资源清理的操作 注:如果程序是非正常crash,或者通过os._exit()退出 ...
- Java性能优化,操作系统内核性能调优,JYM优化,Tomcat调优
文章目录 Java性能优化 尽量在合适的场合使用单例 尽量避免随意使用静态变量 尽量避免过多过常地创建Java对象 尽量使用final修饰符 尽量使用局部变量 尽量处理好包装类型和基本类型两者的使用场 ...
- docker --- (入门必读)
容器 容器就是一个视图隔离.资源可限制.独立文件系统的进程集合.所谓"视图隔离"就是能够看到部分进程以及具有独立的主机名等:控制资源使用率则是可以对于内存大小以及 CPU 使用个数 ...
- sql画图
---------------------------------------------------------------------------------------------------- ...
- Java 复习整理day06
Java api 章节除了一下列的常用类别的用时候查文档 1 package com.it.demo01_api; 2 3 import java.util.Scanner; 4 5 /* 6 案例: ...
- Event Sourcing落地与意义
jsoncat:https://github.com/Snailclimb/jsoncat (仿 Spring Boot 但不同于 Spring Boot 的一个轻量级的 HTTP 框架) 高内聚低耦 ...
- 聊聊elasticsearch7.8的模板和动态映射
最近想写一篇es的索引的一个设计,由于设计的东西特别多,当然,elasticsearch的模板和动态映射也是其中的一个设计点,所以干脆先来聊聊索引的模板和动态映射,模板,听这个名字就相当于一些公共可用 ...