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的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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笔试题
2009/08/04 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
图解js图片轮播效果
2015/12/20 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python打开网页和暂停实例
2014/09/30 Python
对python函数签名的方法详解
2019/01/22 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
入职担保书怎么写
2014/05/12 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
linux下安装redis图文详细步骤
2021/12/04 Redis
Redis高可用集群redis-cluster详解
2022/03/20 Redis