6个DIV 135或246间隔一秒轮番显示效果


Posted in Javascript onJuly 24, 2010

在某技术群看到 A君 提出的如下一个问题:

A君

6个DIV 间隔一秒 轮番进行奇偶显示. 比如先135 一秒后 246 然后再135 循环

A君

要求代码短小精悍

B君

var a = document.getElementsByTagName('div'); 
var b = false; 
setInterval(function() { 
for (var i = 0; i < 6; i++) 
a[i].style.display = ((i & 1) ^ b) ? 'block' : 'none'; 
b = !b; }, 1000);

A君
D君这个效率不错啊
我这个不如abcd的简洁

j++; for (var i = 0; i < 6; i++) o[i].style.display = [['block', 'none'], ['none', 'block']][j & 1][i & 1];

D君
用数组,也影响效率

看完不得感叹 D君 的方法真的很好,如果是我真的想不出如此高效率的方法。

Javascript 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
js post方式传递提交的实现代码
May 31 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
Vue程序调试的方法
Jun 17 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
vuex实现购物车功能
Jun 28 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 #Javascript
几个有趣的Javascript Hack
Jul 24 #Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 #Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 #Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 #Javascript
aspx中利用js实现确认删除代码
Jul 22 #Javascript
JS实现self的resend
Jul 22 #Javascript
You might like
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python入门教程之运算符与控制流
2016/08/17 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
flask入门之表单的实现
2018/07/18 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python 求数组局部最大值的实例
2019/11/26 Python
golang/python实现归并排序实例代码
2020/08/30 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
爱牙日活动总结
2014/08/29 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
2016大学军训心得体会
2016/01/11 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS