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
页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处: ...
随机推荐
- Uber三代API 生命周期管理平台实现 Uber
Uber三代API 生命周期管理平台实现 - InfoQ https://www.infoq.cn/article/H8Ml6L7vJGQz0efpWvyJ Uber 三代 API 生命周期管理平台实 ...
- docker基本使用-常用命令
一. 常用命令 #查看docker服务 docker ps #启动docker服务 systemctl start docker #查看本地镜像 docker images #删除本地镜像 docke ...
- Weblogic漏洞利用
Weblogic漏洞 Weblogic任意文件上传(CVE-2018-2894) 受影响版本 weblogic 10.3.6.0.weblogic 12.1.3.0.weblogic 12.2.1.2 ...
- windows提权常用系统漏洞与补丁编号速查对照表
#Security Bulletin #KB #Description #Operating System CVE-2020-0787 [Windows Background Intelligent ...
- 调用ajax 跨域调用接口
//ajax 跨域请求数据 function ajaxType (){ $.ajax({ url: "http://127.0.0.1:9090/spring_mvc/HttpClient/ ...
- [SpringSecurity] UserDetailsService 详解
UserDetailsService 接口 当什么也没有配置的时候,账号和密码是由 Spring Security 定义生成的. 而在实际项目中账号和密码都是从数据库中查询出来的. 所以我们要通过自定 ...
- 枚举--让盗版美国总统wcc给你整明白哈哈
1.为什么要有枚举 Java中的枚举其实是一种语法糖,在 JDK 1.5之后出现,用来表示固定且有限个的对象.比如一个季节类有春.夏.秋.冬四个对象:一个星期有星期一到星期日七个对象.这些明显都是固定 ...
- Java反射应用--2
Java反射开窍第一篇 明天再写
- cloudera manager server迁移
一.迁移背景 服务器出了问题,导致整个cm server界面呈现出不可用的状态,也就是获取不到各个大数据组件以及主机相关的状态的信息,整个cm server的前端界面处于瘫痪的状态,不可用,刚开始怀疑 ...
- Java多线程Condition定点通知
多线程之间按顺序调用,实现A->B->C三个线程启动,要求如下:A打印5次,B打印10次,C打印15次接着 A打印5次,B打印10次,C打印15次 来10轮 package com.yan ...