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的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
封装属于自己的JS组件
Jan 27 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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将金额数字转化为中文大写
2015/07/09 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
深入理解Python3中的http.client模块
2017/03/29 Python
python数据处理实战(必看篇)
2017/06/11 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Python使用python-docx读写word文档
2019/08/26 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
中软国际Java程序员机试题
2012/08/19 面试题
文言文形式的学生求职信
2013/12/03 职场文书
年度考核自我评价
2014/01/25 职场文书
入党自我评价范文
2014/02/02 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang